Skip to content

Commit 9bb209c

Browse files
fnagelfnagel
committed
Calendar: Introduce getter / setter for date and viewDate
1 parent 5ee64dd commit 9bb209c

File tree

2 files changed

+73
-47
lines changed

2 files changed

+73
-47
lines changed

‎demos/calendar/dropdown-month-year.html

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,26 @@
1111
$.widget( "ui.calendar", $.ui.calendar, {
1212
_buildTitleMonth: function() {
1313
var select = $( "<select>" ),
14-
date = this.date.clone(),
14+
date = this._getDate().clone(),
1515
i = 0,
1616
option;
1717

1818
this._on( select, {
1919
change: function() {
2020
this._off( select );
21-
this.date.setFullDate( this.date.year(), select.val(), this.date.day() );
21+
this._getDate().setFullDate(
22+
this._getDate().year(),
23+
select.val(),
24+
this._getDate().day()
25+
);
2226
this._updateView();
2327
}
2428
} );
2529

2630
for ( ; i < 12; i++ ) {
27-
date.setFullDate( select.val(), i, this.date.day() );
31+
date.setFullDate( select.val(), i, this._getDate().day() );
2832
option = $( "<option>", { val: i, text: date.monthName() } );
29-
if ( this.date.month() === i ) {
33+
if ( this._getDate().month() === i ) {
3034
option.prop( "selected", true );
3135
}
3236
select.append( option );
@@ -43,14 +47,18 @@
4347
this._on( select, {
4448
change: function() {
4549
this._off( select );
46-
this.date.setFullDate( select.val(), this.date.month(), this.date.day() );
50+
this._getDate().setFullDate(
51+
select.val(),
52+
this._getDate().month(),
53+
this._getDate().day()
54+
);
4755
this._updateView();
4856
}
4957
} );
5058

5159
for ( ;i <= current.getFullYear() + 10; i++ ) {
5260
option = $( "<option>", { val: i, text: i } );
53-
if ( this.date.year() === i ) {
61+
if ( this._getDate().year() === i ) {
5462
option.prop( "selected", true );
5563
}
5664
select.append( option );

‎ui/widgets/calendar.js

Lines changed: 59 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -95,19 +95,19 @@ return $.widget( "ui.calendar", {
9595

9696
this._setLocale( this.options.locale, this.options.dateFormat );
9797

98-
this.date = new $.ui.date( this.options.value, this._calendarDateOptions );
99-
this.viewDate = this.date.clone();
100-
this.viewDate.eachDay = this.options.eachDay;
98+
this._setDate( new $.ui.date( this.options.value, this._calendarDateOptions ) );
99+
this._setViewDate( this._getDate().clone() );
100+
this._getViewDate().eachDay = this.options.eachDay;
101101

102102
this._on( this.element, {
103103
"click .ui-calendar-prev": function( event ) {
104104
event.preventDefault();
105-
this.date.adjust( "M", -this.options.numberOfMonths );
105+
this._getDate().adjust( "M", -this.options.numberOfMonths );
106106
this._updateView();
107107
},
108108
"click .ui-calendar-next": function( event ) {
109109
event.preventDefault();
110-
this.date.adjust( "M", this.options.numberOfMonths );
110+
this._getDate().adjust( "M", this.options.numberOfMonths );
111111
this._updateView();
112112
},
113113
"mousedown .ui-calendar-calendar button": "_select",
@@ -155,28 +155,28 @@ return $.widget( "ui.calendar", {
155155
);
156156
return;
157157
case $.ui.keyCode.PAGE_UP:
158-
this.date.adjust( pageAltKey ? "Y" : "M", -1 );
158+
this._getDate().adjust( pageAltKey ? "Y" : "M", -1 );
159159
break;
160160
case $.ui.keyCode.PAGE_DOWN:
161-
this.date.adjust( pageAltKey ? "Y" : "M", 1 );
161+
this._getDate().adjust( pageAltKey ? "Y" : "M", 1 );
162162
break;
163163
case $.ui.keyCode.END:
164-
this.date.setDay( this.date.daysInMonth() );
164+
this._getDate().setDay( this._getDate().daysInMonth() );
165165
break;
166166
case $.ui.keyCode.HOME:
167-
this.date.setDay( 1 );
167+
this._getDate().setDay( 1 );
168168
break;
169169
case $.ui.keyCode.LEFT:
170-
this.date.adjust( "D", -1 );
170+
this._getDate().adjust( "D", -1 );
171171
break;
172172
case $.ui.keyCode.UP:
173-
this.date.adjust( "D", -7 );
173+
this._getDate().adjust( "D", -7 );
174174
break;
175175
case $.ui.keyCode.RIGHT:
176-
this.date.adjust( "D", 1 );
176+
this._getDate().adjust( "D", 1 );
177177
break;
178178
case $.ui.keyCode.DOWN:
179-
this.date.adjust( "D", 7 );
179+
this._getDate().adjust( "D", 7 );
180180
break;
181181
default:
182182
return;
@@ -191,25 +191,27 @@ return $.widget( "ui.calendar", {
191191
},
192192

193193
_updateView: function() {
194-
if ( this.options.numberOfMonths > 1 && this.date.year() === this.viewDate.year() ) {
195-
this.viewDate.adjust( "M", this.options.numberOfMonths *
196-
( this.date.month() > this.viewDate.month() ? 1 : -1 )
194+
if ( this.options.numberOfMonths > 1 &&
195+
this._getDate().year() === this._getViewDate().year()
196+
) {
197+
this._getViewDate().adjust( "M", this.options.numberOfMonths *
198+
( this._getDate().month() > this._getViewDate().month() ? 1 : -1 )
197199
);
198200
} else {
199-
this.viewDate.setTimestamp( this.date.timestamp() );
201+
this._getViewDate().setTimestamp( this._getDate().timestamp() );
200202
}
201203

202204
this.refresh();
203205
},
204206

205207
_needsRefresh: function() {
206-
if ( this.date.month() !== this.viewDate.month() ||
207-
this.date.year() !== this.viewDate.year()
208+
if ( this._getDate().month() !== this._getViewDate().month() ||
209+
this._getDate().year() !== this._getViewDate().year()
208210
) {
209211

210212
// Check if the needed day is already present in our grid due
211213
// to eachDay option changes (eg. other-months demo)
212-
return !this._getDateElement( this._getDayId( this.date ) ).length;
214+
return !this._getDateElement( this._getDayId( this._getDate() ) ).length;
213215
}
214216

215217
return false;
@@ -220,7 +222,7 @@ return $.widget( "ui.calendar", {
220222
},
221223

222224
_updateDayElement: function( state ) {
223-
var id = this._getDayId( this.date ),
225+
var id = this._getDayId( this._getDate() ),
224226
button = this._getDateElement( id ).children( "button" );
225227

226228
this.grid.attr( "aria-activedescendant", id );
@@ -293,16 +295,16 @@ return $.widget( "ui.calendar", {
293295
_buildMultiplePicker: function() {
294296
var element, header,
295297
rowBreak = $( "<div>" ),
296-
currentDate = this.viewDate,
297-
months = this.viewDate.months( this.options.numberOfMonths - 1 ),
298+
currentDate = this._getViewDate(),
299+
months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
298300
labelledBy = [],
299301
i = 0;
300302

301303
for ( ; i < months.length; i++ ) {
302304

303305
// TODO: Shouldn't we pass date as a parameter to build* fns
304-
// instead of setting this.date?
305-
this.viewDate = months[ i ];
306+
// instead of setting this.viewDate?
307+
this._setViewDate( months[ i ] );
306308
this.gridId = this.id + "-" + i;
307309
labelledBy.push( this.gridId + "-title" );
308310

@@ -326,7 +328,7 @@ return $.widget( "ui.calendar", {
326328
.attr( "aria-labelledby", labelledBy.join( " " ) )
327329
.append( rowBreak );
328330

329-
this.viewDate = currentDate;
331+
this._setViewDate( currentDate );
330332
},
331333

332334
_buildHeaderButtons: function() {
@@ -380,11 +382,11 @@ return $.widget( "ui.calendar", {
380382
},
381383

382384
_buildTitleMonth: function() {
383-
return $( "<span>" ).text( this.viewDate.monthName() );
385+
return $( "<span>" ).text( this._getViewDate().monthName() );
384386
},
385387

386388
_buildTitleYear: function() {
387-
return $( "<span>" ).text( this.viewDate.year() );
389+
return $( "<span>" ).text( this._getViewDate().year() );
388390
},
389391

390392
_buildGrid: function() {
@@ -393,7 +395,7 @@ return $.widget( "ui.calendar", {
393395
tabindex: 0,
394396
"aria-readonly": true,
395397
"aria-labelledby": this.gridId + "-month-label",
396-
"aria-activedescendant": this._getDayId( this.date )
398+
"aria-activedescendant": this._getDayId( this._getDate() )
397399
} );
398400

399401
this._addClass( table, "ui-calendar-calendar" );
@@ -408,8 +410,8 @@ return $.widget( "ui.calendar", {
408410
week = $( "<th>" ),
409411
row = $( "<tr role='row'>" ),
410412
i = 0,
411-
weekDayLength = this.viewDate.weekdays().length,
412-
weekdays = this.viewDate.weekdays();
413+
weekDayLength = this._getViewDate().weekdays().length,
414+
weekdays = this._getViewDate().weekdays();
413415

414416
if ( this.options.showWeek ) {
415417
this._addClass( week, "ui-calendar-week-col" );
@@ -431,7 +433,7 @@ return $.widget( "ui.calendar", {
431433
},
432434

433435
_buildGridBody: function() {
434-
var days = this.viewDate.days(),
436+
var days = this._getViewDate().days(),
435437
i = 0,
436438
rows = "";
437439

@@ -492,7 +494,7 @@ return $.widget( "ui.calendar", {
492494
var attributes, content,
493495
classes = [ "ui-state-default" ];
494496

495-
if ( day === this.date && selectable ) {
497+
if ( day === this._getDate() && selectable ) {
496498
classes.push( "ui-state-focus" );
497499
}
498500
if ( this._isCurrent( day ) ) {
@@ -616,7 +618,7 @@ return $.widget( "ui.calendar", {
616618
},
617619

618620
_headerButtonsState: function() {
619-
var months = this.viewDate.months( this.options.numberOfMonths - 1 ),
621+
var months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
620622
i = 0;
621623

622624
for ( ; i < months.length; i++ ) {
@@ -648,9 +650,9 @@ return $.widget( "ui.calendar", {
648650
for ( ; i < this.options.numberOfMonths; i++ ) {
649651
this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() );
650652
this.element.find( ".ui-calendar-calendar" ).eq( i ).replaceWith( this._buildGrid() );
651-
this.viewDate.adjust( "M", 1 );
653+
this._getViewDate().adjust( "M", 1 );
652654
}
653-
this.viewDate.adjust( "M", -this.options.numberOfMonths );
655+
this._getViewDate().adjust( "M", -this.options.numberOfMonths );
654656
},
655657

656658
_getTranslation: function( key ) {
@@ -664,6 +666,22 @@ return $.widget( "ui.calendar", {
664666
} );
665667
},
666668

669+
_getDate: function() {
670+
return this.date;
671+
},
672+
673+
_setDate: function( date ) {
674+
this.date = date;
675+
},
676+
677+
_getViewDate: function() {
678+
return this.viewDate;
679+
},
680+
681+
_setViewDate: function( date ) {
682+
this.viewDate = date;
683+
},
684+
667685
value: function( value ) {
668686
if ( arguments.length ) {
669687
this.valueAsDate( this._parse( value ) );
@@ -730,11 +748,11 @@ return $.widget( "ui.calendar", {
730748

731749
if ( dateAttributes ) {
732750
this._setLocale( this.options.locale, this.options.dateFormat );
733-
this.date.setAttributes( this._calendarDateOptions );
734-
this.viewDate.setAttributes( this._calendarDateOptions );
751+
this._getDate().setAttributes( this._calendarDateOptions );
752+
this._getViewDate().setAttributes( this._calendarDateOptions );
735753
}
736754
if ( create || refresh ) {
737-
this.viewDate.setTimestamp( this.date.timestamp() );
755+
this._getViewDate().setTimestamp( this._getDate().timestamp() );
738756
}
739757
if ( create ) {
740758
this.element.empty();
@@ -750,7 +768,7 @@ return $.widget( "ui.calendar", {
750768
_setOption: function( key, value ) {
751769
if ( key === "value" ) {
752770
if ( this._isValid( value ) ) {
753-
this.date.setTimestamp( value.getTime() );
771+
this._getDate().setTimestamp( value.getTime() );
754772
} else {
755773
value = null;
756774
}
@@ -778,7 +796,7 @@ return $.widget( "ui.calendar", {
778796
}
779797

780798
if ( key === "eachDay" ) {
781-
this.viewDate.eachDay = value;
799+
this._getViewDate().eachDay = value;
782800
}
783801
}
784802
} );

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy