Skip to content
Permalink
Browse files

Datepicker: Style updates

Ref #14246
Ref gh-1588
  • Loading branch information
arschmitz committed Aug 21, 2015
1 parent 9ef84a6 commit a6499c0deeff64763673e07e378576ccb0494736
Showing with 167 additions and 159 deletions.
  1. +123 −115 tests/unit/datepicker/events.js
  2. +19 −19 ui/i18n/datepicker-af.js
  3. +18 −18 ui/i18n/datepicker-ar-DZ.js
  4. +7 −7 ui/widgets/datepicker.js
@@ -4,151 +4,159 @@ define( [
"ui/widgets/datepicker"
], function( $, testHelper ) {

module("datepicker: events");
module( "datepicker: events" );

var selectedThis = null,
selectedDate = null,
selectedInst = null;

function callback(date, inst) {
function callback( date, inst ) {
selectedThis = this;
selectedDate = date;
selectedInst = inst;
}

function callback2(year, month, inst) {
function callback2( year, month, inst ) {
selectedThis = this;
selectedDate = year + "/" + month;
selectedInst = inst;
}

test("events", function() {
test( "events", function() {
expect( 26 );
var dateStr, newMonthYear, inp2,
inp = testHelper.init("#inp", {onSelect: callback}),
inp = testHelper.init( "#inp", { onSelect: callback } ),
date = new Date();

// onSelect
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(selectedThis, inp[0], "Callback selected this");
equal(selectedInst, $.data(inp[0], testHelper.PROP_NAME), "Callback selected inst");
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date");
inp.val("").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.DOWN}).
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
date.setDate(date.getDate() + 7);
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date - ctrl+down");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", date),
"Callback selected date - esc");
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( selectedThis, inp[ 0 ], "Callback selected this" );
equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback selected inst" );
equal( selectedDate, $.datepicker.formatDate( "mm/dd/yy", date ),
"Callback selected date" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.DOWN } ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
date.setDate( date.getDate() + 7 );
equal( selectedDate, $.datepicker.formatDate( "mm/dd/yy", date ),
"Callback selected date - ctrl+down" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( selectedDate, $.datepicker.formatDate( "mm/dd/yy", date ),
"Callback selected date - esc" );
dateStr = "02/04/2008";
inp.val(dateStr).datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(dateStr, selectedDate,
"onSelect is called after enter keydown");
inp.val( dateStr ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( dateStr, selectedDate,
"onSelect is called after enter keydown" );

// onChangeMonthYear
inp.datepicker("option", {onChangeMonthYear: callback2, onSelect: null}).
val("").datepicker("show");
newMonthYear = function(date) {
return date.getFullYear() + "/" + (date.getMonth() + 1);
inp.datepicker( "option", { onChangeMonthYear: callback2, onSelect: null } ).
val( "" ).datepicker( "show" );
newMonthYear = function( date ) {
return date.getFullYear() + "/" + ( date.getMonth() + 1 );
};
date = new Date();
date.setDate(1);
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 1);
equal(selectedThis, inp[0], "Callback change month/year this");
equal(selectedInst, $.data(inp[0], testHelper.PROP_NAME), "Callback change month/year inst");
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - pgup");
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - pgdn");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP});
date.setFullYear(date.getFullYear() - 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+pgup");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.HOME});
date.setFullYear(date.getFullYear() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+home");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN});
date.setFullYear(date.getFullYear() + 1);
equal(selectedDate, newMonthYear(date),
"Callback change month/year date - ctrl+pgdn");
inp.datepicker("setDate", new Date(2007, 1 - 1, 26));
equal(selectedDate, "2007/1", "Callback change month/year date - setDate");
date.setDate( 1 );
inp.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
date.setMonth( date.getMonth() - 1 );
equal( selectedThis, inp[ 0 ], "Callback change month/year this" );
equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback change month/year inst" );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - pgup" );
inp.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
date.setMonth( date.getMonth() + 1 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - pgdn" );
inp.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP } );
date.setFullYear( date.getFullYear() - 1 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - ctrl+pgup" );
inp.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.HOME } );
date.setFullYear( date.getFullYear() + 1 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - ctrl+home" );
inp.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN } );
date.setFullYear( date.getFullYear() + 1 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year date - ctrl+pgdn" );
inp.datepicker( "setDate", new Date( 2007, 1 - 1, 26 ) );
equal( selectedDate, "2007/1", "Callback change month/year date - setDate" );
selectedDate = null;
inp.datepicker("setDate", new Date(2007, 1 - 1, 12));
ok(selectedDate == null, "Callback change month/year date - setDate no change");
inp.datepicker( "setDate", new Date( 2007, 1 - 1, 12 ) );
ok( selectedDate == null, "Callback change month/year date - setDate no change" );

// onChangeMonthYear step by 2
inp.datepicker("option", {stepMonths: 2}).
datepicker("hide").val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 14);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - pgup");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP});
date.setMonth(date.getMonth() - 12);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - ctrl+pgup");
inp.simulate("keydown", {keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 2);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - pgdn");
inp.simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN});
date.setMonth(date.getMonth() + 12);
equal(selectedDate, newMonthYear(date),
"Callback change month/year by 2 date - ctrl+pgdn");
inp.datepicker( "option", { stepMonths: 2 } ).
datepicker( "hide" ).val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } );
date.setMonth( date.getMonth() - 14 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year by 2 date - pgup" );
inp.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP } );
date.setMonth( date.getMonth() - 12 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year by 2 date - ctrl+pgup" );
inp.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } );
date.setMonth( date.getMonth() + 2 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year by 2 date - pgdn" );
inp.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_DOWN } );
date.setMonth( date.getMonth() + 12 );
equal( selectedDate, newMonthYear( date ),
"Callback change month/year by 2 date - ctrl+pgdn" );

// onClose
inp.datepicker("option", {onClose: callback, onChangeMonthYear: null, stepMonths: 1}).
val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedThis, inp[0], "Callback close this");
equal(selectedInst, $.data(inp[0], testHelper.PROP_NAME), "Callback close inst");
equal(selectedDate, "", "Callback close date - esc");
inp.val("").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ENTER});
equal(selectedDate, $.datepicker.formatDate("mm/dd/yy", new Date()),
"Callback close date - enter");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
equal(selectedDate, "02/04/2008", "Callback close date - preset");
inp.val("02/04/2008").datepicker("show").
simulate("keydown", {ctrlKey: true, keyCode: $.ui.keyCode.END});
equal(selectedDate, "", "Callback close date - ctrl+end");

inp2 = testHelper.init("#inp2");
inp2.datepicker().datepicker("option", {onClose: callback}).datepicker("show");
inp.datepicker("show");
equal(selectedThis, inp2[0], "Callback close this");
});

test("beforeShowDay-getDate", function() {
inp.datepicker( "option", { onClose: callback, onChangeMonthYear: null, stepMonths: 1 } ).
val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( selectedThis, inp[ 0 ], "Callback close this" );
equal( selectedInst, $.data( inp[ 0 ], testHelper.PROP_NAME ), "Callback close inst" );
equal( selectedDate, "", "Callback close date - esc" );
inp.val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( selectedDate, $.datepicker.formatDate( "mm/dd/yy", new Date() ),
"Callback close date - enter" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
equal( selectedDate, "02/04/2008", "Callback close date - preset" );
inp.val( "02/04/2008" ).datepicker( "show" ).
simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END } );
equal( selectedDate, "", "Callback close date - ctrl+end" );

inp2 = testHelper.init( "#inp2" );
inp2.datepicker().datepicker( "option", { onClose: callback } ).datepicker( "show" );
inp.datepicker( "show" );
equal( selectedThis, inp2[ 0 ], "Callback close this" );
} );

test( "beforeShowDay-getDate", function() {
expect( 3 );
var inp = testHelper.init("#inp", {beforeShowDay: function() { inp.datepicker("getDate"); return [true, ""]; }}),
dp = $("#ui-datepicker-div");
inp.val("01/01/2010").datepicker("show");
var inp = testHelper.init( "#inp", { beforeShowDay: function() { inp.datepicker( "getDate" ); return [ true, "" ]; } } ),
dp = $( "#ui-datepicker-div" );
inp.val( "01/01/2010" ).datepicker( "show" );

// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
// support: IE <9, jQuery <1.8
equal( $( "div.ui-datepicker-title" ).text(),

// Support: IE <9, jQuery <1.8
// In IE7/8 with jQuery <1.8, encoded spaces behave in strange ways
$( "<span>January&#xa0;2010</span>" ).text(), "Initial month");
$("a.ui-datepicker-next", dp).trigger( "click" );
$("a.ui-datepicker-next", dp).trigger( "click" );
$( "<span>January&#xa0;2010</span>" ).text(), "Initial month" );
$( "a.ui-datepicker-next", dp ).trigger( "click" );
$( "a.ui-datepicker-next", dp ).trigger( "click" );

// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
$( "<span>March&#xa0;2010</span>" ).text(), "After next clicks");
inp.datepicker("hide").datepicker("show");
$("a.ui-datepicker-prev", dp).trigger( "click" );
$("a.ui-datepicker-prev", dp).trigger( "click" );
equal( $( "div.ui-datepicker-title" ).text(),
$( "<span>March&#xa0;2010</span>" ).text(), "After next clicks" );
inp.datepicker( "hide" ).datepicker( "show" );
$( "a.ui-datepicker-prev", dp ).trigger( "click" );
$( "a.ui-datepicker-prev", dp ).trigger( "click" );

// contains non-breaking space
equal($("div.ui-datepicker-title").text(),
$( "<span>November&#xa0;2009</span>" ).text(), "After prev clicks");
inp.datepicker("hide");
});
equal( $( "div.ui-datepicker-title" ).text(),
$( "<span>November&#xa0;2009</span>" ).text(), "After prev clicks" );
inp.datepicker( "hide" );
} );

} );
@@ -1,37 +1,37 @@
/* Afrikaans initialisation for the jQuery UI date picker plugin. */
/* Written by Renier Pretorius. */
(function( factory ) {
( function( factory ) {
if ( typeof define === "function" && define.amd ) {

// AMD. Register as an anonymous module.
define([ "../widgets/datepicker" ], factory );
define( [ "../widgets/datepicker" ], factory );
} else {

// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
}( function( datepicker ) {

datepicker.regional['af'] = {
closeText: 'Selekteer',
prevText: 'Vorige',
nextText: 'Volgende',
currentText: 'Vandag',
monthNames: ['Januarie','Februarie','Maart','April','Mei','Junie',
'Julie','Augustus','September','Oktober','November','Desember'],
monthNamesShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun',
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
dayNames: ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
dayNamesShort: ['Son', 'Maa', 'Din', 'Woe', 'Don', 'Vry', 'Sat'],
dayNamesMin: ['So','Ma','Di','Wo','Do','Vr','Sa'],
datepicker.regional[ "af" ] = {
closeText: "Selekteer",
prevText: "Vorige",
nextText: "Volgende",
currentText: "Vandag",
monthNames: [ "Januarie","Februarie","Maart","April","Mei","Junie",
"Julie","Augustus","September","Oktober","November","Desember" ],
monthNamesShort: [ "Jan", "Feb", "Mrt", "Apr", "Mei", "Jun",
"Jul", "Aug", "Sep", "Okt", "Nov", "Des" ],
dayNames: [ "Sondag", "Maandag", "Dinsdag", 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag' ],
dayNamesShort: [ 'Son', 'Maa', 'Din', 'Woe', 'Don', 'Vry', 'Sat' ],
dayNamesMin: [ 'So','Ma','Di','Wo','Do','Vr','Sa' ],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['af']);
yearSuffix: '' };
datepicker.setDefaults( datepicker.regional[ 'af' ] );

return datepicker.regional['af'];
return datepicker.regional[ 'af' ];

}));
} ) );
@@ -1,37 +1,37 @@
/* Algerian Arabic Translation for jQuery UI date picker plugin. (can be used for Tunisia)*/
/* Mohamed Cherif BOUCHELAGHEM -- cherifbouchelaghem@yahoo.fr */

(function( factory ) {
( function( factory ) {
if ( typeof define === "function" && define.amd ) {

// AMD. Register as an anonymous module.
define([ "../widgets/datepicker" ], factory );
define( [ "../widgets/datepicker" ], factory );
} else {

// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
}( function( datepicker ) {

datepicker.regional['ar-DZ'] = {
closeText: 'إغلاق',
prevText: '&#x3C;السابق',
nextText: 'التالي&#x3E;',
currentText: 'اليوم',
monthNames: ['جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان',
'جويلية', 'أوت', 'سبتمبر','أكتوبر', 'نوفمبر', 'ديسمبر'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesMin: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
datepicker.regional[ "ar-DZ" ] = {
closeText: "إغلاق",
prevText: "&#x3C;السابق",
nextText: "التالي&#x3E;",
currentText: "اليوم",
monthNames: [ "جانفي", "فيفري", "مارس", "أفريل", "ماي", "جوان",
"جويلية", "أوت", "سبتمبر","أكتوبر", "نوفمبر", "ديسمبر" ],
monthNamesShort: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", '12' ],
dayNames: [ 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت' ],
dayNamesShort: [ 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت' ],
dayNamesMin: [ 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت' ],
weekHeader: 'أسبوع',
dateFormat: 'dd/mm/yy',
firstDay: 6,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['ar-DZ']);
yearSuffix: '' };
datepicker.setDefaults( datepicker.regional[ 'ar-DZ' ] );

return datepicker.regional['ar-DZ'];
return datepicker.regional[ 'ar-DZ' ];

}));
} ) );

0 comments on commit a6499c0

Please sign in to comment.
You can’t perform that action at this time.