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 !

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 !

• javascript
• jquery
• materialize
• timepicker
• onselect

2 Answers 2

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare./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.

I try this time picker with on change and doesn't work too because the input value is equal ''.