setDate in jQuery UI DatePicker

Question

When I use setDate with dateFormat : 'yy-mm', jQuery UI DatePicker shows today's date and not the date specified in setDate.

Example: http://jsfiddle.net/DBpJe/7981/ (edited from https://stackoverflow.com/a/2209104/5568549)

But with dateFormat : 'yy-mm-dd' it shows the date specified in setDate. Example: http://jsfiddle.net/DBpJe/7982/

How to make jQuery UI DatePicker shows the date specified in setDate with dateFormat : 'yy-mm' ?

@WRDev what's the point of this? I want UI DatePicker to show the date specified in setDate. Not today's date. — Curious, Mar 06 '16 at 13:19
@Curious, if you set format without day, which date will be selected in calendar? in this case text box showing the value but date-picker object set the default value from current date. Because datepicker modal is populated from that object. — Nazmul Hasan, Mar 06 '16 at 14:32
*The new date may be a Date object or a string in the current date format (e.g., "01/26/2009")* - So you can make a Date Object for the month and Year you want, and pass that. But you can't pass the string. Even in the example, you have `$('.date-picker').datepicker('setDate', new Date(2000, 6));` which would work as you need. — Twisty, Mar 07 '16 at 18:03
@Twisty The problem is with dateFormat: 'yy-mm', when I click the input, UI DataPicker should show the date specified in setDate e.g.(2000, 6), but it shows today's date instead. — Curious, Mar 07 '16 at 18:33
@Curious I see what you're observing now too. Let me do some pecking at it and see what we can do. Based on the docs, they should be exclusive. — Twisty, Mar 07 '16 at 18:36

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Found a solution from jQuery UI DatePicker to show month year only
Working Example for dateFormat : 'yy-mm' : http://jsfiddle.net/DBpJe/8057/

beforeShow : function(input, inst) {

 if ((datestr = $(this).val()).length > 0) {
  year = datestr.substring(0, 4);
  month = datestr.substring(datestr.length-2, datestr.length);

  $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
  $(this).datepicker('setDate', new Date(year, month-1, 1));

 }
}

score 0 · Answer 2 · answered Mar 07 '16 at 19:02

0

Found an article that addressed this exactly: http://www.jquerybyexample.net/2012/06/show-only-month-and-year-in-jquery-ui.html

Working Example: http://jsfiddle.net/Twisty/xwnoafxd/

Basically you just had to add defaultDate setting. One of those facepalm things.

$(function() {
  var myDate = new Date(2000, 6, 1);
  $('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm',
    defaultDate: myDate,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }
      if (isDonePressed()) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
        console.log('Done is pressed')
      }
    }
  }).datepicker("setDate", myDate);
});

answered Mar 07 '16 at 19:02

Twisty

30,304
2
26
45

is this how it works? when we specify a date in setDate, then defaulDate's date should be set to that date?. I mean is this what happens with dateFormat: 'yy-mm-dd' ? (defaultDate's date was automatically set to the same date specified in setDate?) what I think is, UI DatePicker shows defaultDate's date (which should be set to the same date specified in setDate).. am I right? – Curious Mar 08 '16 at 08:50
One is an option or preference, the other is a method. `defaultDate` option sets which day is highlighted on first opening. `setDate` method sets the date for the datepicker. – Twisty Mar 08 '16 at 16:10
but with dateFormat: 'yy-mm-dd', UI DatePicker shows the date specified in setDate even though defaultDate was NOT set. How?. doesn't my previous comment make any sense to how it works? – Curious Mar 09 '16 at 10:00
@Curious I do not understand your question. – Twisty Mar 09 '16 at 10:21
with dateFormat: 'yy-mm-dd' in this example http://jsfiddle.net/DBpJe/7982/ UI DatePicker shows the date specified in setDate even though defaultDate option is not set, but with dateFormat: 'yy-mm' we have to set defaultDate. Why? – Curious Mar 09 '16 at 10:46
@Curious I have not been able to determine why this is the case, just that it is. I also found another oddity, see: http://jsfiddle.net/Twisty/xcbs60no/ When you change the date on the 2nd field, and re-open it later, it's still using the default date. – Twisty Mar 09 '16 at 20:15

setDate in jQuery UI DatePicker

2 Answers2