Materialize Css Timepicker onSelect 不起作用
Posted
技术标签:
【中文标题】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】:我尝试使用这个时间选择器进行更改,但也不起作用 因为输入值等于''。
【讨论】:
以上是关于Materialize Css Timepicker onSelect 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
使用 angular-cli、sass 和 materialize-css 找不到字体
不使用 bootstrap/bulma/materialize 等框架时如何开始构建自己的 css
Webpack 加载 materialize-css,无法读取未定义的属性“swing”