Question

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

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

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

以下是初始化datepicker的代码：

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

用户第一次选择日期时，一切都很顺利。显示字段和隐藏字段都已正确设置。但是，用户第二次单击显示字段时，datepicker不会默认为所选月份。相反，它默认为今天的月份。我很确定这种情况正在发生，因为控件无法解析日期 - 当我将dateFormat设置为包含日期时（使用格式字符串"dd MM yy"），它的效果很好。但我不想将显示中的日期包含在用户中。

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

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

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（注释）放入小提琴中，所以你可以随意使用它。

Answer 2

以下链接可让您了解如何在不选择日期的情况下实施日期选择器以仅选择月份和年份。

jQuery UI DatePicker to show month year only

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

2 个答案: