The request: Two interdependent calendar instances (DatePicker, in this case, bootstrap datepicker.js) in which the second instance should not allow any selection before the chosen date of the first one. Sound simpe:


$dateField.datepicker().on( 
	'changeDate', 
	function( datepickerObj ) {
		$dependendDateField.datepicker( 'setStartDate', datepickerObj.date );
});

So far so good, but it’s still possible to choose a wrong (invalid date). As soon as the user selects the second date before the first, the error occurs, fine – function extended as follows:


$dateField.datepicker().on( 
	'changeDate', 
	function( datepickerObj ) {
		$dependendDateField.datepicker( 'setStartDate', datepickerObj.date );
		// fix to handle the case that user selectes second date first.
		var d = new Date( $dependendDateField.datepicker( 'getDate' ) );
		// if date is valid, compare and rewrite if necessary
		if( !isNaN( d.getTime() ) && 
			( d.getTime() < datepickerObj.date.getTime() ) ) {
			$dependendDateField.datepicker( 'setDate', datepickerObj.date );
		}
});

Tested – nothing happened, tested again, no change, browser cache killed, tested code, this code was not working. But why? Because the dependent date field always yielded a invalid date. The safety test in the condition if (isNaN (d.getTime ()) & hellip; { worked, no new (more recent) date has been set.

In addition to the getDate bootstrap datepicker.js also has the method getDates, in opposite to getDate this method gave back the correct date, After puzzling a a while, I got the clue. If this script acts like a good datepicker it will simply not allow any valid date before the given minium date. The first line of the function has to moved to the end:


$dateField.datepicker().on( 
	'changeDate', 
	function( datepickerObj ) {
		var d = new Date( $dependendDateField.datepicker( 'getDate' ) );
		if( !isNaN( d.getTime() ) && 
			( d.getTime() < datepickerObj.date.getTime() ) ) {
			$dependendDateField.datepicker( 'setDate', datepickerObj.date );
		}
		$dependendDateField.datepicker( 'setStartDate', datepickerObj.date );		
});

Like this everything worked as expected, time to move on, greeting from the end of the world.