2

我有两个 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 使用的日期时，日期会记住选择的上个月？

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

4

2 回答 2

2

我从@Muthukumar 提到的“记住”所选月份（使用jQuery .data()）的SO 问题中得到了这个例子。JSFiddle在这里

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（已注释）放入小提琴中，因此您可以根据需要使用它。

于 2013-10-21T17:14:10.057 回答
-1

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

jQuery UI DatePicker 仅显示月份年份

于 2013-01-25T18:16:12.427 回答