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

Question

当我将viewMode选项设置为'年'时，我无法使用键盘键在多年之间导航，即使我在默认选定年份按Enter键，小部件也会自动关闭移至'月'viewMode然后'天'viewMode。

有什么想法可以解决点击而非键盘导航的问题吗？

提前谢谢。

Answer 1

我解决这个问题的方法是根据当前的viewMode重新绑定密钥，并且它完美地运行，这是面向同一问题的任何人的解决方案：

$('#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) {
    });