Tabulator tips

第25回 max,min属性による開始、終了日制限付日付エディター

2020.05.20

今回は、 html の date エレメントの max,min 属性を使用して 開始日、終了日の入力制限を行います。

日付入力用のエディターは前回作成した関数dateEdit を流用しています。

日付の入力制限は date エレメントの max, min 属性で行います。 日付の入力制限を date エレメントの max,min 属性で行うため、 validate_start(), validate_end() の入力チェックは入力項目の未入力チェックだけとなります。

開始日、終了日の入力条件は以下の通りです。

  • max,min属性で制御

    • 開始日は終了日より古い日付を入力
    • 終了日は開始日より新しい日付を入力
    • 終了日が未入力の場合、開始日は任意の日付入力OK
  • validate_start() 入力チェック

    • 開始日は入力があれば OK
    • 終了日時が入力済の場合、開始日未入力は NG
    • 開始日、終了日ともに未入力は OK
  • validate_end() 入力チェック

    • 終了日未入力は OK
    • 開始日未入力の場合、終了日の入力は NG

以下は入力チェック関数です。

// 開始日チェック
const validate_start=(cell,value)=>{
    // 開始日入力がある場合は、OK(true)
    if(value) return true;

    // 以下、開始日未入力の処理。 
    // 終了日時が未入力の場合、  OK(true)
    // 終了日時が入力済みの場合、NG(false)
    return (!cell.getData().end)?true:false;
}
// 終了日チェック
const validate_end=(cell,value)=>{
    // 終了日は入力なくても OK(true)
    if(!value) return true;

    // 開始日時がない場合、NG(false)
    return (!cell.getData().start)? false: true;
}

moment.js は以下のCDN を使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>

カラム定義の width:120 により、日付入力時、日付入力クリア用の xマークがカラムに隠れないように幅を確保しています。

カラム定義

{title:"開始日",field:"start", width:120,
          editor:dateEdit, validator:{type:validate_start}},
{title:"終了日",field:"end", width:120, 
          editor:dateEdit, validator:{type:validate_end}}

サンプルコード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
</head>

<body onload="show_table()">
<h1 id=title>max,min属性による開始、終了日制限付日付エディター</h1>
<div id="table"></div>

<script type="text/javascript">
// 開始日チェック
const validate_start=(cell,value)=>{
    // 開始日入力がある場合は、OK(true)
    if(value) return true;

    // 以下、開始日未入力の処理。 
    // 終了日時が未入力の場合、  OK(true)
    // 終了日時が入力済みの場合、NG(false)
    return (!cell.getData().end)?true:false;
}
// 終了日チェック
const validate_end=(cell,value)=>{
    // 終了日は入力なくても OK(true)
    if(!value) return true;

    // 開始日時がない場合、NG(false)
    return (!cell.getData().start)? false: true;
}
// 日付入力
const dateEdit = function(cell, onRendered, success, cancel, editorParams){
    var editor = document.createElement("input");
    editor.setAttribute("type","date");

    // date max, min setting
    var data = cell.getData();
    var field = cell.getField();

    // max,min 属性設定
    if(field === 'start' && data.end){
        editor.setAttribute("max",
            moment(data.end, "YYYY/MM/DD").format("YYYY-MM-DD"));
    }
    else if (field === 'end' && data.start){
        editor.setAttribute("min",
            moment(data.start, "YYYY/MM/DD").format("YYYY-MM-DD"));
    }
    editor.value = moment(cell.getValue(), "YYYY/MM/DD").format("YYYY-MM-DD");
    onRendered(function(){ editor.focus() });
    var successFunc = function() {
        let val = "";
        if(editor.value)
            val=moment(editor.value,"YYYY-MM-DD").format("YYYY/MM/DD")
        if(success(val)){ // 成功
            // 入力後処理
            console.log("date input", val);
        }
    }
    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);
    return editor;
};
var show_table=function(){
    var tdata = [
        {start:"2019/5/1",end:"2019/5/2"},
    ];
    var columns= [
      {title:"開始日",field:"start", width:120,
                editor:dateEdit, validator:{type:validate_start}},
      {title:"終了日",field:"end", width:120, 
                editor:dateEdit, validator:{type:validate_end}}
    ];
    new Tabulator("#table", {
        data:tdata,
        columns: columns
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index