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');

		//Initialisations
		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		
		$(value).datetimepicker();
	});
}

UPDATE:
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!