在 viewMode bootstrap datetimepicker 中禁用了键盘导航

Question

当我将 viewMode 选项设置为 'years' 时，我无法使用键盘键在年份之间导航，即使我在默认选择的年份按下回车键，小部件也会自动关闭，而它应该移动到 'months' viewMode 然后 'days' viewMode.

是否知道为什么它适用于点击但不适用于键盘导航？

提前致谢。

Answer 1

我为解决这个问题所做的是根据当前的视图模式重新绑定键，它工作得很好，这里是任何面临同样问题的人的解决方案：

$('#birthday').datetimepicker(
    {
        format: 'DD-MM-YYYY',
        locale:'fr',
        viewMode:'years'
    }).on('dp.show',function(e) 
    {
        document.removeEventListener("keydown", SubscripKeyDownHandler);
        $(this).data("DateTimePicker").keyBinds({
            up: function (widget) {
                if($('#birthday').data('DateTimePicker').viewMode()=="years")
                {
                    // console.log('years');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(4, 'y'));
                    } else {
                        this.date(this.date().clone().add(1, 'h'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="months")
                {
                    // console.log('months');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(4, 'M'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="days")
                {
                    // console.log('days');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(7, 'd'));
                    } else {
                        this.date(this.date().clone().add(1, 'm'));
                    }
                }
            },
            down: function (widget) {
                if($('#birthday').data('DateTimePicker').viewMode()=="years")
                {
                    // console.log('years');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(4, 'y'));
                    } else {
                        this.date(this.date().clone().subtract(1, 'h'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="months")
                {
                    // console.log('months');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(4, 'M'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="days")
                {
                    // console.log('days');
                    if (!widget) {
                        this.show();
                    }
                    else if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(7, 'd'));
                    } else {
                        this.date(this.date().clone().subtract(1, 'm'));
                    }
                }
            },
            left: function (widget) {
                if($('#birthday').data('DateTimePicker').viewMode()=="years")
                {
                    // console.log('years');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(1, 'y'));
                    } else {
                        this.date(this.date().clone().add(1, 'h'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="months")
                {
                    // console.log('months');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(1, 'M'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="days")
                {
                    // console.log('days');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().subtract(1, 'd'));
                    }
                }
            },
            right: function (widget) {
                if($('#birthday').data('DateTimePicker').viewMode()=="years")
                {
                    // console.log('years');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(1, 'y'));
                    } else {
                        this.date(this.date().clone().subtract(1, 'h'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="months")
                {
                    // console.log('months');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(1, 'M'));
                    }
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="days")
                {
                    // console.log('days');
                    if (widget.find('.datepicker').is(':visible')) {
                        this.date(this.date().clone().add(1, 'd'));
                    }
                }
            },
            enter: function (widget) {
                if($('#birthday').data('DateTimePicker').viewMode()=="years")
                {
                    setTimeout(function(){
                        $('#birthday').data('DateTimePicker').viewMode('months');
                      },1);
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="months")
                {
                    setTimeout(function(){
                        $('#birthday').data('DateTimePicker').viewMode('days');
                      },1);
                }
                else if($('#birthday').data('DateTimePicker').viewMode()=="days")
                {
                    this.hide();
                }
                console.log($('#birthday').data('DateTimePicker').viewMode());
            }
        });
    }).on('dp.hide',function(e)
    {
        //You can add this line of code to fix this issue:
        //The year viewMode is set the first time you open the datetimepicker 
        //and can't be set if you opened it again 
        setTimeout(function(){
            $('#birthday').data('DateTimePicker').viewMode('years');
          },1);
        document.addEventListener("keydown", SubscripKeyDownHandler);
    }).on("dp.change", function (e) {
    });

在 viewMode bootstrap datetimepicker 中禁用了键盘导航

Keyboard navigation disabled in viewMode bootstrap datetimepicker

javascript

jquery

bootstrap-datetimepicker

eonasdan-datetimepicker