Как переместить позицию выпадающего списка месяца и года в другой месяц

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 на Строка # 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и вам нужно отредактировать его.Но редактирование плагина не является хорошей идеей, так как оно может быть обновлено позже, и вам, возможно, придется идти в ногу с ним.