如何以编程方式打开时间选择器
Posted
技术标签:
【中文标题】如何以编程方式打开时间选择器【英文标题】：How to programmatically open a time picker 【发布时间】：2018-08-25 16:14:06 【问题描述】：我有一个MaterializeCSS 时间选择器元素。 我需要将其链接到隐藏的输入字段，并且 (1) 通过单击按钮以编程方式触发时钟对话框的打开。 另外，（2）我需要拦截时间选择事件。
这是一个示例代码。
<html>
<head>
<!-- jQuery -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified MaterializeCSS javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<input type="hidden" id="mytimepickerelement" class="timepicker" class="validate">
<a class="waves-effect waves-light btn timepicker" onclick="showtimepicker();">Set time</a>
<script type="text/javascript">
function showtimepicker()
// (1) TODO ON $('#mytimepickerelement')
function initializetimepicker()
$('.timepicker').pickatime(
default: '0:00',
fromnow: 0,
twelvehour: false,
donetext: 'OK',
cleartext: 'Clear',
canceltext: 'Cancel',
autoclose: false,
ampmclickable: false,
aftershow: function(),
// (2) SOMETHING ELSE TODO TO INTERCEPT TIME SELECTION/MODAL CLOSURE EVENT
);
$(document.ready(intializetimepicker));
</script>
</body>
</html>
如何解决 (1) 和 (2) 并让按钮正常工作？
【问题讨论】：
如果您有 minimal reproducible example 会有所帮助 codepen.io/jonvadillo/pen/zqVWXp 似乎可以解决问题。我搜索了 MaterializeCSS 时间选择器触发器 按建议编辑。您喜欢的代码未链接到按钮。 它链接到一个可以设置为按钮样式的标签 什么意思？ 【参考方案1】：一开始我觉得有点奇怪。我模拟了点击时间选择器，但没有任何反应。所以我将它延迟了约 1 毫秒，它起作用了……我知道这是一个奇怪的解决方案，但它仍然是解决方案。
示例 HTML：
<a onclick="ope();">adas</a>
<div class="row">
<div class="input-field col s12">
<label for="timepicker_ampm_dark">Time am/pm ( dark theme )</label>
<input id="timepicker_ampm_dark" class="timepicker" type="time"/>
</div>
</div>
js/jq:
//Time Picker:
$('.timepicker').pickatime(
default: 'now',
twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
donetext: 'OK',
autoclose: false,
vibrate: true // vibrate the device when dragging clock hand
);
function ope()
setTimeout(function()
$('label').click();
,1);
【讨论】：
谢谢，它适用于超时。关于（2），可以拦截input上的变化，比如$('#mytimepickerelement').on('change', function() /* do stuffs here */ );以上是关于如何以编程方式打开时间选择器的主要内容，如果未能解决你的问题，请参考以下文章