Datepicker: Add missing handling for disabled option

This commit is contained in:
Felix Nagel 2014-09-01 15:36:38 +02:00 committed by Scott González
parent e507477603
commit 32891588f4
5 changed files with 44 additions and 22 deletions

View File

@ -11,20 +11,21 @@ test( "destroy", function() {
});
test( "enable / disable", function() {
expect( 6 );
expect( 8 );
var element = $( "#calendar" ).calendar();
ok( !element.calendar( "option", "disabled" ), "initially enabled" );
ok( !element.hasClass( "ui-calendar-disabled" ), "does not have disabled class name" );
element.calendar( "disable" );
ok( element.calendar( "option", "disabled" ), "disabled option is set" );
ok( element.hasClass( "ui-calendar-disabled" ), "calendar has disabled class name" );
ok( element.hasClass( "ui-calendar-disabled" ), "has disabled widget class name" );
ok( element.hasClass( "ui-state-disabled" ), "has disabled state class name" );
equal( element.attr( "aria-disabled" ), "true", "has ARIA disabled" );
element.calendar( "enable" );
ok( !element.calendar( "option", "disabled" ), "enabled after enable() call" );
ok( !element.hasClass( "ui-calendar-disabled" ), "no longer has disabled class name" );
ok( !element.hasClass( "ui-calendar-disabled" ), "no longer has disabled widget class name" );
ok( !element.hasClass( "ui-state-disabled" ), "no longer has disabled state class name" );
equal( element.attr( "aria-disabled" ), "false", "no longer has ARIA disabled" );
});
test( "widget", function() {

View File

@ -15,21 +15,24 @@ test( "destroy", function() {
});
test( "enable / disable", function() {
expect( 6 );
expect( 10 );
var input = TestHelpers.datepicker.init( "#datepicker" ),
widget = input.datepicker( "widget" );
ok( !input.datepicker( "option", "disabled" ), "initially enabled" );
ok( !widget.hasClass( "ui-datepicker-disabled" ), "does not have disabled class name" );
calendar = input.datepicker( "widget" );
input.datepicker( "disable" );
ok( input.datepicker( "option", "disabled" ), "disabled option is set" );
ok( widget.hasClass( "ui-datepicker-disabled" ), "datepicker has disabled class name" );
ok( calendar.hasClass( "ui-datepicker-disabled" ), "has disabled widget class name" );
ok( input.hasClass( "ui-state-disabled" ), "has disabled state class name" );
equal( input.attr( "aria-disabled" ), "true", "has ARIA disabled" );
equal( input.attr( "disabled" ), "disabled", "input disabled" );
input.datepicker( "enable" );
ok( !input.datepicker( "option", "disabled" ), "enabled after enable() call" );
ok( !widget.hasClass( "ui-datepicker-disabled" ), "no longer has disabled class name" );
ok( !calendar.hasClass( "ui-datepicker-disabled" ), "no longer has disabled widget class name" );
ok( !input.hasClass( "ui-state-disabled" ), "no longer has disabled state class name" );
equal( input.attr( "aria-disabled" ), "false", "no longer has ARIA disabled" );
equal( input.attr( "disabled" ), undefined, "input no longer disabled" );
});
test( "widget", function() {

View File

@ -41,16 +41,17 @@ test( "appendTo", function() {
});
test( "Pass-through options", function() {
expect( 8 );
expect( 9 );
var options = {
"buttons": { "Test": $.noop },
"dateFormat": { date: "full" },
"eachDay": function( day ) { day; },
"max": new Date( 2000, 0, 1 ),
"min": new Date( 2000, 0, 2 ),
"numberOfMonths": 3,
"showWeek": true
buttons: { "Test": $.noop },
dateFormat: { date: "full" },
disabled: true,
eachDay: function( day ) { day; },
max: new Date( 2000, 0, 1 ),
min: new Date( 2000, 0, 2 ),
numberOfMonths: 3,
showWeek: true
},
input = $( "#datepicker" ).val( "1/1/14" ).datepicker(),
datepickerInstance = input.datepicker( "instance" );

View File

@ -549,6 +549,12 @@ return $.widget( "ui.calendar", {
this._createButtons();
}
if ( key === "disabled" ) {
this.element
.toggleClass( "ui-state-disabled", value )
.attr( "aria-disabled", value );
}
if ( key === "eachDay" ) {
this.date.eachDay = value;
this.refresh();

View File

@ -32,7 +32,7 @@
}(function( $ ) {
var widget,
calendarOptions = [ "buttons", "dateFormat", "eachDay", "max", "min", "numberOfMonths", "showWeek" ];
calendarOptions = [ "buttons", "dateFormat", "disabled", "eachDay", "max", "min", "numberOfMonths", "showWeek" ];
widget = $.widget( "ui.datepicker", {
version: "@VERSION",
@ -324,6 +324,17 @@ widget = $.widget( "ui.datepicker", {
this.element.val( this.calendarInstance.value() );
}
if ( key === "disabled" ) {
this.element
.prop( "disabled", value )
.toggleClass( "ui-state-disabled", value )
.attr( "aria-disabled", value );
if ( value ) {
this.close();
}
}
if ( key === "position" ) {
this.calendar.position( this._buildPosition() );
}