Fish
Fish

Reputation: 225

How to move the position of month and year dropdowns to a different month

I have the following options for jQuery UI DatePicker which displays previous/current/next months:

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

enter image description here

How would I move the month and date drop downs from the previous to the current month?

Upvotes: 0

Views: 279

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Short answer: No!

Looking at the source code for jquery-ui/datepicker.js at Line #1841, it seems that you will be only able to enable the Select Month and Year dropdowns for the first ever calendar and not anywhere else. You might need to change the code here to make it work for you, showing it in the middle, if you need.

_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;
},

You would need to find out what the rest of html variable looks like and you need to edit it. But editing the plugin is not a good idea as it might get updated at a later time and you might need to keep up with it.

Upvotes: 2

Related Questions