Datepicker: Add missing handling for disabled option

Author: fnagel

tests/unit/calendar/calendar_methods.js

@@ -15,20 +15,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() {

tests/unit/datepicker/datepicker_methods.js

@@ -17,21 +17,24 @@ test( "destroy", function() {
 });
 
 test( "enable / disable", function() {
-	expect( 6 );
-
-	var inp = TestHelpers.datepicker.init( "#datepicker" ),
-		dp = inp.datepicker( "widget" );
-
-	ok( !inp.datepicker( "option", "disabled" ), "initially enabled" );
-	ok( !dp.hasClass( "ui-datepicker-disabled" ), "does not have disabled class name" );
+	expect( 10 );
 
-	inp.datepicker( "disable" );
-	ok( inp.datepicker( "option", "disabled" ), "disabled option is set" );
-	ok( dp.hasClass( "ui-datepicker-disabled" ), "datepicker has disabled class name" );
+	var input = TestHelpers.datepicker.init( "#datepicker" ),
+		calendar = input.datepicker( "widget" );
 
-	inp.datepicker( "enable" );
-	ok( !inp.datepicker( "option", "disabled" ), "enabled after enable() call" );
-	ok( !dp.hasClass( "ui-datepicker-disabled" ), "no longer has disabled class name" );
+	input.datepicker( "disable" );
+	ok( input.datepicker( "option", "disabled" ), "disabled option is set" );
+	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( !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() {

tests/unit/datepicker/datepicker_options.js

@@ -41,11 +41,12 @@ test( "appendTo", function() {
 });
 
 test( "Pass-through options", function() {
-	expect( 8 );
+	expect( 9 );
 
 	var options = {
 			"buttons": { "Test": $.noop },
 			"dateFormat": { date: "full" },
+			"disabled": true,
 			"eachDay": function( day ) { day; },
 			"max": new Date( 2000, 0, 1 ),
 			"min": new Date( 2000, 0, 2 ),

ui/calendar.js

@@ -532,6 +532,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();

ui/datepicker.js

@@ -27,7 +27,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",
@@ -321,6 +321,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() );
 		}