Skip to content

Commit e143e5b

Browse files
tjvantollscottgonzalez
tjvantoll
authored and
scottgonzalez
committed
Datepicker: Fix key handling implementation and tests
1 parent ae29574 commit e143e5b

File tree

2 files changed

+158
-76
lines changed

2 files changed

+158
-76
lines changed

‎tests/unit/datepicker/datepicker_core.js

Lines changed: 134 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -218,170 +218,228 @@ asyncTest( "baseStructure", function() {
218218
});
219219

220220
test( "Keyboard handling", function() {
221-
// TODO: These tests all rely on having a method to retrieve a Date object. There
222-
// is not only implemented yet so bail.
223-
expect( 0 );
224-
return;
225-
226-
expect( 24 );
227-
var inp = TestHelpers.datepicker.init( "#datepicker" ),
221+
expect( 8 );
222+
var input = $( "#datepicker" ).datepicker(),
223+
instance = input.datepicker( "instance" ),
228224
date = new Date();
229225

230-
inp.val( "" ).datepicker( "open" )
226+
input.datepicker( "open" )
231227
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
232-
TestHelpers.datepicker.equalsDate( inp.val(), date, "Keystroke enter" );
228+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke enter" );
233229

234-
inp.val( "02/04/2008" ).datepicker( "open" )
230+
// Enter = Select today's date by default
231+
input.val( "1/1/2014" ).datepicker( "open" )
235232
.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
236-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
233+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
237234
"Keystroke enter - preset" );
238235

239-
inp.val( "02/04/2008" ).datepicker( "open" )
236+
// Control + Home = Change the calendar to the current month
237+
input.val( "1/1/2014" ).datepicker( "open" )
240238
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
241239
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
242-
TestHelpers.datepicker.equalsDate(inp.datepicker( "getDate" ), date, "Keystroke ctrl+home" );
240+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+home" );
243241

244-
inp.val( "02/04/2008" ).datepicker( "open" )
242+
// Control + End = Close the calendar and clear the input
243+
input.val( "1/1/2014" ).datepicker( "open" )
245244
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END });
246-
ok( inp.datepicker( "getDate" ) == null, "Keystroke ctrl+end" );
245+
equal( input.val(), "", "Keystroke ctrl+end" );
247246

248-
inp.val( "" ).datepicker( "open" )
249-
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
250-
ok(inp.datepicker("getDate") == null, "Keystroke esc");
247+
input.val( "" ).datepicker( "open" );
248+
ok( instance.isOpen, "datepicker is open before escape" );
249+
input.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
250+
ok( !instance.isOpen, "escape closes the datepicker" );
251251

252-
inp.val( "02/04/2008" ).datepicker( "open" )
252+
input.val( "1/1/2014" ).datepicker( "open" )
253253
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
254-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
254+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
255255
"Keystroke esc - preset" );
256256

257-
inp.val( "02/04/2008" ).datepicker( "open" )
257+
input.val( "1/1/2014" ).datepicker( "open" )
258258
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
259259
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
260-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date(2008, 2 - 1, 4),
260+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
261261
"Keystroke esc - abandoned" );
262262

263-
// Moving by day or week
264-
inp.val( "" ).datepicker( "open" )
265-
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.LEFT })
266-
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
267-
date.setDate( date.getDate() - 1 );
268-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+left" );
269-
270-
inp.val( "" ).datepicker( "open" )
271-
.simulate( "keydown", {keyCode: $.ui.keyCode.LEFT }).
272-
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER });
273-
date.setDate( date.getDate() + 1 );
274-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke left") ;
275-
276-
inp.val( "" ).datepicker( "open" )
277-
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT}).
278-
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
263+
input.datepicker( "destroy" );
264+
});
265+
266+
asyncTest( "keyboard handling - arrow keys", function() {
267+
expect( 6 );
268+
var picker,
269+
input = $( "#datepicker" ),
270+
date = new Date();
271+
272+
function step1() {
273+
input.datepicker();
274+
picker = input.datepicker( "widget" );
275+
ok( !picker.is( ":visible" ), "datepicker closed" );
276+
input.val( "" )
277+
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
278+
279+
setTimeout(function() {
280+
ok( picker.is( ":visible" ), "Keystroke down opens datepicker" );
281+
input.datepicker( "destroy" );
282+
step2();
283+
});
284+
};
285+
286+
function step2() {
287+
input.datepicker();
288+
picker = input.datepicker( "widget" )
289+
ok( !picker.is( ":visible" ), "datepicker closed" );
290+
input.val( "" )
291+
.simulate( "keydown", { keyCode: $.ui.keyCode.UP });
292+
293+
setTimeout(function() {
294+
ok( picker.is( ":visible" ), "Keystroke up opens datepicker" );
295+
input.datepicker( "destroy" );
296+
step3();
297+
});
298+
};
299+
300+
function step3() {
301+
input.datepicker()
302+
.val( "" )
303+
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
304+
305+
setTimeout(function() {
306+
$( ":focus" )
307+
.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT })
308+
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
309+
date.setDate( date.getDate() - 1 );
310+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date,
311+
"Keystroke left to switch to previous day" );
312+
313+
input.datepicker( "destroy" );
314+
step4();
315+
}, 100);
316+
};
317+
318+
function step4() {
319+
input.datepicker()
320+
.val( "" )
321+
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
322+
323+
setTimeout(function() {
324+
$( ":focus" )
325+
.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT })
326+
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
327+
date.setDate( new Date().getDate() + 1 );
328+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date,
329+
"Keystroke right to switch to next day" );
330+
331+
input.datepicker( "destroy" );
332+
start();
333+
}, 100);
334+
};
335+
336+
step1();
337+
});
338+
339+
/*
340+
input.val( "" ).datepicker( "open" )
341+
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.RIGHT })
342+
.simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
279343
date.setDate(date.getDate() + 1);
280-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+right" );
281-
282-
inp.val( "" ).datepicker( "open" )
283-
.simulate( "keydown", {keyCode: $.ui.keyCode.RIGHT}).
284-
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
285-
date.setDate(date.getDate() - 1);
286-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke right" );
344+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+right" );
287345
288-
inp.val( "" ).datepicker( "open" )
346+
input.val( "" ).datepicker( "open" )
289347
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.UP}).
290348
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
291349
date.setDate(date.getDate() - 7);
292-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+up" );
350+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+up" );
293351
294-
inp.val( "" ).datepicker( "open" )
352+
input.val( "" ).datepicker( "open" )
295353
.simulate( "keydown", {keyCode: $.ui.keyCode.UP}).
296354
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
297355
date.setDate(date.getDate() + 7);
298-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke up" );
356+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke up" );
299357
300-
inp.val( "" ).datepicker( "open" )
358+
input.val( "" ).datepicker( "open" )
301359
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
302360
simulate( "keydown", {keyCode: $.ui.keyCode.ENTER});
303361
date.setDate(date.getDate() + 7);
304-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke ctrl+down" );
362+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+down" );
305363
306-
inp.val( "" ).datepicker( "open" )
364+
input.val( "" ).datepicker( "open" )
307365
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN })
308366
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
309367
date.setDate( date.getDate() - 7 );
310-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), date, "Keystroke down" );
368+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke down" );
311369
312370
// Moving by month or year
313-
inp.val( "02/04/2008" ).datepicker( "open" )
371+
input.val( "02/04/2008" ).datepicker( "open" )
314372
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
315373
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
316-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 1 - 1, 4 ),
374+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ),
317375
"Keystroke pgup" );
318376
319-
inp.val( "02/04/2008" ).datepicker( "open" )
377+
input.val( "02/04/2008" ).datepicker( "open" )
320378
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
321379
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
322-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 3 - 1, 4 ),
380+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 3 - 1, 4 ),
323381
"Keystroke pgdn" );
324382
325-
inp.val( "02/04/2008" ).datepicker( "open" )
383+
input.val( "02/04/2008" ).datepicker( "open" )
326384
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
327385
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
328-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 2 - 1, 4 ),
386+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 2 - 1, 4 ),
329387
"Keystroke ctrl+pgup" );
330388
331-
inp.val( "02/04/2008" ).datepicker( "open" )
389+
input.val( "02/04/2008" ).datepicker( "open" )
332390
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
333391
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER});
334-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2009, 2 - 1, 4 ),
392+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2009, 2 - 1, 4 ),
335393
"Keystroke ctrl+pgdn" );
336394
337395
// Check for moving to short months
338-
inp.val( "03/31/2008" ).datepicker( "open" )
396+
input.val( "03/31/2008" ).datepicker( "open" )
339397
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
340398
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
341-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 29 ),
399+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 29 ),
342400
"Keystroke pgup - Feb" );
343401
344-
inp.val( "01/30/2008" ).datepicker( "open" )
402+
input.val( "01/30/2008" ).datepicker( "open" )
345403
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
346404
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
347-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 29 ),
405+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 29 ),
348406
"Keystroke pgdn - Feb" );
349407
350-
inp.val( "02/29/2008" ).datepicker( "open" )
408+
input.val( "02/29/2008" ).datepicker( "open" )
351409
.simulate( "keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP })
352410
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
353-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 2 - 1, 28 ),
411+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 2 - 1, 28 ),
354412
"Keystroke ctrl+pgup - Feb" );
355413
356-
inp.val( "02/29/2008" ).datepicker( "open" )
414+
input.val( "02/29/2008" ).datepicker( "open" )
357415
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN })
358416
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
359-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2009, 2 - 1, 28 ),
417+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2009, 2 - 1, 28 ),
360418
"Keystroke ctrl+pgdn - Feb" );
361419
362420
// Goto current
363-
inp.datepicker( "option", { gotoCurrent: true })
421+
input.datepicker( "option", { gotoCurrent: true })
364422
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
365423
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
366424
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME })
367425
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
368-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
426+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 2 - 1, 4 ),
369427
"Keystroke ctrl+home" );
370428
371429
// Change steps
372-
inp.datepicker( "option", { stepMonths: 2, gotoCurrent: false })
430+
input.datepicker( "option", { stepMonths: 2, gotoCurrent: false })
373431
.datepicker( "close" ).val( "02/04/2008" ).datepicker( "open" )
374432
.late( "keydown", { keyCode: $.ui.keyCode.PAGE_UP })
375433
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
376-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2007, 12 - 1, 4 ),
434+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2007, 12 - 1, 4 ),
377435
"Keystroke pgup step 2" );
378436
379-
inp.val( "02/04/2008" ).datepicker( "open" )
437+
input.val( "02/04/2008" ).datepicker( "open" )
380438
.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN })
381439
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER });
382-
TestHelpers.datepicker.equalsDate( inp.datepicker( "getDate" ), new Date( 2008, 4 - 1, 4 ),
440+
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 4 - 1, 4 ),
383441
"Keystroke pgdn step 2" );
384-
});
442+
*/
385443

386444
test( "mouse", function() {
387445
// TODO: These tests use the old getDate() and setDate() methods. Re-activate these

‎ui/datepicker.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ $.widget( "ui.datepicker", {
5454
},
5555
_create: function() {
5656
this.date = $.date( null, this.options.dateFormat );
57+
5758
this.date.eachDay = this.options.eachDay;
5859
this.id = "ui-datepicker-" + idIncrement;
5960
idIncrement++;
@@ -192,6 +193,9 @@ $.widget( "ui.datepicker", {
192193
this.close( event );
193194
}
194195
break;
196+
case $.ui.keyCode.ENTER:
197+
this._handleKeydown( event );
198+
break;
195199
case $.ui.keyCode.DOWN:
196200
case $.ui.keyCode.UP:
197201
clearTimeout( this.closeTimer );
@@ -200,6 +204,26 @@ $.widget( "ui.datepicker", {
200204
this.grid.focus( 1 );
201205
}, 1);
202206
break;
207+
case $.ui.keyCode.HOME:
208+
if ( event.ctrlKey ) {
209+
this.date.setTime( new Date() );
210+
event.preventDefault();
211+
if ( this.isOpen ) {
212+
this.refresh();
213+
} else {
214+
this.open( event );
215+
}
216+
}
217+
break;
218+
case $.ui.keyCode.END:
219+
if ( event.ctrlKey ) {
220+
this.element.val( "" );
221+
event.preventDefault();
222+
if ( this.isOpen ) {
223+
this.close( event );
224+
}
225+
}
226+
break;
203227
}
204228
},
205229
mousedown: function( event ) {

0 commit comments

Comments
 (0)