jquery - 当 dateFormat 不包含日期时，日期选择器会丢失日期值

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")时，效果很好。但我不想在向用户显示的内容中包含这一天。

所以我的问题是，如何拦截日期选择器第二次使用的日期，该日期会记住所选的上个月？

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

Answer 1

我从 SO question 获取了示例@Muthukumar 提到“记住”所选月份(使用 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(已注释)放入 fiddle 中，这样你就可以根据需要使用它。