解決、Handsontable で ClockPicker による時刻入力

自分で作っていて気に入らなかった
oboe2uran.hatenablog.com

これを解決してくれたブログ記事を見つけました。
【Handsontable】セル内に時刻入力(ClockPicker)の表示 - Qiita

非常に助かり、感謝です。

そのまま、コピーで使わせてもらいたいと思います。
外だしの JS ソースで使いまわします。
handson_timepicker.js

/**
 * handson_timepicker.js
 */
$(function(){
    const TimeEditor = Handsontable.editors.BaseEditor.prototype.extend();
    TimeEditor.prototype.init = function(){
        this.clock = document.createElement('input');
        this.clock.setAttribute('type', 'text');
        const that = this;
        this.clockInput = $(this.clock).clockpicker({
            placement: 'bottom',
            align: 'left',
            autoclose: true,
            afterShow: function(){
                $('.clockpicker-minutes').find('.clockpicker-tick').show();
                let choices = that.instance.getCellMeta(that.row, that.col).source;
                if (choices == undefined || choices.length == 0) return;
                $('.clockpicker-minutes').find('.clockpicker-tick').filter(function(index, element){
                    return !($.inArray($(element).text(), choices) != -1)
                }).hide();
            },
            afterDone: function(){
                let choices = that.instance.getCellMeta(that.row, that.col).source;
                if (choices != undefined && choices.length > 0) {
                    let selectedMinutes = that.clockInput.val().split(":")[1];
                    if ($.inArray(selectedMinutes, choices) == -1) {
                        let time = that.clockInput.val().split(":");
                        let hour = time[0];
                        let minutes = choices[0];
                        for(minutes of choices){
                            if(time[1] < minutes) break;
                        }
                        that.clockInput.val(hour + ':' + minutes)
                        that.clockInput.clockpicker('show').clockpicker('toggleView', 'minutes');
                        let $cpop = $('.clockpicker-popover');
                        $cpop.offset(locate);
                        return;
                    }
                }
                that.instance.setDataAtCell(that.row, that.col, that.clockInput.val());
            }
        });
    };
    TimeEditor.prototype.open = function(){
        let $td = $(this.TD);
        let offset = $td.offset();
        this.clockInput.clockpicker('show');
        $(document).off('click.clockpicker.cp1 focusin.clockpicker.cp1');
        let $cpop = $('.clockpicker-popover');
        locate = { top: offset.top + $td.height() + 10, left: offset.left };
        $cpop.offset(locate);
        $('.clockpicker-hours, .clockpicker-span-hours, .clockpicker-span-minutes')
.on('mousedown mouseup', function (event) {
            event.stopPropagation();
        });
        $('.clockpicker-minutes').on('mousedown', function(event){
            event.stopPropagation();
        });
    };
    TimeEditor.prototype.close = function(){
        this.clockInput.clockpicker('hide');
    };
    TimeEditor.prototype.getValue = function(){
        return $('.clockpicker-span-hours').text() + ':' + $('.clockpicker-span-minutes').text();
    };
    TimeEditor.prototype.setValue = function(newValue){
        this.clock.value = newValue;
    };
    TimeEditor.prototype.focus = function(){};
    Handsontable.editors.TimeEditor = TimeEditor;
    Handsontable.editors.registerEditor('time', TimeEditor);
});

これを <script src= で指定して、カラム定義を以下のようにします。
10分区切りや、15分区切り、カラム定義で定義して、
Handsontable インスタンスのセルのメタ情報として認識させるんですね。なるほど。。。

columns:[
    {
        data: 'A',
        tyoe: 'text',
        renderer: 'autocomplete', editor: 'time'
    },
    {
        data: 'B',
        tyoe: 'text',
        renderer: 'autocomplete', editor: 'time',
        source: ['00','10','20','30','40','50']
    },
    {
        data: 'C',
        tyoe: 'text',
        renderer: 'autocomplete', editor: 'time',
        source: ['00','15','30','45']
    },
],