今回は、 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>