Keyboard navigation disabled in viewMode bootstrap datetimepicker

Question

When I set viewMode option to 'years', I can't use keyboard keys to navigate between years, and even when I press enter key on the default selected year, the widget is automatically closed while it should move to 'months' viewMode then 'days' viewMode.

Is there any idea why it works on clicks but not with keyboard navigation?.

Thank you in advance.

Answer 1

What i did to fix this issue is to rebind the keys depending on the current viewMode, and it works perfectly, here is the solution for anyone facing the same issue :

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