Setting default date on jQuery datepicker

Question

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

Stryner · Accepted Answer · 2014-11-13 18:37:03Z

1

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

answered Nov 13, 2014 at 18:37

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Evil Buck · Accepted Answer · 2014-11-13 19:19:50Z

0

I would use the events given by the actual date picker object. Then, onSelect just change the defaultDate.

I had to remove the datepicker auto-initialization (role=date) from the html for some reason though.

$(function(){
    $('#date1').datepicker({
        onSelect: function(date) {
            $('#date2').datepicker('option', 'defaultDate', date);
        }
    });
});

http://jsfiddle.net/evilbuck/L10mrqnb/9/

answered Nov 13, 2014 at 19:19

Evil Buck

1,0687 silver badges20 bronze badges

Comments

ivan.sim · Accepted Answer · 2014-11-13 19:25:58Z

0

First thing first, I had to remove the data-role="date" HTML attribute in your fiddle for this to work.

Then you can utilize the $.datepicker.onSelect to trigger a date change in your second datepicker whenever the first changes.

$("#date2").datepicker();
$("#date1").datepicker({
  onSelect: function(date){
    $("#date2").datepicker('setDate', date);
  }  
});

Refer live demo on jsfiddle.

answered Nov 13, 2014 at 19:25

ivan.sim

9,3668 gold badges51 silver badges64 bronze badges

Comments

vibs2006 · Accepted Answer · 2016-08-28 05:33:40Z

You can initialize the 'defaultDate' option in the datepicker function itself as shown below.

defaultDate supports multiple type

Date: A date object containing the default date.

Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.

String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

See Working code is 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

});

Collectives™ on Stack Overflow

Setting default date on jQuery datepicker

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related