如何将月份和年份下拉菜单的位置移动到不同的月份答案

【问题标题】：How to move the position of month and year dropdowns to a different month如何将月份和年份下拉菜单的位置移动到不同的月份
【发布时间】：2018-10-19 15:31:18
【问题描述】：

对于显示前/当前/下个月的 jQuery UI DatePicker，我有以下选项：

datepicker_options = {
    dateFormat: 'mm/dd/yy',
    showOtherMonths: true,
    changeMonth: true,
    numberOfMonths: 3,
    showCurrentAtPos: 1,
    changeYear: true,
}

如何将月份和日期下拉菜单从上个月移到当前月份？

【问题讨论】：

您的意思是，您想更改中间日历的下拉启用而不是左侧日历？
是的，对于示例图像，我希望在 10 月份显示下拉菜单。
啊，Fish，这不会以当前创建日期选择器插件的方式发生。您可能需要为此重做inst.yearshtml。 :)看我的回答。
哦，非常感谢您的帮助。
对不起，伙计。我浏览了整个源代码，但一无所获。也许我可以尝试将选择从第一个切换到另一个，但不确定它将如何影响日期选择器本身......可能会搞砸。如果你愿意，我可以试试。但是你为什么不使用像Date Range Picker 这样提供更多选择的东西呢？提示：showDropdowns.

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

简短回答：不！

在Line #1841 查看jquery-ui/datepicker.js 的源代码，您似乎只能为第一个日历启用“选择月份”和“年份”下拉菜单，而不能在其他任何地方启用。如果需要，您可能需要更改此处的代码以使其适合您，并在中间显示。

_generateMonthYearHeader: function( inst, drawMonth, drawYear, minDate, maxDate,
                                     secondary, monthNames, monthNamesShort ) {

  var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
      changeMonth = this._get( inst, "changeMonth" ),
      changeYear = this._get( inst, "changeYear" ),
      showMonthAfterYear = this._get( inst, "showMonthAfterYear" ),
      html = "<div class='ui-datepicker-title'>",
      monthHtml = "";

  // Month selection
  if ( secondary || !changeMonth ) {
    monthHtml += "<span class='ui-datepicker-month'>" + monthNames[ drawMonth ] + "</span>";
  } else {
    inMinYear = ( minDate && minDate.getFullYear() === drawYear );
    inMaxYear = ( maxDate && maxDate.getFullYear() === drawYear );
    monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>";
    for ( month = 0; month < 12; month++ ) {
      if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) {
        monthHtml += "<option value='" + month + "'" +
          ( month === drawMonth ? " selected='selected'" : "" ) +
          ">" + monthNamesShort[ month ] + "</option>";
      }
    }
    monthHtml += "</select>";
  }

  if ( !showMonthAfterYear ) {
    html += monthHtml + ( secondary || !( changeMonth && changeYear ) ? "&#xa0;" : "" );
  }

  // Year selection
  if ( !inst.yearshtml ) {
    inst.yearshtml = "";
    if ( secondary || !changeYear ) {
      html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
    } else {

      // determine range of years to display
      years = this._get( inst, "yearRange" ).split( ":" );
      thisYear = new Date().getFullYear();
      determineYear = function( value ) {
        var year = ( value.match( /c[+\-].*/ ) ? drawYear + parseInt( value.substring( 1 ), 10 ) :
                    ( value.match( /[+\-].*/ ) ? thisYear + parseInt( value, 10 ) :
                     parseInt( value, 10 ) ) );
        return ( isNaN( year ) ? thisYear : year );
      };
      year = determineYear( years[ 0 ] );
      endYear = Math.max( year, determineYear( years[ 1 ] || "" ) );
      year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year );
      endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear );
      inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
      for ( ; year <= endYear; year++ ) {
        inst.yearshtml += "<option value='" + year + "'" +
          ( year === drawYear ? " selected='selected'" : "" ) +
          ">" + year + "</option>";
      }
      inst.yearshtml += "</select>";

      html += inst.yearshtml;
      inst.yearshtml = null;
    }
  }

  html += this._get( inst, "yearSuffix" );
  if ( showMonthAfterYear ) {
    html += ( secondary || !( changeMonth && changeYear ) ? "&#xa0;" : "" ) + monthHtml;
  }
  html += "</div>"; // Close datepicker_header
  return html;
},

您需要找出html 变量的其余部分是什么样的，并且您需要对其进行编辑。但是编辑插件并不是一个好主意，因为它可能会在以后更新，您可能需要跟上它。

【讨论】：