library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Calendar: Introduce getter / setter for date and viewDate

Browse Source
This commit is contained in:
Felix Nagel 2017-04-12 23:12:44 +02:00
parent 5ee64dd0e0
commit 9bb209cc94
2 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demos/calendar/dropdown-month-year.html
View File

@ -11,22 +11,26 @@
$.widget( "ui.calendar", $.ui.calendar, { $.widget( "ui.calendar", $.ui.calendar, {
_buildTitleMonth: function() { _buildTitleMonth: function() {
var select = $( "<select>" ), var select = $( "<select>" ),
date = this.date.clone(), date = this._getDate().clone(),
i = 0, i = 0,
option; option;
this._on( select, { this._on( select, {
change: function() { change: function() {
this._off( select ); this._off( select );
this.date.setFullDate( this.date.year(), select.val(), this.date.day() ); this._getDate().setFullDate(
this._getDate().year(),
select.val(),
this._getDate().day()
);
this._updateView(); this._updateView();
} }
} ); } );
for ( ; i < 12; i++ ) { for ( ; i < 12; i++ ) {
date.setFullDate( select.val(), i, this.date.day() ); date.setFullDate( select.val(), i, this._getDate().day() );
option = $( "<option>", { val: i, text: date.monthName() } ); option = $( "<option>", { val: i, text: date.monthName() } );
if ( this.date.month() === i ) { if ( this._getDate().month() === i ) {
option.prop( "selected", true ); option.prop( "selected", true );
} }
select.append( option ); select.append( option );
@ -43,14 +47,18 @@
this._on( select, { this._on( select, {
change: function() { change: function() {
this._off( select ); this._off( select );
this.date.setFullDate( select.val(), this.date.month(), this.date.day() ); this._getDate().setFullDate(
select.val(),
this._getDate().month(),
this._getDate().day()
);
this._updateView(); this._updateView();
} }
} ); } );
for ( ;i <= current.getFullYear() + 10; i++ ) { for ( ;i <= current.getFullYear() + 10; i++ ) {
option = $( "<option>", { val: i, text: i } ); option = $( "<option>", { val: i, text: i } );
if ( this.date.year() === i ) { if ( this._getDate().year() === i ) {
option.prop( "selected", true ); option.prop( "selected", true );
} }
select.append( option ); select.append( option );

100
ui/widgets/calendar.js
View File

@ -95,19 +95,19 @@ return $.widget( "ui.calendar", {
this._setLocale( this.options.locale, this.options.dateFormat ); this._setLocale( this.options.locale, this.options.dateFormat );
this.date = new $.ui.date( this.options.value, this._calendarDateOptions ); this._setDate( new $.ui.date( this.options.value, this._calendarDateOptions ) );
this.viewDate = this.date.clone(); this._setViewDate( this._getDate().clone() );
this.viewDate.eachDay = this.options.eachDay; this._getViewDate().eachDay = this.options.eachDay;
this._on( this.element, { this._on( this.element, {
"click .ui-calendar-prev": function( event ) { "click .ui-calendar-prev": function( event ) {
event.preventDefault(); event.preventDefault();
this.date.adjust( "M", -this.options.numberOfMonths ); this._getDate().adjust( "M", -this.options.numberOfMonths );
this._updateView(); this._updateView();
}, },
"click .ui-calendar-next": function( event ) { "click .ui-calendar-next": function( event ) {
event.preventDefault(); event.preventDefault();
this.date.adjust( "M", this.options.numberOfMonths ); this._getDate().adjust( "M", this.options.numberOfMonths );
this._updateView(); this._updateView();
}, },
"mousedown .ui-calendar-calendar button": "_select", "mousedown .ui-calendar-calendar button": "_select",
@ -155,28 +155,28 @@ return $.widget( "ui.calendar", {
); );
return; return;
case $.ui.keyCode.PAGE_UP: case $.ui.keyCode.PAGE_UP:
this.date.adjust( pageAltKey ? "Y" : "M", -1 ); this._getDate().adjust( pageAltKey ? "Y" : "M", -1 );
break; break;
case $.ui.keyCode.PAGE_DOWN: case $.ui.keyCode.PAGE_DOWN:
this.date.adjust( pageAltKey ? "Y" : "M", 1 ); this._getDate().adjust( pageAltKey ? "Y" : "M", 1 );
break; break;
case $.ui.keyCode.END: case $.ui.keyCode.END:
this.date.setDay( this.date.daysInMonth() ); this._getDate().setDay( this._getDate().daysInMonth() );
break; break;
case $.ui.keyCode.HOME: case $.ui.keyCode.HOME:
this.date.setDay( 1 ); this._getDate().setDay( 1 );
break; break;
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
this.date.adjust( "D", -1 ); this._getDate().adjust( "D", -1 );
break; break;
case $.ui.keyCode.UP: case $.ui.keyCode.UP:
this.date.adjust( "D", -7 ); this._getDate().adjust( "D", -7 );
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
this.date.adjust( "D", 1 ); this._getDate().adjust( "D", 1 );
break; break;
case $.ui.keyCode.DOWN: case $.ui.keyCode.DOWN:
this.date.adjust( "D", 7 ); this._getDate().adjust( "D", 7 );
break; break;
default: default:
return; return;
@ -191,25 +191,27 @@ return $.widget( "ui.calendar", {
}, },
_updateView: function() { _updateView: function() {
if ( this.options.numberOfMonths > 1 && this.date.year() === this.viewDate.year() ) { if ( this.options.numberOfMonths > 1 &&
this.viewDate.adjust( "M", this.options.numberOfMonths * this._getDate().year() === this._getViewDate().year()
( this.date.month() > this.viewDate.month() ? 1 : -1 ) ) {
this._getViewDate().adjust( "M", this.options.numberOfMonths *
( this._getDate().month() > this._getViewDate().month() ? 1 : -1 )
); );
} else { } else {
this.viewDate.setTimestamp( this.date.timestamp() ); this._getViewDate().setTimestamp( this._getDate().timestamp() );
} }
this.refresh(); this.refresh();
}, },
_needsRefresh: function() { _needsRefresh: function() {
if ( this.date.month() !== this.viewDate.month() || if ( this._getDate().month() !== this._getViewDate().month() ||
this.date.year() !== this.viewDate.year() this._getDate().year() !== this._getViewDate().year()
) { ) {
// Check if the needed day is already present in our grid due // Check if the needed day is already present in our grid due
// to eachDay option changes (eg. other-months demo) // 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; return false;
@ -220,7 +222,7 @@ return $.widget( "ui.calendar", {
}, },
_updateDayElement: function( state ) { _updateDayElement: function( state ) {
var id = this._getDayId( this.date ), var id = this._getDayId( this._getDate() ),
button = this._getDateElement( id ).children( "button" ); button = this._getDateElement( id ).children( "button" );
this.grid.attr( "aria-activedescendant", id ); this.grid.attr( "aria-activedescendant", id );
@ -293,16 +295,16 @@ return $.widget( "ui.calendar", {
_buildMultiplePicker: function() { _buildMultiplePicker: function() {
var element, header, var element, header,
rowBreak = $( "<div>" ), rowBreak = $( "<div>" ),
currentDate = this.viewDate, currentDate = this._getViewDate(),
months = this.viewDate.months( this.options.numberOfMonths - 1 ), months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
labelledBy = [], labelledBy = [],
i = 0; i = 0;
for ( ; i < months.length; i++ ) { for ( ; i < months.length; i++ ) {
// TODO: Shouldn't we pass date as a parameter to build* fns // TODO: Shouldn't we pass date as a parameter to build* fns
// instead of setting this.date? // instead of setting this.viewDate?
this.viewDate = months[ i ]; this._setViewDate( months[ i ] );
this.gridId = this.id + "-" + i; this.gridId = this.id + "-" + i;
labelledBy.push( this.gridId + "-title" ); labelledBy.push( this.gridId + "-title" );
@ -326,7 +328,7 @@ return $.widget( "ui.calendar", {
.attr( "aria-labelledby", labelledBy.join( " " ) ) .attr( "aria-labelledby", labelledBy.join( " " ) )
.append( rowBreak ); .append( rowBreak );
this.viewDate = currentDate; this._setViewDate( currentDate );
}, },
_buildHeaderButtons: function() { _buildHeaderButtons: function() {
@ -380,11 +382,11 @@ return $.widget( "ui.calendar", {
}, },
_buildTitleMonth: function() { _buildTitleMonth: function() {
return $( "<span>" ).text( this.viewDate.monthName() ); return $( "<span>" ).text( this._getViewDate().monthName() );
}, },
_buildTitleYear: function() { _buildTitleYear: function() {
return $( "<span>" ).text( this.viewDate.year() ); return $( "<span>" ).text( this._getViewDate().year() );
}, },
_buildGrid: function() { _buildGrid: function() {
@ -393,7 +395,7 @@ return $.widget( "ui.calendar", {
tabindex: 0, tabindex: 0,
"aria-readonly": true, "aria-readonly": true,
"aria-labelledby": this.gridId + "-month-label", "aria-labelledby": this.gridId + "-month-label",
"aria-activedescendant": this._getDayId( this.date ) "aria-activedescendant": this._getDayId( this._getDate() )
} ); } );
this._addClass( table, "ui-calendar-calendar" ); this._addClass( table, "ui-calendar-calendar" );
@ -408,8 +410,8 @@ return $.widget( "ui.calendar", {
week = $( "<th>" ), week = $( "<th>" ),
row = $( "<tr role='row'>" ), row = $( "<tr role='row'>" ),
i = 0, i = 0,
weekDayLength = this.viewDate.weekdays().length, weekDayLength = this._getViewDate().weekdays().length,
weekdays = this.viewDate.weekdays(); weekdays = this._getViewDate().weekdays();
if ( this.options.showWeek ) { if ( this.options.showWeek ) {
this._addClass( week, "ui-calendar-week-col" ); this._addClass( week, "ui-calendar-week-col" );
@ -431,7 +433,7 @@ return $.widget( "ui.calendar", {
}, },
_buildGridBody: function() { _buildGridBody: function() {
var days = this.viewDate.days(), var days = this._getViewDate().days(),
i = 0, i = 0,
rows = ""; rows = "";
@ -492,7 +494,7 @@ return $.widget( "ui.calendar", {
var attributes, content, var attributes, content,
classes = [ "ui-state-default" ]; classes = [ "ui-state-default" ];
if ( day === this.date && selectable ) { if ( day === this._getDate() && selectable ) {
classes.push( "ui-state-focus" ); classes.push( "ui-state-focus" );
} }
if ( this._isCurrent( day ) ) { if ( this._isCurrent( day ) ) {
@ -616,7 +618,7 @@ return $.widget( "ui.calendar", {
}, },
_headerButtonsState: function() { _headerButtonsState: function() {
var months = this.viewDate.months( this.options.numberOfMonths - 1 ), var months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
i = 0; i = 0;
for ( ; i < months.length; i++ ) { for ( ; i < months.length; i++ ) {
@ -648,9 +650,9 @@ return $.widget( "ui.calendar", {
for ( ; i < this.options.numberOfMonths; i++ ) { for ( ; i < this.options.numberOfMonths; i++ ) {
this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() ); this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() );
this.element.find( ".ui-calendar-calendar" ).eq( i ).replaceWith( this._buildGrid() ); 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 ) { _getTranslation: function( key ) {
@ -664,6 +666,22 @@ return $.widget( "ui.calendar", {
} ); } );
}, },
_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 ) { value: function( value ) {
if ( arguments.length ) { if ( arguments.length ) {
this.valueAsDate( this._parse( value ) ); this.valueAsDate( this._parse( value ) );
@ -730,11 +748,11 @@ return $.widget( "ui.calendar", {
if ( dateAttributes ) { if ( dateAttributes ) {
this._setLocale( this.options.locale, this.options.dateFormat ); this._setLocale( this.options.locale, this.options.dateFormat );
this.date.setAttributes( this._calendarDateOptions ); this._getDate().setAttributes( this._calendarDateOptions );
this.viewDate.setAttributes( this._calendarDateOptions ); this._getViewDate().setAttributes( this._calendarDateOptions );
} }
if ( create || refresh ) { if ( create || refresh ) {
this.viewDate.setTimestamp( this.date.timestamp() ); this._getViewDate().setTimestamp( this._getDate().timestamp() );
} }
if ( create ) { if ( create ) {
this.element.empty(); this.element.empty();
@ -750,7 +768,7 @@ return $.widget( "ui.calendar", {
_setOption: function( key, value ) { _setOption: function( key, value ) {
if ( key === "value" ) { if ( key === "value" ) {
if ( this._isValid( value ) ) { if ( this._isValid( value ) ) {
this.date.setTimestamp( value.getTime() ); this._getDate().setTimestamp( value.getTime() );
} else { } else {
value = null; value = null;
} }
@ -778,7 +796,7 @@ return $.widget( "ui.calendar", {
} }
if ( key === "eachDay" ) { if ( key === "eachDay" ) {
this.viewDate.eachDay = value; this._getViewDate().eachDay = value;
} }
} }
} ); } );