我有一个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)并使按钮工作?
答案 0 :(得分:1)
首先我发现它有点奇怪。我模拟了点击时间戳,但没有任何反应。所以我在〜1ms内推迟了它并且它有效......我知道它是奇怪的解决方案,但它仍然是解决方案。
示例HTML:
//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);
}
JS / JQ:
-r