动态设置 Timepicker 的小时和分钟答案

【问题标题】：Setting the Hour and Minute of Timepicker dynamically动态设置 Timepicker 的小时和分钟
【发布时间】：2018-07-15 03:15:46
【问题描述】：

我正在将Timepickers 动态添加到我的网页。一旦我加载了所有的html，或者基本上是jquery.append()

<div class="input-group bootstrap-timepicker" style="padding-bottom:10px;">
   <input class="form-control timepicker"id="timepicker-default" type="text">
        <span class="input-group-addon">
           <i class="fa fa-clock-o"></i>
        </span>
    </input>
</div>

然后：

$('.timepicker').each(function(){
    $(this).timepicker();
});

将它们绑定到我网站中的 timepicker.js 文件。

我的问题是我希望能够在执行上述 for-each 函数时设置时间。我使用Parse.com 作为我的后端，因此日期为“Tue Sep 01 2015 13:15:00 GMT-0400（Eastern Daylight Time）”。我希望能够从我刚才提到的时间中提取时间，然后设置当前时间选择器的小时和分钟。我知道每个循环的逻辑，但我不知道如何设置单独的时间选择器。

我试图在jsfiddle 中为您运行一个示例，但无法正确加载它。

附：我知道 for-each 函数可以正常工作，因为我已经对其进行了测试。

【问题讨论】：

这里是您的小提琴的更新，js 已修复，但您需要将正确的 url 添加到 timepicker js 和 css，因为它没有找到它们 jsfiddle.net/xkv7z7h4/1 如果您这样做，我可能会查看您的进一步问题
更新小提琴：jsfiddle.net/xkv7z7h4/4
感谢 @EdenSource 将其更新为正确的 URL，我将更新问题。
阅读文档并jonthornton.github.io/jquery-timepicker 搜索设置时间示例部分

标签： javascript jquery html timepicker

【解决方案1】：

您必须根据获取日期字符串的方式创建一个Date 对象：

var d = new Date("Tue Sep 01 2015 13:15:00 GMT-0400 (Eastern Daylight Time)");
$(this).timepicker('setTime', d);

最后看起来像：

$('.timepicker').each(function(){
    $(this).timepicker();
    var d = new Date("Tue Sep 01 2015 13:15:00 GMT-0400 (Eastern Daylight Time)");
    $(this).timepicker('setTime', d);
});

见Fiddle

【讨论】：

当你发布这个答案时，我真的只是想出来了 XD，但我会将其标记为最佳。 Mosh Feu 部分正确，但文档仅说明“new Date()”而不是设置预定义的日期对象。我必须通读其他一些文档才能设置小时和分钟，否则他会立即正确。感谢 EdenSource！

【解决方案2】：

类似于 EdenSource 的答案，但不使用 .each()

而是在附加时设置单个输入的时间

$(document).ready(function () {
    $("#adder").click(function () {
       var html = '<div class="input-group bootstrap-timepicker" style="padding-bottom:10px;">' + '<span class="input-group-addon"><i class="fa fa-clock-o"></i></span></div>';

        $("#timepickerDiv").append(html);

        $('<input class="form-control timepicker" type="text">')
            .prependTo($('.bootstrap-timepicker:last'))
            .timepicker() .timepicker('setTime', new Date());


    });
});

Demo

【讨论】：