当 dateFormat 不包括日期时，Datepicker 会丢失日期值

Question

我有两个 HTML 输入元素。第一个是显示所选月份和年份的只读文本输入，第二个是保存所选日期的隐藏输入：

<input type="text" id="MonthDisplay" readonly="readonly" />
<input type="hidden" name="Month" />

目标是在隐藏字段中存储选择的实际日期，但在可见的 MonthDisplay 字段中仅显示月份和年份。

这里是初始化日期选择器的代码：

$('#MonthDisplay')
    .datepicker({
        'dateFormat'  : 'MM yy',
        'changeMonth' : true,
        'changeYear'  : true,
        'yearRange'   : '2010:'+new Date().getFullYear(),
        'altField'    : "input[type=hidden][name=Month]",
        'altFormat'   : "m/d/yy"
    });

用户第一次选择日期时，一切正常。显示字段和隐藏字段都设置正确。但是用户第二次单击显示字段时，日期选择器不会默认为所选月份。相反，它默认为今天的月份。我很确定这是因为控件无法解析日期——当我将 dateFormat 设置为包含日期时（使用格式字符串"dd MM yy"），它工作得很好。但我不想在向用户显示的日期中包含这一天。

所以我的问题是，如何在第二次截取 datepicker 使用的日期时，该日期会记住上一个选择的月份？

或者，作为一个替代问题，有没有办法让日期选择器或其他控件只选择月份和年份而不选择日期？

Answer 1

我从@Muthukumar 提到的SO question 中得到了“记住”所选月份的示例（使用jQuery .data()）。 JSFiddle here

HTML：

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

JS：

$(function() {
  $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    beforeShow: function(elem, inst) {
      var $this = $(this);
      // set the datepicker date
      $this.datepicker('option', 'defaultDate', $this.data('date'));
      // set the input date
      $this.datepicker('setDate', $this.data('date'));
    },
    onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      var date = new Date(year, month, 2);
      $(this).datepicker('setDate', date)
             .data('date', date); // remember the selected date
    }
  });
});

但是，@CharlieKilian，我无法让您的代码使用只读输入。我将您的代码和 html（已注释）放入小提琴中，因此您可以根据需要使用它。

Answer 2

以下链接应该让您了解如何实施日期选择器以仅选择月份和年份而不选择日期。

jQuery UI DatePicker to show month year only