Materialize Css Timepicker onSelect doesn't work

Question

I'm trying to use Timepicker of materializecss . I need to use the onSelect event but nothing happens.

This is the html :

<input type="text" name="time" class="timepicker">

This is the javascript :

$(document).ready(function(){
    $('.timepicker').timepicker({
        onSelect:function(hour,minute){
           alert(hour+" "+minute);
        }
    });
});

The timepicker is working very well but when I select time and hour, nothing happens. No error in console and no alert shown... I tried with the onCloseEnd event but nothing happens too.

I need help !

Answer 1

Seems the documentation is wrong. I checked the materialize.js and found that timepicker didn't bind any event such as onOpenStart , onSelect and onCloseEnd but datepicker did.

This snippet shows that the same event but only binding to datepicker.

 $('.timepicker').timepicker({ onSelect: function(time) { console.log(time) } }); $('.datepicker').datepicker({ onSelect: function(time){ console.log(time) } }); 

 .timepicker-modal, .datepicker-modal{ top: -5% !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script> <input type="text" name="time" class="timepicker"> <input type="text" class="datepicker"> 

Here's a demo, showing that none of the events mentioned in the documentation are triggered (They even didn't be registered cause there is no event options in timepicker.)

timepicker


datepicker

 $('.timepicker').timepicker({ onOpenStart: function(){ console.log('onOpenStart') }, onOpenEnd: function(){ console.log('onOpenEnd') }, onCloseStart: function(){ console.log('onCloseStart') }, onCloseEnd: function(){ console.log('onCloseEnd') }, onSelect: function(){ console.log('onSelect') }, }); $('.timepicker').on('change', function() { console.log('change: ' + this.value) }) 

 .timepicker-modal{ top: -5% !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script> <input type="text" name="time" class="timepicker"> 

The only way success is using change() event.

Answer 2

我尝试将此时间选择器进行更改，但由于输入值等于“”，因此也无法正常工作。