jQuery DateTimePicker with Bootstrap

Hey everyone,

I ran into a bit of trouble today trying to get datetimepicker to work within bootstrap tabs. The dialog appeared however none of the buttons seemed to work. The fields also remained unpopulated.

It turned out the the issue was caused by the fact that I’d used jquery’s clone function to duplicate the tabs without reassigning field ids. This meant that there were multiple fields with the same id, confusing datetimepicker.

The solution I used was to dynamically assign all of the ids as each tab was displayed:

/* Bind tab change events: this has been done so that there is less js overhead */
function bind_tab_change_events(){

	//Bind change event
	$('.nav-tabs').bind('show', function(e){

		//Create vars
		var selected_file_id = $(e.target).data('file_id');

		initialise_time_pickers('#file_' + selected_file_id + ' .timepicker', selected_file_id);	

/* Initalise timepickers */
function initialise_time_pickers(selector, unique_id){

	//Loop through each bound element
	$.each($(selector), function(index, value){

		//Set id - datepicker won't work without unique ids
		$(value).attr('id', $(value).attr('id') + '_' + unique_id);

		//Initialise datepicker		

It looks like quite a few people hitting this post are looking for a bootstrap specific alternative, Sebastien has provided a link to one in the comments below:
Bootstrap DatetimePicker.

Another one that looks really good, a bit less clunky than any of the alternatives I’ve seen: http://tarruda.github.com/bootstrap-datetimepicker/

Plain timepicker: http://jdewit.github.com/bootstrap-timepicker/

Plain datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Let me know if you have any questions!



, , ,



5 responses to “jQuery DateTimePicker with Bootstrap”

  1.  Avatar

    This is a good alternative to that plugin http://www.eyecon.ro/bootstrap-datepicker/


    1. Chris Owens Avatar
      Chris Owens

      Hey Anon,

      Yeah, I did come across that plugin and it looks good, however it doesn’t seem to allow for datetime, only date. Unless I’m mistaken?



  2. Sebastien MALOT Avatar

    Here is a fork of this picker which integrates both date and time picking :



    1. Chris Owens Avatar
      Chris Owens

      Looks good Sebastien, thanks for sharing


  3. Ben Avatar

    The double ID traps got me and I finally figured it out thanks to your post. Wrote it up on stack overflow too. Finally had a question that seemed non-trivial 🙂



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

%d bloggers like this: