Javascript 如何以编程方式打开时间选择器_Javascript_Html_Datepicker_Materialize_Timepicker

Javascript 如何以编程方式打开时间选择器

javascript html

Javascript 如何以编程方式打开时间选择器,javascript,html,datepicker,materialize,timepicker,Javascript,Html,Datepicker,Materialize,Timepicker,我有一个时间选择器元素。我需要将它链接到一个隐藏的输入字段，（1）通过单击按钮以编程方式触发时钟对话框的打开。另外，（2）我需要截取时间选择事件下面是一个示例代码 <html> <head>  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> &

我有一个时间选择器元素。我需要将它链接到一个隐藏的输入字段，（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>


设定时间
函数showtimepicker（）{
//（1）美元上的待办事项（“#mytimepickerelement”）
}
函数initializetimepicker（）{
$（'.timepicker'）.pickatime({
默认值：“0:00”，
从现在起：0，
十二小时：错，
donetext:'好'，
明文：“清除”，
canceltext:“取消”，
自动关闭：错误，
ampmclickable:false，
aftershow:function（）{}，
//（2）截获时间选择/模式关闭事件的其他事项
});
}
$（document.ready（initializeTimePicker））；

如何解（1）和（2）并使按钮工作？

关于第一次，我觉得有点奇怪。我模拟点击计时器，但什么也没发生。所以我把它延迟了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>

如果你有一个似乎能做到这一点的习惯，这会很有帮助。我搜索了ECSS时间选择器触发器，并按照建议进行了编辑。您喜欢的代码没有链接到按钮。它链接到一个可以设置为按钮样式的标签。您的意思是什么？谢谢，它可以在超时时工作。关于（2），可以截获

输入上的更改，例如$（'mytimepickerelement'）。on（'change'，function（）{/*dostuff here*/}）
//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);
}