今回は、日付の入力チェックを行う関数を作成します。
入力チェックは以下の通りです。
- 開始日、終了日は必須とします。
- 開始日が終了日より古い場合はエラーとします。
- エラーがあった時、メッセージのセルにエラー内容を表示します。
- 入力が正常の時、メッセージのセルにOKを表示します。
以下は開始日のチェック関数です。
/* 開始日 - 検証関数 */
var validate_start=function(cell,value){
clear_message(cell);
if(!value){
update_message(cell,'開始日は必須です。');
return false;
}
var data = cell.getData();
if(!data.end) {
update_message(cell,'終了日は必須です。');
return false;
}
var start = moment(value, "YYYY/MM/DD");
var end = moment(data.end, "YYYY/MM/DD");
if(start.isAfter(end)){
update_message(cell,'開始日が終了日より遅い日付です。');
return false;
}
return true;
}
日付入力用のエディターは前回作成した関数dateEdit を流用しています。 違いは、入力チェックが正常の時、 メッセージのセルにOKを表示する処理を追加した部分です。 Tabulator のバージョンが、4.4.3 以降でないと success() が返り値を返さないので 4.4.3 以降のバージョンを使用してください。
var successFunc = function() {
...
if(success(val)){ // 値が正常ならOK表示
update_message(cell,'OK');
}
}
moment.js は以下のCDN を使用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
カラム定義
{title:"開始日",field:"start",editor:dateEdit,validator:{type:validate_start},width:150},
{title:"終了日",field:"end",editor:dateEdit,validator:{type:validate_end},width:150},
{title:"メッセージ",field:"msg", width:300},
データ定義
{start:"2019/5/1",end:"2019/5/2", msg:""},
サンプルコード
<!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>入力チェック付日付入力用エディター</h1>
<div id="table"></div>
<script type="text/javascript">
// エラーメッセージ表示
var update_message = function(cell, msg){
cell.getRow().update({"msg":msg});
}
// エラーメッセージクリア
var clear_message = function(cell){
update_message(cell,"");
}
/* 開始日 - 検証関数 */
var validate_start=function(cell,value){
clear_message(cell);
if(!value){
update_message(cell,'開始日は必須です。');
return false;
}
var data = cell.getData();
if(!data.end) {
update_message(cell,'終了日は必須です。');
return false;
}
var start = moment(value, "YYYY/MM/DD");
var end = moment(data.end, "YYYY/MM/DD");
if(start.isAfter(end)){
update_message(cell,'開始日が終了日より遅い日付です。');
return false;
}
return true;
}
/* 終了日 - 検証関数 */
var validate_end=function(cell,value){
clear_message(cell);
if(!value){
update_message(cell,'終了日は必須です。');
return false;
}
var data = cell.getData();
var start = moment(data.start, "YYYY/MM/DD");
var end = moment(value, "YYYY/MM/DD");
if(start.isAfter(end)){
update_message(cell,'終了日が開始日より早い日付です。');
return false;
}
return true;
}
var dateEdit = function(cell, onRendered, success, cancel, editorParams){
// cell-編集可能なセルのセルコンポーネント
// onRendered-エディターがレンダリングされたときに呼び出す関数
// success-正常に更新された値をTabulatorに渡すために呼び出す関数
// cancel-編集を中止して通常のセルに戻るために呼び出す関数
// editorParams-editorParams列定義プロパティに渡されるparamsオブジェクト
// 日付入力用エディターを作成
var editor = document.createElement("input");
editor.setAttribute("type","date");
// エディターの値をセルの現在の値に設定します
editor.value = moment(cell.getValue(), "YYYY/MM/DD").format("YYYY-MM-DD");
//エディターが選択されたときに選択ボックスにフォーカスを設定します
// （タイムアウトによりエディターをDOMに追加できます）
onRendered(function(){ editor.focus() });
//値が設定されたら、更新するセルをトリガーします
var successFunc = function() {
var val = "";
if(editor.value) // 空白チェック
val=moment(editor.value,"YYYY-MM-DD").format("YYYY/MM/DD");
if(success(val)){ // 値が正常ならOK表示
update_message(cell,'OK');
}
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
return editor;
}
var show_table=function(){
var tdata = [
{start:"2019/5/1",end:"2019/5/2", msg:""},
];
var columns= [
{title:"開始日",field:"start",editor:dateEdit,validator:{type:validate_start},width:150},
{title:"終了日",field:"end",editor:dateEdit,validator:{type:validate_end},width:150},
{title:"メッセージ",field:"msg", width:300},
];
new Tabulator("#table", {
data:tdata,
columns: columns
});
}
</script>