Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting default date on jQuery datepicker

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 );
like image 633
Austin Adair Avatar asked Feb 04 '26 23:02

Austin Adair


1 Answers

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

like image 89
Stryner Avatar answered Feb 06 '26 13:02

Stryner