aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorTJ VanToll <tj.vantoll@gmail.com>2013-11-22 09:30:11 -0500
committerScott González <scott.gonzalez@gmail.com>2015-01-29 17:47:48 -0500
commitff4bfd643d4f30eb171ab8e40600fe8963ddfb1b (patch)
treee03b7e9488f889e7e72d44462d90d73d40d7e0a2
parente87a5d8c0520e64cadbe5903b9ef803f526e698d (diff)
downloadjquery-ui-ff4bfd643d4f30eb171ab8e40600fe8963ddfb1b.tar.gz
jquery-ui-ff4bfd643d4f30eb171ab8e40600fe8963ddfb1b.zip
Datepicker: Fix key handling implementation and tests
-rw-r--r--tests/unit/datepicker/datepicker_core.js210
-rw-r--r--ui/datepicker.js24
2 files changed, 158 insertions, 76 deletions
diff --git a/tests/unit/datepicker/datepicker_core.js b/tests/unit/datepicker/datepicker_core.js
index 1e3ec1fb8..e32a0bb86 100644
--- a/tests/unit/datepicker/datepicker_core.js
+++ b/tests/unit/datepicker/datepicker_core.js
@@ -218,170 +218,228 @@ asyncTest( "baseStructure", function() {
});
test( "Keyboard handling", function() {
- // TODO: These tests all rely on having a method to retrieve a Date object. There
- // is not only implemented yet so bail.
- expect( 0 );
- return;
-
- expect( 24 );
- var inp = TestHelpers.datepicker.init( "#datepicker" ),
+ expect( 8 );
+ var input = $( "#datepicker" ).datepicker(),
+ instance = input.datepicker( "instance" ),
date = new Date();
- inp.val( "" ).datepicker( "open" )
+ input.datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.val(), date, "Keystroke enter" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke enter" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ // Enter = Select today's date by default
+ input.val( "1/1/2014" ).datepicker( "open" )
.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
"Keystroke enter - preset" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ // Control + Home = Change the calendar to the current month
+ input.val( "1/1/2014" ).datepicker( "open" )
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate(inp.datepicker( "getDate" ), date, "Keystroke ctrl+home" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+home" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ // Control + End = Close the calendar and clear the input
+ input.val( "1/1/2014" ).datepicker( "open" )
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END });
- ok( inp.datepicker( "getDate" ) == null, "Keystroke ctrl+end" );
+ equal( input.val(), "", "Keystroke ctrl+end" );
- inp.val( "" ).datepicker( "open" )
- .simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
- ok(inp.datepicker("getDate") == null, "Keystroke esc");
+ input.val( "" ).datepicker( "open" );
+ ok( instance.isOpen, "datepicker is open before escape" );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
+ ok( !instance.isOpen, "escape closes the datepicker" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "1/1/2014" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
"Keystroke esc - preset" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "1/1/2014" ).datepicker( "open" )
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date(2008, 2 - 1, 4),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
"Keystroke esc - abandoned" );
- // Moving by day or week
- inp.val( "" ).datepicker( "open" )
- .simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.LEFT })
- .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- date.setDate( date.getDate() - 1 );
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+left" );
-
- inp.val( "" ).datepicker( "open" )
- .simulate( "keydown", {keyCode: $.ui.keyCode.LEFT }).
- simulate( "keydown", {keyCode: $.ui.keyCode.ENTER });
- date.setDate( date.getDate() + 1 );
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke left") ;
-
- inp.val( "" ).datepicker( "open" )
- .simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT}).
- simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
+ input.datepicker( "destroy" );
+});
+
+asyncTest( "keyboard handling - arrow keys", function() {
+ expect( 6 );
+ var picker,
+ input = $( "#datepicker" ),
+ date = new Date();
+
+ function step1() {
+ input.datepicker();
+ picker = input.datepicker( "widget" );
+ ok( !picker.is( ":visible" ), "datepicker closed" );
+ input.val( "" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
+
+ setTimeout(function() {
+ ok( picker.is( ":visible" ), "Keystroke down opens datepicker" );
+ input.datepicker( "destroy" );
+ step2();
+ });
+ };
+
+ function step2() {
+ input.datepicker();
+ picker = input.datepicker( "widget" )
+ ok( !picker.is( ":visible" ), "datepicker closed" );
+ input.val( "" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.UP });
+
+ setTimeout(function() {
+ ok( picker.is( ":visible" ), "Keystroke up opens datepicker" );
+ input.datepicker( "destroy" );
+ step3();
+ });
+ };
+
+ function step3() {
+ input.datepicker()
+ .val( "" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
+
+ setTimeout(function() {
+ $( ":focus" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT })
+ .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
+ date.setDate( date.getDate() - 1 );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date,
+ "Keystroke left to switch to previous day" );
+
+ input.datepicker( "destroy" );
+ step4();
+ }, 100);
+ };
+
+ function step4() {
+ input.datepicker()
+ .val( "" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
+
+ setTimeout(function() {
+ $( ":focus" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT })
+ .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
+ date.setDate( new Date().getDate() + 1 );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date,
+ "Keystroke right to switch to next day" );
+
+ input.datepicker( "destroy" );
+ start();
+ }, 100);
+ };
+
+ step1();
+});
+
+/*
+ input.val( "" ).datepicker( "open" )
+ .simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT })
+ .simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 1);
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+right" );
-
- inp.val( "" ).datepicker( "open" )
- .simulate( "keydown", {keyCode: $.ui.keyCode.RIGHT}).
- simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
- date.setDate(date.getDate() - 1);
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke right" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+right" );
- inp.val( "" ).datepicker( "open" )
+ input.val( "" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.UP}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 7);
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+up" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+up" );
- inp.val( "" ).datepicker( "open" )
+ input.val( "" ).datepicker( "open" )
.simulate( "keydown", {keyCode: $.ui.keyCode.UP}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke up" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke up" );
- inp.val( "" ).datepicker( "open" )
+ input.val( "" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+down" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+down" );
- inp.val( "" ).datepicker( "open" )
+ input.val( "" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
date.setDate( date.getDate() - 7 );
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke down" );
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke down" );
// Moving by month or year
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "02/04/2008" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 1 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ),
"Keystroke pgup" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "02/04/2008" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 3 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 3 - 1, 4 ),
"Keystroke pgdn" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "02/04/2008" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 2 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 2 - 1, 4 ),
"Keystroke ctrl+pgup" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "02/04/2008" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER});
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2009, 2 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2009, 2 - 1, 4 ),
"Keystroke ctrl+pgdn" );
// Check for moving to short months
- inp.val( "03/31/2008" ).datepicker( "open" )
+ input.val( "03/31/2008" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 29 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 29 ),
"Keystroke pgup - Feb" );
- inp.val( "01/30/2008" ).datepicker( "open" )
+ input.val( "01/30/2008" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 29 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 29 ),
"Keystroke pgdn - Feb" );
- inp.val( "02/29/2008" ).datepicker( "open" )
+ input.val( "02/29/2008" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 2 - 1, 28 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 2 - 1, 28 ),
"Keystroke ctrl+pgup - Feb" );
- inp.val( "02/29/2008" ).datepicker( "open" )
+ input.val( "02/29/2008" ).datepicker( "open" )
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2009, 2 - 1, 28 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2009, 2 - 1, 28 ),
"Keystroke ctrl+pgdn - Feb" );
// Goto current
- inp.datepicker( "option", { gotoCurrent: true })
+ input.datepicker( "option", { gotoCurrent: true })
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 4 ),
"Keystroke ctrl+home" );
// Change steps
- inp.datepicker( "option", { stepMonths: 2, gotoCurrent: false })
+ input.datepicker( "option", { stepMonths: 2, gotoCurrent: false })
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 12 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 12 - 1, 4 ),
"Keystroke pgup step 2" );
- inp.val( "02/04/2008" ).datepicker( "open" )
+ input.val( "02/04/2008" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
- TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 4 - 1, 4 ),
+ TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 4 - 1, 4 ),
"Keystroke pgdn step 2" );
-});
+*/
test( "mouse", function() {
// TODO: These tests use the old getDate() and setDate() methods. Re-activate these
diff --git a/ui/datepicker.js b/ui/datepicker.js
index 425e81a72..662206912 100644
--- a/ui/datepicker.js
+++ b/ui/datepicker.js
@@ -59,6 +59,7 @@ $.widget( "ui.datepicker", {
},
_create: function() {
this.date = $.date( null, this.options.dateFormat );
+
this.date.eachDay = this.options.eachDay;
this.id = "ui-datepicker-" + idIncrement;
idIncrement++;
@@ -197,6 +198,9 @@ $.widget( "ui.datepicker", {
this.close( event );
}
break;
+ case $.ui.keyCode.ENTER:
+ this._handleKeydown( event );
+ break;
case $.ui.keyCode.DOWN:
case $.ui.keyCode.UP:
clearTimeout( this.closeTimer );
@@ -205,6 +209,26 @@ $.widget( "ui.datepicker", {
this.grid.focus();
}, 1);
break;
+ case $.ui.keyCode.HOME:
+ if ( event.ctrlKey ) {
+ this.date.setTime( new Date() );
+ event.preventDefault();
+ if ( this.isOpen ) {
+ this.refresh();
+ } else {
+ this.open( event );
+ }
+ }
+ break;
+ case $.ui.keyCode.END:
+ if ( event.ctrlKey ) {
+ this.element.val( "" );
+ event.preventDefault();
+ if ( this.isOpen ) {
+ this.close( event );
+ }
+ }
+ break;
}
},
mousedown: function( event ) {