Question

对于jQuery UI DatePicker，我具有以下选项，该选项可显示上一个/当前/下个月：

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

如何将月份和日期下拉列表从上个月移动到当前月份？

Answer 1

简短答案：否！

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

_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变量的其余部分，然后对其进行编辑。但是，编辑插件不是一个好主意，因为它可能会在以后更新，您可能需要跟上它。

如何将月份和年份下拉菜单的位置移动到另一个月份

1 个答案: