Reputation: 11904

jQuery datepicker set selected date, on the fly

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.

Upvotes: 135

Answers (15)

Rajenthiran T

Reputation: 73

If change your input type into datetime "type="datetime" from other types then it will works.

$('#dateSelect').datepicker("setDate", new Date(2023,6,10));

Upvotes: 0

Shyam

Reputation: 51

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

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

Upvotes: 5

study4u

Reputation: 11

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...

Upvotes: 0

chamzz.dot

Reputation: 775

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)

Upvotes: 2

Oleksii Semeniuk

Reputation: 308

$('.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!

Upvotes: 10

Suresh Ponnukalai

Reputation: 13998

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

Upvotes: 5

Gjermund B. Dahl

Reputation: 1415

This works for me:

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

Upvotes: 3

Gayan

Reputation: 2871

or you can simply have

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

Upvotes: -1

Vlad Bezden

Reputation: 89755

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

Upvotes: 12

Ben Koehler

Reputation: 8681

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

Upvotes: 213

Allen

Reputation: 21

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

Upvotes: 2

cfwall

Reputation: 431

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.

Upvotes: 28

Michael

Reputation: 81

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')***
    });

Upvotes: 8

Guillaume Flandre

Reputation: 8980

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

Upvotes: 7

tijs

Reputation: 797

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!

Upvotes: -1

jQuery datepicker set selected date, on the fly

Answers (15)

Related Questions