library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Calendar: Make header prev / next buttons min / max option aware

Browse Source 
* Disable / enable header buttons according to min / max
* Add tests for header button states
* Improve header button rendering and refreshing
* Improve header button label escaping on create
* Create button pane for multiple pickers (bugfix)
This commit is contained in:
Felix Nagel 2015-08-26 11:45:15 +02:00
parent 9bc5fd2387
commit 31908a1465
2 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
tests/unit/calendar/options.js
View File

@ -191,10 +191,13 @@ test( "showWeek", function() {
});
test( "min / max", function() {
expect( 7 );
expect( 14 );
// With existing date
var element = $( "#calendar" ).calendar(),
container = element.calendar( "widget" ),
prevButton = container.find( ".ui-calendar-prev" ),
nextButton = container.find( ".ui-calendar-next" ),
minDate = new Date( 2008, 2 - 1, 29 ),
maxDate = new Date( 2008, 12 - 1, 7 );
@ -233,6 +236,28 @@ test( "min / max", function() {
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "1/4/09" );
testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > max" );
element
.calendar( "option", { min: minDate, max: maxDate } )
.calendar( "value", "3/4/08" );
ok( !prevButton.hasClass( "ui-state-disabled" ), "Prev button enabled" );
prevButton.simulate( "click" );
ok( prevButton.hasClass( "ui-state-disabled" ), "Prev button disabled" );
element.calendar( "value", "11/4/08" );
ok( !nextButton.hasClass( "ui-state-disabled" ), "Next button enabled" );
nextButton.simulate( "click" );
ok( nextButton.hasClass( "ui-state-disabled" ), "Next button disabled" );
element
.calendar( "option", { max: null } )
.calendar( "value", "1/4/15" )
.calendar( "option", { max: maxDate } );
ok( nextButton.hasClass( "ui-state-disabled" ), "Other year: Next button disabled" );
nextButton.simulate( "click" );
ok( nextButton.hasClass( "ui-state-disabled" ), "Other year: Next button disabled after click" );
nextButton.simulate( "click" );
ok( !nextButton.hasClass( "ui-state-disabled" ), "Other year: Next button enabled after click" );
});
test( "numberOfMonths", function() {

67
ui/widgets/calendar.js
View File

@ -233,6 +233,10 @@ return $.widget( "ui.calendar", {
} )
.html( pickerHtml );
this.prevButton = this.element.find( ".ui-calendar-prev" );
this.nextButton = this.element.find( ".ui-calendar-next" );
this._refreshHeaderButtons();
this._createButtonPane();
this.grid = this.element.find( ".ui-calendar-calendar" );
@ -283,24 +287,14 @@ return $.widget( "ui.calendar", {
},
_buildPreviousLink: function() {
var prevText = this._getTranslation( "prevText" );
return "<button class='ui-calendar-prev ui-corner-all' title='" +
prevText + "'>" +
"<span class='ui-icon ui-icon-circle-triangle-w'>" +
prevText +
"</span>" +
return "<button class='ui-calendar-prev ui-corner-all'>" +
"<span class='ui-icon ui-icon-circle-triangle-w'></span>" +
"</button>";
},
_buildNextLink: function() {
var nextText = this._getTranslation( "nextText" );
return "<button class='ui-calendar-next ui-corner-all' title='" +
nextText + "'>" +
"<span class='ui-icon ui-icon-circle-triangle-e'>" +
nextText +
"</span>" +
return "<button class='ui-calendar-next ui-corner-all'>" +
"<span class='ui-icon ui-icon-circle-triangle-e'></span>" +
"</button>";
},
@ -517,14 +511,49 @@ return $.widget( "ui.calendar", {
this.grid = $( this._buildGrid() );
this.element.find( ".ui-calendar-title" ).html( this._buildTitle() );
this.element.find( ".ui-calendar-calendar" ).replaceWith( this.grid );
$( ".ui-calendar-prev", this.element ).attr( "title", this.labels.prevText )
.children().html( this.labels.prevText );
$( ".ui-calendar-next", this.element ).attr( "title", this.labels.nextText )
.children().html( this.labels.nextText );
this._createButtons();
} else {
this._refreshMultiplePicker();
}
this._refreshHeaderButtons();
this._createButtons();
},
_refreshHeaderButtons: function() {
var prevText = this._getTranslation( "prevText" ),
nextText = this._getTranslation( "nextText" );
this.prevButton.attr( "title", prevText ).children().html( prevText );
this.nextButton.attr( "title", nextText ).children().html( nextText );
this._headerButtonsState();
},
_headerButtonsState: function() {
var months = this.viewDate.months( this.options.numberOfMonths - 1 ),
i = 0;
for ( ; i < months.length; i++ ) {
if ( this.options.min !== null && months[ i ].first ) {
this._disableElement( this.prevButton,
( this.options.min.getMonth() >= months[ i ].month() &&
this.options.min.getFullYear() === months[ i ].year() ) ||
this.options.min.getFullYear() > months[ i ].year()
);
}
if ( this.options.max !== null && months[ i ].last ) {
this._disableElement( this.nextButton,
( this.options.max.getMonth() <= months[ i].month() &&
this.options.max.getFullYear() === months[ i ].year() ) ||
this.options.max.getFullYear() < months[ i ].year()
);
}
}
},
_disableElement: function( element, state ) {
element
.attr( "aria-disabled", state )
.toggleClass( "ui-state-disabled", state );
},
_refreshMultiplePicker: function() {