How to set the default date to two days from current date using date picker?

Question

I went through many examples but Im not able to set the value of my date picker. The textbox value is shown as 01/01/2016 and the calendar opens to that date as well. Im trying to set the default date to two days from now in the text box as well as in the calendar that shows up on click. I tried the following:

1.

$(".date-picker").datepicker().datepicker("setDate", new Date());

2.

$(".date-picker").datepicker().datepicker('setDate', '+2');

My HTML is:

<input type="text" class="input date-picker">

I agree this question has been repeated lots of times but I have tried most of the examples but still Im not able to make it work. Please advice.

possible duplicate of [jQuery UI Datepicker - setDate not working](http://stackoverflow.com/questions/11962747/jquery-ui-datepicker-setdate-not-working) — abaracedo, Feb 23 '15 at 18:32
Take a look at http://stackoverflow.com/questions/3818193/how-to-add-number-of-days-to-todays-date and put the someDate-variable or the someFormattedDate variable where new Date() is right now — bestprogrammerintheworld, Feb 23 '15 at 18:35
possible duplicate of [Jquery UI datepicker default date](http://stackoverflow.com/questions/3829033/jquery-ui-datepicker-default-date) — talemyn, Feb 23 '15 at 18:35

score 4 · Accepted Answer · answered Feb 23 '15 at 18:39

4

The best way to do this is to extend the javascript date function using prototype

Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};

Then simply call as follows:-

$(function() {
var currentDate = new Date();

var myDate = currentDate.addDays(2);

$(".date-picker").datepicker(); //initialise
$(".date-picker").datepicker('setDate', myDate); //set date

});

DONT FORGET you have to INITIALISE the datepicker - then set the date

JS Fiddle here

answered Feb 23 '15 at 18:39

GrahamTheDev

22,724
2
32
64

The JS Fiddle shows the exact way I want it, but somehow when I use it my webpage, the calendar still opens at 01/01/2016 and the default date in the text box is also the same date – pal Feb 23 '15 at 18:50
Change it from a class to an ID then try it - my guess is you have some stray code setting a date somewhere else. At least this way we can rule that out – GrahamTheDev Feb 23 '15 at 18:53
I changed the HTML to this: `` I still have the same problem. – pal Feb 23 '15 at 19:02
you got it sorted then? – GrahamTheDev Feb 23 '15 at 19:18
Yeah. It had something to do with my HTML I guess. When I used id it didnt even pull up the calendar. I changed my HTML to `` which worked. – pal Feb 23 '15 at 19:21
1

if you change it to an ID don't forget you have to update the javascript selector to #date-picker from .date-picker. Glad you got it working. – GrahamTheDev Feb 23 '15 at 19:24

void · Answer 2 · 2015-02-23T18:40:49.320

0

Initialize a datepicker with the defaultDate option specified.

$(document).ready(function () {
    $(".date-picker").datepicker({
        defaultDate: +2,
        dateFormat: "mm/dd/yy"
    });
});

edited Feb 23 '15 at 18:40

answered Feb 23 '15 at 18:33

void

36,090
8
62
107

I have my code like this: `$(document).ready(function(){ $( ".date-picker" ).datepicker({ defaultDate: +2 }); }); $(".date-picker").datepicker({dateFormat: "mm/dd/yy", defaultDate: "+2d"}).datepicker("setDate", new Date());` It is not working. – pal Feb 23 '15 at 18:38

score 0 · Answer 3 · answered Feb 23 '15 at 18:42

http://jsfiddle.net/8ejbw8d5/

$( ".date-picker" ).datepicker({
  defaultDate: +2
});
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );

// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +2 );

Read more here: http://api.jqueryui.com/datepicker/#option-defaultDate

How to set the default date to two days from current date using date picker?

3 Answers3