Materialise Css Timepicker onSelect 不起作用

Question

我正在尝试使用 materializecss 的时间选择器。我需要使用 onSelect 事件，但没有任何反应。

这是 html :

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

这是 javascript :

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

时间选择器工作得很好，但是当我 select 时间和小时时，没有任何反应。控制台中没有错误，也没有显示警报... 我尝试了 onCloseEnd 事件，但也没有任何反应。

我需要帮助！

Answer 1

似乎文档有误。我检查了 materialize.js，发现 timepicker 没有绑定任何事件，例如 onOpenStart、onSelect 和 onCloseEnd，但是 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">

这是一个演示，显示了 none 文档中提到的事件被触发（它们甚至没有被注册，因为时间选择器中没有 event 选项。）

时间选择器

日期选择器

$('.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">

成功的唯一途径是使用 change() 事件。

Answer 2

这次我尝试使用 on change 选择器，但也不起作用因为输入值等于 ''.

Materialise Css Timepicker onSelect 不起作用

Materialize Css Timepicker onSelect doesn't work

javascript

jquery

onselect

timepicker

materialize