javascript - Setting the Hour and Minute of Timepicker dynamically - Stack Overflow

admin管理员组

文章数量:1355679

I am dynamically adding 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>

and then:

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

to bind them to the timepicker.js file in my website.

My problem is that I want to be able to set the time while doing the above for-each function. I am using Parse as my backend so the date es in as "Tue Sep 01 2015 13:15:00 GMT-0400 (Eastern Daylight Time)". I want to be able to extract the time from the one I just mentioned then set the hour and minute of the timepicker its currently on. I know the logic of cycling through each one, but I don't know how to set the individual timepicker.

I tried to get an example running for you in jsfiddle but couldn't get it to load it right.

P.S. I know the for-each function is working because I have tested it.

I am dynamically adding 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>

and then:

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

to bind them to the timepicker.js file in my website.

My problem is that I want to be able to set the time while doing the above for-each function. I am using Parse. as my backend so the date es in as "Tue Sep 01 2015 13:15:00 GMT-0400 (Eastern Daylight Time)". I want to be able to extract the time from the one I just mentioned then set the hour and minute of the timepicker its currently on. I know the logic of cycling through each one, but I don't know how to set the individual timepicker.

I tried to get an example running for you in jsfiddle but couldn't get it to load it right.

P.S. I know the for-each function is working because I have tested it.

• javascript
• jquery
• html
• timepicker

Share Improve this question Follow edited Jul 14, 2018 at 19:15 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Sep 3, 2015 at 14:45 booky99booky99 1,45655 gold badges2929 silver badges4747 bronze badges 4

• here is an update to your fiddle the js is fixed but you need to add the correct urls to the timepicker js and css as its not finding them jsfiddle/xkv7z7h4/1 If you do that I may look into your issue further – andrew Commented Sep 3, 2015 at 14:59
• 1 updated Fiddle: jsfiddle/xkv7z7h4/4 – EdenSource Commented Sep 3, 2015 at 15:02
• thanks @EdenSource for updating it to the correct URLs, I will update the question. – booky99 Commented Sep 3, 2015 at 15:03
• 1 Read the docs and jonthornton.github.io/jquery-timepicker search the section Set Time Example – Mosh Feu Commented Sep 3, 2015 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You have to create a Date object depending on the way you get your date string:

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

And it finally looks like:

$('.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);
});  

See the Fiddle

Similar to EdenSource's answer but doesn't use .each()

Rather it sets the time on the individual input when appending it

$(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

本文标签： javascriptSetting the Hour and Minute of Timepicker dynamicallyStack Overflow