Question

我正在尝试实现Monthpicker，但整个日历正在显示。我只想要月份和年份作为输入，而不是整个日历。此外，从显示的日历中选择日期后，文本框中的输入显示为 Undefined-NaN 。现有代码如下：

$('#newBatchDate').datepicker({
  showOtherMonths: true,
  showOn: "button",
  buttonImage: "images/calender.png",
  buttonImageOnly: true,
  buttonText: "Date"
});

如何修改此代码以实现monthpicker？

Answer 1

要获得月份选择，您必须修改datepicker对象的_generateHTML函数。

$.extend($.datepicker, {
  _generateDaysHTML: $.datepicker._generateHTML,
  _generateMonthsHTML: function(inst) {
    /*  
      Generate HTML for monthpicking
      -> draw each month of the current year
      -> link to first day of each month
    */
  },
  _generateHTML: function(inst) {
    if ( inst.settings.monthPicker ) {
      return this._generateMonthsHTML(inst);
    } else {
      return this._generateDaysHTML(inst);
    }
  }
});

要设置一些默认设置，请创建一个monthpicker fn：

$.fn.monthpicker = function(options) {
  return this.each(function() {
    var $this = $(this);
    var altField = $this.next();
    altField.on('focus', function() { $this.datepicker('show') });
    var settings = {
      monthPicker: true,
      stepMonths: 12,
      changeMonth: false,
      altField: altField,
      altFormat: 'M yy' }
    $.extend(settings, options);
    $this.datepicker(settings);
  });
}

此fn使用隐藏字段作为主要日期字段（值始终为所选月份的第1个），使用文本字段（通过altField）显示所选月份。

<input class="js-monthpicker" type="hidden"><input type="text">

初始化它......

$('.js-monthpicker').monthpicker();

您可能需要查看来源here。

Jquery monthpicker给出输出为NaN-undefined

1 个答案: