I am working on a project with 2 datepicker inputs. When the user selects a date from the first datepicker input I am trying to get the second datepicker input to show the month of the first datepicker input when the datepicker pops up.
For example a user select a date in input 1, lets say 3/13/2014. When the user clicks on input 2 the datepicker by default goes to the current month. I would like it so when the user clicks on input 2 the datepicker shows the month that was selected in input 1.
Does anyone know how I can accomplish this?
my JSFiddle DEMO
So far I have tried this:
//this does noting that I can tell
var defaultDate = $( "#date1" ).datepicker( "option", "defaultDate" );
$( "#date2" ).datepicker( "option", defaultDate );
//this actually takes the value of input 1 and inserts it into input 2
var date1 = $.datepicker.parseDate('mm/dd/yy', $('#date1').val());
$("#date2").datepicker( "setDate" , date1 );
In order to set the value of an option, you need three parameters:
.datepicker("option", "[name of option]", newValue);
You can change the defaultDate option of the second datepicker to the value of the first textbox:
$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );
This works since the default dateFormat is mm/dd/yyyy by default.
A working demo is here: Demo
However, the demo has a visual flaw; you can see the first datepicker flash to its default date once you select a date. In order to fix this visual flaw, you can also set the defaultDate of the first datepicker to its new value:
$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );
$("#date1").datepicker( "option", "defaultDate", $('#date1').val() );
An updated Demo is here: Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With