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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 30, 2018 at 13:20 tempSt69tempSt69 10122 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 ''.