CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
ant
ant

Reputation: 22948

How to set current date with jquery ui datepicker

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

Upvotes: 3

Views: 41906

Answers (5)

Oskar
Oskar

Reputation: 2562

This works for me:

$(function() {
      $( "#datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true,
          firstDay: 1,
          showAnim: 'slideDown',
          dateFormat: 'yy-mm-dd',
        });
      $("#datepicker").datepicker("setDate", new Date());
     });

Upvotes: 1

VinnyG
VinnyG

Reputation: 6911

If you want to change an existing datepicker value you can do this :

$('#txtDate').datepicker().datepicker('setDate', 'today');

Upvotes: 4

Mike P.
Mike P.

Reputation: 31

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

Upvotes: 1

Sinan
Sinan

Reputation: 11563

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', '&#268;et', 'Pet', 'Sub']
        });

This should do what you need,

hope it helps, Sinan.

Upvotes: 7

Donny Kurnia
Donny Kurnia

Reputation: 5313

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.

Upvotes: 3

Related Questions