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)