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

Datepicker: Fix key handling implementation and tests

Browse Source
This commit is contained in:
TJ VanToll 2013-11-22 09:30:11 -05:00 committed by Scott González
parent e87a5d8c05
commit ff4bfd643d
2 changed files with 157 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
tests/unit/datepicker/datepicker_core.js
View File

@ -218,170 +218,228 @@ asyncTest( "baseStructure", function() {
}); });
test( "Keyboard handling", function() { test( "Keyboard handling", function() {
// TODO: These tests all rely on having a method to retrieve a Date object. There expect( 8 );
// is not only implemented yet so bail. var input = $( "#datepicker" ).datepicker(),
expect( 0 ); instance = input.datepicker( "instance" ),
return;
expect( 24 );
var inp = TestHelpers.datepicker.init( "#datepicker" ),
date = new Date(); date = new Date();
inp.val( "" ).datepicker( "open" ) input.datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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 }); .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" ); "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", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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 }); .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" ) input.val( "" ).datepicker( "open" );
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE }); ok( instance.isOpen, "datepicker is open before escape" );
ok(inp.datepicker("getDate") == null, "Keystroke esc"); 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 }); .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" ); "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", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE }); .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" ); "Keystroke esc - abandoned" );
// Moving by day or week input.datepicker( "destroy" );
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" ) asyncTest( "keyboard handling - arrow keys", function() {
.simulate( "keydown", {keyCode: $.ui.keyCode.LEFT }). expect( 6 );
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER }); var picker,
date.setDate( date.getDate() + 1 ); input = $( "#datepicker" ),
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke left") ; date = new Date();
inp.val( "" ).datepicker( "open" ) function step1() {
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT}). input.datepicker();
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER}); 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); date.setDate(date.getDate() + 1);
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+right" ); TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+right" );
inp.val( "" ).datepicker( "open" ) input.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" );
inp.val( "" ).datepicker( "open" )
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.UP}). .simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.UP}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER}); simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() - 7); 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.UP}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER}); simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7); 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", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER}); simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7); 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.DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
date.setDate( date.getDate() - 7 ); 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 // 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.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER}); .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" ); "Keystroke ctrl+pgdn" );
// Check for moving to short months // 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.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "Keystroke ctrl+pgdn - Feb" );
// Goto current // Goto current
inp.datepicker( "option", { gotoCurrent: true }) input.datepicker( "option", { gotoCurrent: true })
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" ) .datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN }) .late( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME }) .simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "Keystroke ctrl+home" );
// Change steps // Change steps
inp.datepicker( "option", { stepMonths: 2, gotoCurrent: false }) input.datepicker( "option", { stepMonths: 2, gotoCurrent: false })
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" ) .datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_UP }) .late( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "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.PAGE_DOWN })
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER }); .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" ); "Keystroke pgdn step 2" );
}); */
test( "mouse", function() { test( "mouse", function() {
// TODO: These tests use the old getDate() and setDate() methods. Re-activate these // TODO: These tests use the old getDate() and setDate() methods. Re-activate these

24
ui/datepicker.js
View File

@ -59,6 +59,7 @@ $.widget( "ui.datepicker", {
}, },
_create: function() { _create: function() {
this.date = $.date( null, this.options.dateFormat ); this.date = $.date( null, this.options.dateFormat );
this.date.eachDay = this.options.eachDay; this.date.eachDay = this.options.eachDay;
this.id = "ui-datepicker-" + idIncrement; this.id = "ui-datepicker-" + idIncrement;
idIncrement++; idIncrement++;
@ -197,6 +198,9 @@ $.widget( "ui.datepicker", {
this.close( event ); this.close( event );
} }
break; break;
case $.ui.keyCode.ENTER:
this._handleKeydown( event );
break;
case $.ui.keyCode.DOWN: case $.ui.keyCode.DOWN:
case $.ui.keyCode.UP: case $.ui.keyCode.UP:
clearTimeout( this.closeTimer ); clearTimeout( this.closeTimer );
@ -205,6 +209,26 @@ $.widget( "ui.datepicker", {
this.grid.focus(); this.grid.focus();
}, 1); }, 1);
break; 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 ) { mousedown: function( event ) {