javascript - setDate in jQuery UI DatePicker - Stack Overflow

admin管理员组

文章数量:1425695

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

Example: / (edited from )


But with dateFormat : 'yy-mm-dd' it shows the date specified in setDate. Example: /

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

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/DBpJe/7981/ (edited from https://stackoverflow./a/2209104/5568549)


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

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

• javascript
• jquery
• jquery-ui
• datepicker
• jquery-ui-datepicker

Share Improve this question Follow edited May 23, 2017 at 12:31 CommunityBot 111 silver badge asked Mar 6, 2016 at 12:24 CuriousCurious 10911 silver badge1111 bronze badges 6

• $('.date-picker').datepicker('setDate', new Date()); – Visarut Sae-Pueng Commented Mar 6, 2016 at 13:05
• @WRDev what's the point of this? I want UI DatePicker to show the date specified in setDate. Not today's date. – Curious Commented Mar 6, 2016 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 Commented Mar 6, 2016 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 Commented Mar 7, 2016 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 Commented Mar 7, 2016 at 18:33

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

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

Working Example: http://jsfiddle/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);
});

Found a solution from jQuery UI DatePicker to show month year only
Working Example for dateFormat : 'yy-mm' : http://jsfiddle/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));

 }
}

本文标签： javascriptsetDate in jQuery UI DatePickerStack Overflow