How to set current date with jquery ui datepicker

Question

Hello everyone, I'm making an edit profile form, and I'm using jquery iu datepicker to select DOB, now when user edits its data he/she has already some date in the profile field, now if the user wanted to change the date the datepicker pops up, how can I make the date from profile field to be selected on the date picker,

or simply how can I make datepicker display specific date when opened here is my current script:

$('#member_dob').datepicker({
            changeMonth: true,
            changeYear: true,
            defaultDate: ,
            yearRange: '1970:1992',
            dateFormat: 'yy-mm-dd',
            monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            dayNamesMin: ['Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub']
        });

So for instance if my dob is 20.05.1987 , how could I set datepicker to display that date when opened, or just month and a year

Answer 1

You can put the default date into the input field:

<input name="date" id="member_dob" value="87-05-20" />

DatePicker will automatically selected that date when opened. Make sure the value match with dateFormat that you're using.

Answer 2

You can assign a date object to default date setting to datepicker widget, for instance as default date 1980, February 2nd:

var d = new Date(1980, 2, 2);
$('#member_dob').datepicker({
            changeMonth: true,
            changeYear: true,
            defaultDate: d,
            yearRange: '1970:1992',
            dateFormat: 'yy-mm-dd',
            monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            dayNamesMin: ['Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub']
        });

This should do what you need,

hope it helps, Sinan.

Answer 3

Im not sure if I get right what you try to accomplish here. First of all you need to pass the current DOB from the serverside to Javascript.

You can do that in two ways. One is to build a jsonObject, for example:

var jsonDate = {date : '1987-05-20'};

And then in your datepicker:

$('#member_dob').datepicker({
            changeMonth: true,
            changeYear: true,
            defaultDate: jsonDate.date,
            yearRange: '1970:1992',
            dateFormat: 'yy-mm-dd',
            monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            dayNamesMin: ['Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub']
});

The second is to set a value for the Input you trigger you datePicker on :

$('#member_dob').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1970:1992',
            dateFormat: 'yy-mm-dd',
            monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            dayNamesMin: ['Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub']
   });

<input type="text" id="member_dob" value="1987-05-20">