Materialize Css Timepicker onSelect 不起作用

Posted 2023-05-07

【中文标题】Materialize Css Timepicker onSelect 不起作用

【英文标题】：Materialize Css Timepicker onSelect doesn't work

【发布时间】：2018-10-10 14:30:28

【问题描述】：

我正在尝试使用 materializecss 的 Timepicker。我需要使用 onSelect 事件，但没有任何反应。

这是html：

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

这是javascript：

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

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

我需要帮助！

【参考方案1】：

似乎文档是错误的。我检查了materialize.js，发现timepicker没有绑定任何事件，例如onOpenStart、onSelect和onCloseEnd，但是datepicker绑定了。

这个 sn-p 显示相同的事件，但只绑定到 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">

这是一个演示，显示文档中提到的所有事件都没有被触发（它们甚至没有被注册，因为时间选择器中没有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() 事件。

【讨论】：

感谢您确认文档有误！让我们使用 change() ！

【参考方案2】：

我尝试使用这个时间选择器进行更改，但也不起作用 因为输入值等于''。