Tastaturnavigation in viewMode bootstrap datetimepicker deaktiviert

Question

Wenn ich die Option viewMode auf "Jahre" setze, kann ich nicht mit den Tasten zwischen den Jahren navigieren, und selbst wenn ich die Eingabetaste für das ausgewählte Jahr drücke, wird das Widget automatisch geschlossen während es in 'Monate' viewMode dann 'Tage' viewMode verschieben sollte.

Gibt es eine Idee, warum es auf Klicks funktioniert, aber nicht mit der Tastaturnavigation ?.

Vielen Dank im Voraus.

Answer 1

Was ich tat, um dieses Problem zu beheben, ist den Schlüssel erneut zu binden, je nach dem aktuellen viewmode, und es funktioniert perfekt, hier ist die Lösung für all das gleiche Problem gegenüber:

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