diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html index 92b7e24fb60..e305e879a6a 100644 --- a/demos/calendar/dropdown-month-year.html +++ b/demos/calendar/dropdown-month-year.html @@ -8,10 +8,67 @@ @@ -19,7 +76,7 @@
-

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean changeMonth and changeYear options.

+

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.

diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js index df919cb998d..d9ed4dee30d 100644 --- a/ui/widgets/calendar.js +++ b/ui/widgets/calendar.js @@ -89,25 +89,25 @@ return $.widget( "ui.calendar", { _create: function() { this.id = this.element.uniqueId().attr( "id" ); - this.gridId = this.id; + this._setGridId( this.id ); this.labels = this.options.labels; this.buttonClickContext = this.element[ 0 ]; this._setLocale( this.options.locale, this.options.dateFormat ); - this.date = new $.ui.date( this.options.value, this._calendarDateOptions ); - this.viewDate = this.date.clone(); - this.viewDate.eachDay = this.options.eachDay; + this._setDate( new $.ui.date( this.options.value, this._calendarDateOptions ) ); + this._setViewDate( this._getDate().clone() ); + this._getViewDate().eachDay = this.options.eachDay; this._on( this.element, { "click .ui-calendar-prev": function( event ) { event.preventDefault(); - this.date.adjust( "M", -this.options.numberOfMonths ); + this._getDate().adjust( "M", -this.options.numberOfMonths ); this._updateView(); }, "click .ui-calendar-next": function( event ) { event.preventDefault(); - this.date.adjust( "M", this.options.numberOfMonths ); + this._getDate().adjust( "M", this.options.numberOfMonths ); this._updateView(); }, "mousedown .ui-calendar-calendar button": "_select", @@ -155,28 +155,28 @@ return $.widget( "ui.calendar", { ); return; case $.ui.keyCode.PAGE_UP: - this.date.adjust( pageAltKey ? "Y" : "M", -1 ); + this._getDate().adjust( pageAltKey ? "Y" : "M", -1 ); break; case $.ui.keyCode.PAGE_DOWN: - this.date.adjust( pageAltKey ? "Y" : "M", 1 ); + this._getDate().adjust( pageAltKey ? "Y" : "M", 1 ); break; case $.ui.keyCode.END: - this.date.setDay( this.date.daysInMonth() ); + this._getDate().setDay( this._getDate().daysInMonth() ); break; case $.ui.keyCode.HOME: - this.date.setDay( 1 ); + this._getDate().setDay( 1 ); break; case $.ui.keyCode.LEFT: - this.date.adjust( "D", -1 ); + this._getDate().adjust( "D", -1 ); break; case $.ui.keyCode.UP: - this.date.adjust( "D", -7 ); + this._getDate().adjust( "D", -7 ); break; case $.ui.keyCode.RIGHT: - this.date.adjust( "D", 1 ); + this._getDate().adjust( "D", 1 ); break; case $.ui.keyCode.DOWN: - this.date.adjust( "D", 7 ); + this._getDate().adjust( "D", 7 ); break; default: return; @@ -191,25 +191,27 @@ return $.widget( "ui.calendar", { }, _updateView: function() { - if ( this.options.numberOfMonths > 1 && this.date.year() === this.viewDate.year() ) { - this.viewDate.adjust( "M", this.options.numberOfMonths * - ( this.date.month() > this.viewDate.month() ? 1 : -1 ) + if ( this.options.numberOfMonths > 1 && + this._getDate().year() === this._getViewDate().year() + ) { + this._getViewDate().adjust( "M", this.options.numberOfMonths * + ( this._getDate().month() > this._getViewDate().month() ? 1 : -1 ) ); } else { - this.viewDate.setTimestamp( this.date.timestamp() ); + this._getViewDate().setTimestamp( this._getDate().timestamp() ); } this.refresh(); }, _needsRefresh: function() { - if ( this.date.month() !== this.viewDate.month() || - this.date.year() !== this.viewDate.year() + if ( this._getDate().month() !== this._getViewDate().month() || + this._getDate().year() !== this._getViewDate().year() ) { // Check if the needed day is already present in our grid due // to eachDay option changes (eg. other-months demo) - return !this._getDateElement( this._getDayId( this.date ) ).length; + return !this._getDateElement( this._getDayId( this._getDate() ) ).length; } return false; @@ -220,7 +222,7 @@ return $.widget( "ui.calendar", { }, _updateDayElement: function( state ) { - var id = this._getDayId( this.date ), + var id = this._getDayId( this._getDate() ), button = this._getDateElement( id ).children( "button" ); this.grid.attr( "aria-activedescendant", id ); @@ -285,7 +287,7 @@ return $.widget( "ui.calendar", { this._addClass( header, "ui-calendar-header-first ui-calendar-header-last" ); this.element - .attr( "aria-labelledby", this.gridId + "-title" ) + .attr( "aria-labelledby", this._getGridId() + "-title" ) .append( header ) .append( this._buildGrid() ); }, @@ -293,18 +295,18 @@ return $.widget( "ui.calendar", { _buildMultiplePicker: function() { var element, header, rowBreak = $( "
" ), - currentDate = this.viewDate, - months = this.viewDate.months( this.options.numberOfMonths - 1 ), + currentDate = this._getViewDate(), + months = this._getViewDate().months( this.options.numberOfMonths - 1 ), labelledBy = [], i = 0; for ( ; i < months.length; i++ ) { // TODO: Shouldn't we pass date as a parameter to build* fns - // instead of setting this.date? - this.viewDate = months[ i ]; - this.gridId = this.id + "-" + i; - labelledBy.push( this.gridId + "-title" ); + // instead of setting this.viewDate? + this._setViewDate( months[ i ] ); + this._setGridId( this.id + "-" + i ); + labelledBy.push( this._getGridId() + "-title" ); element = $( "
" ); this._addClass( element, "ui-calendar-group" ); @@ -326,7 +328,7 @@ return $.widget( "ui.calendar", { .attr( "aria-labelledby", labelledBy.join( " " ) ) .append( rowBreak ); - this.viewDate = currentDate; + this._setViewDate( currentDate ); }, _buildHeaderButtons: function() { @@ -351,7 +353,7 @@ return $.widget( "ui.calendar", { _buildHeader: function() { var header = $( "
" ), - title = $( "
", { role: "header", id: this.gridId + "-title" } ), + title = $( "
", { role: "header", id: this._getGridId() + "-title" } ), notice = $( "" ).text( ", " + this._getTranslation( "datePickerRole" ) ); this._addClass( header, "ui-calendar-header", "ui-widget-header ui-helper-clearfix" ) @@ -365,9 +367,9 @@ return $.widget( "ui.calendar", { }, _buildTitle: function() { - var title = $( "
", { role: "alert", id: this.gridId + "-month-label" } ), - month = $( "" ).text( this.viewDate.monthName() ), - year = $( "" ).text( this.viewDate.year() ); + var title = $( "
", { role: "alert", id: this._getGridId() + "-month-label" } ), + month = this._buildTitleMonth(), + year = this._buildTitleYear(); this._addClass( title, "ui-calendar-title" ) ._addClass( month, "ui-calendar-month" ) @@ -379,13 +381,21 @@ return $.widget( "ui.calendar", { .append( year ); }, + _buildTitleMonth: function() { + return $( "" ).text( this._getViewDate().monthName() ); + }, + + _buildTitleYear: function() { + return $( "" ).text( this._getViewDate().year() ); + }, + _buildGrid: function() { var table = $( "", { role: "grid", tabindex: 0, "aria-readonly": true, - "aria-labelledby": this.gridId + "-month-label", - "aria-activedescendant": this._getDayId( this.date ) + "aria-labelledby": this._getGridId() + "-month-label", + "aria-activedescendant": this._getDayId( this._getDate() ) } ); this._addClass( table, "ui-calendar-calendar" ); @@ -400,8 +410,8 @@ return $.widget( "ui.calendar", { week = $( "" ), i = 0, - weekDayLength = this.viewDate.weekdays().length, - weekdays = this.viewDate.weekdays(); + weekDayLength = this._getViewDate().weekdays().length, + weekdays = this._getViewDate().weekdays(); if ( this.options.showWeek ) { this._addClass( week, "ui-calendar-week-col" ); @@ -423,7 +433,7 @@ return $.widget( "ui.calendar", { }, _buildGridBody: function() { - var days = this.viewDate.days(), + var days = this._getViewDate().days(), i = 0, rows = ""; @@ -456,7 +466,7 @@ return $.widget( "ui.calendar", { "role='gridcell'", "aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'", "aria-label='" + dayName + ", " + this._format( dateObject ) + "'", - "aria-describedby='" + this.gridId + "-month-label'" + "aria-describedby='" + this._getGridId() + "-month-label'" ], selectable = ( day.selectable && this._isValid( dateObject ) ); @@ -484,7 +494,7 @@ return $.widget( "ui.calendar", { var attributes, content, classes = [ "ui-state-default" ]; - if ( day === this.date && selectable ) { + if ( day === this._getDate() && selectable ) { classes.push( "ui-state-focus" ); } if ( this._isCurrent( day ) ) { @@ -608,7 +618,7 @@ return $.widget( "ui.calendar", { }, _headerButtonsState: function() { - var months = this.viewDate.months( this.options.numberOfMonths - 1 ), + var months = this._getViewDate().months( this.options.numberOfMonths - 1 ), i = 0; for ( ; i < months.length; i++ ) { @@ -640,9 +650,9 @@ return $.widget( "ui.calendar", { for ( ; i < this.options.numberOfMonths; i++ ) { this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() ); this.element.find( ".ui-calendar-calendar" ).eq( i ).replaceWith( this._buildGrid() ); - this.viewDate.adjust( "M", 1 ); + this._getViewDate().adjust( "M", 1 ); } - this.viewDate.adjust( "M", -this.options.numberOfMonths ); + this._getViewDate().adjust( "M", -this.options.numberOfMonths ); }, _getTranslation: function( key ) { @@ -656,6 +666,30 @@ return $.widget( "ui.calendar", { } ); }, + _getGridId: function() { + return this.gridId; + }, + + _setGridId: function( id ) { + this.gridId = id; + }, + + _getDate: function() { + return this.date; + }, + + _setDate: function( date ) { + this.date = date; + }, + + _getViewDate: function() { + return this.viewDate; + }, + + _setViewDate: function( date ) { + this.viewDate = date; + }, + value: function( value ) { if ( arguments.length ) { this.valueAsDate( this._parse( value ) ); @@ -722,11 +756,11 @@ return $.widget( "ui.calendar", { if ( dateAttributes ) { this._setLocale( this.options.locale, this.options.dateFormat ); - this.date.setAttributes( this._calendarDateOptions ); - this.viewDate.setAttributes( this._calendarDateOptions ); + this._getDate().setAttributes( this._calendarDateOptions ); + this._getViewDate().setAttributes( this._calendarDateOptions ); } if ( create || refresh ) { - this.viewDate.setTimestamp( this.date.timestamp() ); + this._getViewDate().setTimestamp( this._getDate().timestamp() ); } if ( create ) { this.element.empty(); @@ -742,7 +776,7 @@ return $.widget( "ui.calendar", { _setOption: function( key, value ) { if ( key === "value" ) { if ( this._isValid( value ) ) { - this.date.setTimestamp( value.getTime() ); + this._getDate().setTimestamp( value.getTime() ); } else { value = null; } @@ -770,7 +804,7 @@ return $.widget( "ui.calendar", { } if ( key === "eachDay" ) { - this.viewDate.eachDay = value; + this._getViewDate().eachDay = value; } } } );
" ), row = $( "