Setting the default date for jQuery datepicker
I am working on a project with two datepicker inputs. When the user selects a date from the first input of the datepicker, I am trying to get the second input of the datepicker to show the month of the input of the first input of the date when the datepicker pops up.
For example, the user selects a date in input 1, say 3/13/2014. When the user clicks on input 2, the datepicker defaults to the current month. This is how I would like that when the user clicks on input 2, the datepicker shows the month that was selected on input 1.
Does anyone know how I can do this?
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 );
source to share
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 parameter to the value of the first textbox:
$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );
This works as the default dateFormat is mm / dd / yyyy.
However, the demo has a visual flaw; you can see how the first datepixel flash matches the default date as soon as you choose the date. To fix this visual flaw, you can also set the default for the first datepicker to the new value:
$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );
$("#date1").datepicker( "option", "defaultDate", $('#date1').val() );
source to share
I would use events set by the actual date picker object. Then, select on to just change the default.
For some reason I had to remove the auto-initialization datepicker ( role=date
) from the html.
$(function(){
$('#date1').datepicker({
onSelect: function(date) {
$('#date2').datepicker('option', 'defaultDate', date);
}
});
});
source to share
First of all, I had to remove the data-role="date"
HTML attribute in the fiddle for this to work.
You can then use $.datepicker.onSelect
to initiate a date change in your second datepicker whenever the first change occurs.
$("#date2").datepicker();
$("#date1").datepicker({
onSelect: function(date){
$("#date2").datepicker('setDate', date);
}
});
Submit a demo on jsfiddle .
source to share
You can initialize the 'defaultDate parameter in the datepicker function itself as shown below.
defaultDate supports multiple types
Date: A date object containing the default date.
Number: A few days from today. For example, 2 represents two days from today and -1 represents yesterday.
String: A string in the format specified by the dateFormat parameter, or a relative date. Relative dates must contain pairs of values and periods; valid periods "y" for many years, "m" for several months, "w" for weeks, and "d" for several days. For example, "+ 1m + 7d" represents one month and seven days from today.
See Working Code: JsFiddle https://jsfiddle.net/vibs2006/yg51nzj8/3/
$("#date1").datepicker();
$("#date2").datepicker({
defaultDate: "-20y"
});
var dateObject = new Date(2011, 0, 1, 0, 0, 0); //Please note that month starts from zero! (year, month, day, hour, minute, seconds)
$("#date3").datepicker({
defaultDate: dateObject
});
source to share