jQuery datepicker set selected date, on the fly

Question

How can I change the selected date of jquery Date picker dynamically on the fly? I have say created a inline date picker. Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.

I tried the setDate method, but did not work, and there is not much documentation in the doc.

There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.

score 208 · Accepted Answer · edited Jun 27 '13 at 14:52

208

What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

edited Jun 27 '13 at 14:52

Adil Shaikh

44,509
17
89
111

answered Apr 15 '09 at 14:01

Ben Koehler

8,633
3
23
23

17

use defaultDate instead of setDate, if setDate does not work. – bingjie2680 Apr 11 '12 at 08:05
9

but for me it was not work either way.date was changed.but selected date not appear in the calender. it shows me only today highlighted . – Prageeth godage Oct 30 '13 at 03:56
This does not work for Ver 3.1+. Use $('#picker').data('daterangepicker').setStartDate('03/03/2021') – Manpreet Singh Dhillon Apr 20 '21 at 01:01

score 28 · Answer 2 · answered Sep 22 '10 at 15:34

28

Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.

answered Sep 22 '10 at 15:34

cfwall

431
4
8

score 12 · Answer 3 · answered May 30 '14 at 21:52

This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.

selectedDate is another variable that holds current selected date of the calendar control

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

score 8 · Answer 4 · answered Aug 18 '10 at 10:12

Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

score 8 · Answer 5 · edited Oct 10 '18 at 13:32

8

$('.date-pick').datePicker().val(new Date()).trigger('change')

finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!

edited Oct 10 '18 at 13:32

Mohammad

21,175
15
55
84

answered Aug 24 '18 at 22:09

Oleksii Semeniuk

188
1
7

7

It should be `.datepicker()` not `.datePicker()` – Arslan Tabassum Sep 04 '19 at 05:59

score 7 · Answer 6 · answered May 30 '09 at 21:18

7

For some reason, in some cases I couldn't make the setDate work.

A workaround I found is to simply update the value attribute of the given input. Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

answered May 30 '09 at 21:18

Guillaume Flandre

8,936
8
46
54

7

There is an off by one for months, so you need (date.getMonth()+1) – Adam Aug 02 '12 at 16:25
1

setDate doesn't work if set in the initial options, I had chain it afterwards with .datepicker('setDate', ... ) – martinedwards Jul 06 '15 at 14:54

score 5 · Answer 7 · answered Dec 18 '17 at 12:07

This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.

 $("#datepickerid").datepicker("setDate", "0");

If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

score 4 · Answer 8 · answered Jan 23 '21 at 14:10

4

please Find below one it helps me a lot to set data function

$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');

answered Jan 23 '21 at 14:10

Shyam

41
1

I tried every solution on this page (and many more), and nothing worked for me except this one! Thank you! .... NOTE: you can use the following to add a single day to a given date... ```$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', new Date(...).getDate() + 2);``` – greenhouse Sep 05 '22 at 03:15

score 3 · Answer 9 · answered Apr 16 '15 at 11:37

3

This works for me:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

answered Apr 16 '15 at 11:37

Gjermund Dahl

1,410
17
25

score 2 · Answer 10 · answered Jan 29 '19 at 09:25

In Html you can add your input field with a date picker like this

<input class="form-control date-picker fromDates" id="myDate" type="text">

and then in java script, initialize your datepicker and set your value to the date like this,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(In here fromdate attribute shows the previous dates of the current date)

score 2 · Answer 11 · answered Aug 26 '11 at 18:51

2

setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.

answered Aug 26 '11 at 18:51

Allen

21
1

score 0 · Answer 12 · answered Jul 31 '20 at 02:06

0

var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

answered Jul 31 '20 at 02:06

study4u

11
2

Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what the code does and how it answers the question, so that it is useful for other users also as well as the OP. – FluffyKitten Jul 31 '20 at 07:16

score -1 · Answer 13 · answered Mar 19 '15 at 12:32

-1

or you can simply have

$('.date-pick').datePicker().val(new Date()).trigger('change')

answered Mar 19 '15 at 12:32

Gayan

2,750
5
47
88

1

It should be `.datepicker()` not `.datePicker()`. – Florin Frătică Oct 18 '17 at 11:28

score -1 · Answer 14 · answered Apr 10 '09 at 13:34

-1

I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

good luck!

answered Apr 10 '09 at 13:34

tijs

797
7
24

jQuery datepicker set selected date, on the fly

14 Answers14

Linked