动态设置Timepicker的小时和分钟

Question

我正在动态添加Timepickers to my webpage. Once I have loaded all of the html, or basically did 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 中为您获取示例运行，但无法正确加载它。

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

Answer 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

Answer 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

动态设置Timepicker的小时和分钟

Setting the Hour and Minute of Timepicker dynamically

html

javascript

jquery

timepicker