Datepicker: Style updates

Ref #14246
Ref gh-1588
This commit is contained in:
Alexander Schmitz 2015-08-21 00:11:33 -04:00
parent 9ef84a6bf0
commit a6499c0dee
4 changed files with 165 additions and 157 deletions

View File

@ -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");
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");
});
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() {
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" );
} );
} );

View File

@ -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' ];
}));
} ) );

View File

@ -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' ];
}));
} ) );

View File

@ -360,7 +360,7 @@ $.extend(Datepicker.prototype, {
[(browserWidth / 2) - 100 + scrollX, (browserHeight / 2) - 150 + scrollY];
}
// move input on screen for focus, but hidden behind dialog
// Move input on screen for focus, but hidden behind dialog
this._dialogInput.css("left", (this._pos[0] + 20) + "px").css("top", this._pos[1] + "px");
inst.settings.onSelect = onSelect;
this._inDialog = true;
@ -547,7 +547,7 @@ $.extend(Datepicker.prototype, {
}
},
// change method deprecated
// Change method deprecated
_changeDatepicker: function(target, name, value) {
this._optionDatepicker(target, name, value);
},
@ -611,7 +611,7 @@ $.extend(Datepicker.prototype, {
if (onSelect) {
dateStr = $.datepicker._formatDate(inst);
// trigger custom callback
// Trigger custom callback
onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
} else {
$.datepicker._hideDatepicker();
@ -836,7 +836,7 @@ $.extend(Datepicker.prototype, {
inst.input.trigger( "focus" );
}
// deffered render of the years select (to avoid flashes on Firefox)
// Deffered render of the years select (to avoid flashes on Firefox)
if( inst.yearshtml ){
origyearshtml = inst.yearshtml;
setTimeout(function(){
@ -869,7 +869,7 @@ $.extend(Datepicker.prototype, {
offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;
// now check if datepicker is showing outside window viewport - move to a better place if so.
// Now check if datepicker is showing outside window viewport - move to a better place if so.
offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
Math.abs(offset.left + dpWidth - viewWidth) : 0);
offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
@ -1824,7 +1824,7 @@ $.extend(Datepicker.prototype, {
html = "<div class='ui-datepicker-title'>",
monthHtml = "";
// month selection
// Month selection
if (secondary || !changeMonth) {
monthHtml += "<span class='ui-datepicker-month'>" + monthNames[drawMonth] + "</span>";
} else {
@ -1845,7 +1845,7 @@ $.extend(Datepicker.prototype, {
html += monthHtml + (secondary || !(changeMonth && changeYear) ? "&#xa0;" : "");
}
// year selection
// Year selection
if ( !inst.yearshtml ) {
inst.yearshtml = "";
if (secondary || !changeYear) {