jQuery datepicker set selected date, on the fly

user_48625 0
Viewed 426665

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.

datepicker jquery-ui
14 Answers

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

user_96883940

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
user_971420

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

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

user_150659480

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)

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

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!

user_894430
Related