Handsontable で ClockPicker による時刻入力を行う。

Handsontable の Cell type : time は、
書式による入力バリデーションチェックはあるものの、date type のように、
Date picker 同様、Time の picker までは標準で提供していない。
Handsontable セル入力として、ClockPicker
http://weareoutman.github.io/clockpicker/
を使いたい。
準備...

<link rel="stylesheet" type="text/css" href="handsontable.full.css">
<script type="text/javascript" src="jquery.handsontable.csv.js"></script>
<script type="text/javascript" src="handsontable.full.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-clockpicker.min.css">
<script type="text/javascript" src="jquery-clockpicker.min.js"></script>
</head>
<body>
<div>
   <div id="table"></div>
</div>
</body

まず、Cell Editor としてClockPicker が利用できるのは、textarea ではなく、input type="text" で
あることから、通常のCell Edtitor TextEditor では textarea なので、PasswordEditor を継承して

var timeEditor = Handsontable.editors.PasswordEditor.prototype.extend();

これの「セル入力編集開始」のイベント beginEditing の関数として、
type=password から、type=text に変更する。

timeEditor.prototype.beginEditing = function() {
   this.TEXTAREA.setAttribute('type', 'text');
   var editor = this;
   var targetInput = $(this.TEXTAREA);

セル入力編集開始として、作成される input タグに、ClockPicker を設定して描画する
columns: [] で、editor: timeEditor を指定する

var timeEditor = Handsontable.editors.PasswordEditor.prototype.extend();
timeEditor.prototype.beginEditing = function() {
   this.TEXTAREA.setAttribute('type', 'text');
   var editor = this;
   var targetInput = $(this.TEXTAREA);
   targetInput.clockpicker({
       autoclose: true,
       afterDone: function(){
           hot.setDataAtCell(editor.row, editor.col, targetInput.val());
       }
   });
   targetInput.clockpicker('show').clockpicker('toggleView', 'hours');
   Handsontable.editors.TextEditor.prototype.beginEditing.apply(this, arguments);
};

var data = [
  { A:'15:38', B:null, C:null }
];
var hot = new Handsontable(document.getElementById("table"), {
  data: data,
  columns:[
     {
        data: 'A',
        type: 'text',
        renderer: 'autocomplete',
        editor: timeEditor
     },
     {  data: 'B', type: 'text' },
     {  data: 'C', type: 'text' },
  ],
  colHeaders: ["時刻", "場所", "その他" ],
  dataSchema: { A:null, B:null, C:null },
  copyPaste: true,
  autoColumnSize: true,
  manualColumnResize: true,
  maxRows: 10,
  maxCols: 5,
  contextMenu: { items:{
       'row_above': { name: '１行挿入' },
       'remove_row': { name: '１行削除', disabled: function(){ return hot.countRows() < 2; }  },
       "hsep": "---------",
       'undo': { name: '戻る' },
    },
 },
});

f:id:posturan:20210806140139j:plain
クリックして編集開始で、、
f:id:posturan:20210806140235j:plain
時　を選んだら、、
f:id:posturan:20210806140313j:plain
分　を選ぶと自動的に閉じてセット
f:id:posturan:20210806140441j:plain

この ClockPicker の分入力を、[ 15, 30, 45. 00 ] と制限したい場合、、

var choices = ["00","15","30","45"];
var timeEditor = Handsontable.editors.PasswordEditor.prototype.extend();
timeEditor.prototype.beginEditing = function() {
    this.TEXTAREA.setAttribute('type', 'text');
   var editor = this;
   var targetInput = $(this.TEXTAREA);
   targetInput.clockpicker({
       autoclose: true,
       afterShow: function(){
           $(".clockpicker-minutes").find(".clockpicker-tick").filter(function(index, element){
              return !($.inArray($(element).text(), choices) != -1)
           }).remove();
       },
       afterDone: function(){
           var selectedMinutes = targetInput.val().split(":")[1];
           if ($.inArray(selectedMinutes, choices) == -1){
              targetInput.clockpicker('show').clockpicker('toggleView', 'minutes');
           }else{
              hot.setDataAtCell(editor.row, editor.col, targetInput.val());
           }
       }
   });
   targetInput.clockpicker('show').clockpicker('toggleView', 'hours');
   Handsontable.editors.TextEditor.prototype.beginEditing.apply(this, arguments);
};

ClockPicker で分の選択を１５分区切りに限定する - Oboe吹きプログラマの黙示録
と同様のことをしても、15分区切りの入力でなければ、分の picker を再表示というわけでなく、
閉じて入力が反映されないようにすることしかできない。