Datepicker: Use Globalize 1.0.0

This commit is contained in:
Rafael Xavier de Souza 2013-11-30 10:22:17 -02:00 committed by Scott González
parent ff4bfd643d
commit ffc8ab2710
15 changed files with 4935 additions and 2279 deletions

View File

@ -18,7 +18,24 @@
$(function() { $(function() {
$( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker();
$( "#format" ).change(function() { $( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); var format;
switch( $( this ).val() ) {
case "short":
$( "#datepicker" ).datepicker( "option", "dateFormat", {
date: "short"
});
break;
case "long":
$( "#datepicker" ).datepicker( "option", "dateFormat", {
date: "long"
});
break;
case "iso":
$( "#datepicker" ).datepicker( "option", "dateFormat", {
pattern: "yyyy-MM-dd"
});
break;
}
}); });
}); });
</script> </script>
@ -29,9 +46,9 @@
<p>Format options:<br /> <p>Format options:<br />
<select id="format"> <select id="format">
<option value="d">Default - M/d/yyyy</option> <option value="short">Short - M/d/yy in "en" locale</option>
<option value="D">Long - dddd, MMMM dd, yyyy</option> <option value="long">Long - MMMM d, y in "en" locale</option>
<option value="yyyy-MM-dd">ISO 8601 - yyyy-MM-dd</option> <option value="iso">ISO 8601 - yyyy-MM-dd</option>
</select> </select>
</p> </p>

View File

@ -6,8 +6,6 @@
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script> <script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script> <script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize.culture.de-DE.js"></script>
<script src="../../external/globalize/globalize.culture.ja-JP.js"></script>
<script src="../../external/date.js"></script> <script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script> <script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
@ -18,11 +16,11 @@
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
$(function() { $(function() {
Globalize.culture( "de-DE" ); Globalize.locale( "de-DE" );
$( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker();
$( "#locale" ).change(function() { $( "#locale" ).change(function() {
// TODO refresh the current value to convert to the selected culture // TODO refresh the current value to convert to the selected locale
Globalize.culture( $(this).val() ); Globalize.locale( $(this).val() );
}); });
}); });
</script> </script>
@ -32,7 +30,6 @@
<p>Date: <input type="text" id="datepicker"/>&nbsp; <p>Date: <input type="text" id="datepicker"/>&nbsp;
<select id="locale"> <select id="locale">
<option value="de-DE" selected>German (Deutsch)</option> <option value="de-DE" selected>German (Deutsch)</option>
<option value="ja-JP">Japanese (日本語</option>
<option value="en">English</option> <option value="en">English</option>
</select></p> </select></p>

View File

@ -17,8 +17,7 @@
<script> <script>
$(function() { $(function() {
$( "#datepicker" ).datepicker({ $( "#datepicker" ).datepicker({
showWeek: true, showWeek: true
firstDay: 1
}); });
}); });
</script> </script>
@ -28,10 +27,9 @@
<p>Date: <input type="text" id="datepicker"></p> <p>Date: <input type="text" id="datepicker"></p>
<div class="demo-description"> <div class="demo-description">
<p>The datepicker can show the week of the year. The default calculation follows <p>The datepicker can show the week of the year. The calculation follows
the ISO 8601 definition: the week starts on Monday, the first week of the year <a href="http://www.unicode.org/reports/tr35 /tr35-dates.html#Date_Field_Symbol_Table">Unicode CLDR specification</a>.
contains the first Thursday of the year. This means that some days from one This means that some days from one year may be placed into weeks 'belonging' to another year.</p>
year may be placed into weeks 'belonging' to another year.</p>
</div> </div>
</body> </body>
</html> </html>

73
external/date.js vendored
View File

@ -6,25 +6,31 @@
*/ */
(function( $, undefined ) { (function( $, undefined ) {
$.date = function( datestring, formatstring ) { var weekdays = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ],
//TODO: Need to refactor $.date to be a constructor, move the methods to a prototype. weekdaysRev = {
var calendar = Globalize.culture().calendar, "sun": 0,
format = formatstring ? formatstring : calendar.patterns.d, "mon": 1,
date = datestring ? Globalize.parseDate( datestring, format ) : new Date(); "tue": 2,
"wed": 3,
"thu": 4,
"fri": 5,
"sat": 6
};
if ( !date ) { Globalize.locale( "en" );
date = new Date();
$.date = function( date, globalFormat ) {
//TODO: Need to refactor $.date to be a constructor, move the methods to a prototype.
if ( typeof date === "string" && date.length ) {
date = Globalize.parseDate( date, globalFormat );
} }
date = date || new Date();
return { return {
refresh: function() { setFormat: function( format ) {
calendar = Globalize.culture().calendar; if ( format ) {
format = formatstring || calendar.patterns.d; globalFormat = format;
return this;
},
setFormat: function( formatstring ) {
if ( formatstring ) {
format = formatstring;
} }
return this; return this;
}, },
@ -82,7 +88,7 @@ $.date = function( datestring, formatstring ) {
return 32 - new Date( year, month, 32 ).getDate(); return 32 - new Date( year, month, 32 ).getDate();
}, },
monthName: function() { monthName: function() {
return calendar.months.names[ date.getMonth() ]; return Globalize.format( date, { pattern: "MMMM" } );
}, },
day: function() { day: function() {
return date.getDate(); return date.getDate();
@ -101,10 +107,10 @@ $.date = function( datestring, formatstring ) {
weekdays: function() { weekdays: function() {
var result = []; var result = [];
for ( var dow = 0; dow < 7; dow++ ) { for ( var dow = 0; dow < 7; dow++ ) {
var day = ( dow + calendar.firstDay ) % 7; var day = ( dow + weekdaysRev[ Globalize.locale().supplemental.weekData.firstDay() ] ) % 7;
result.push({ result.push({
shortname: calendar.days.namesShort[ day ], shortname: Globalize.locale().main([ "dates/calendars/gregorian/days/format/abbreviated", weekdays[ day ] ]),
fullname: calendar.days.names[ day ] fullname: Globalize.locale().main([ "dates/calendars/gregorian/days/format/wide", weekdays[ day ] ]),
}); });
} }
return result; return result;
@ -113,12 +119,12 @@ $.date = function( datestring, formatstring ) {
var result = [], var result = [],
today = $.date(), today = $.date(),
firstDayOfMonth = new Date( this.year(), date.getMonth(), 1 ).getDay(), firstDayOfMonth = new Date( this.year(), date.getMonth(), 1 ).getDay(),
leadDays = ( firstDayOfMonth - calendar.firstDay + 7 ) % 7, leadDays = ( firstDayOfMonth - weekdaysRev[ Globalize.locale().supplemental.weekData.firstDay() ] + 7 ) % 7,
rows = Math.ceil( ( leadDays + this.daysInMonth() ) / 7 ), rows = Math.ceil( ( leadDays + this.daysInMonth() ) / 7 ),
printDate = new Date( this.year(), date.getMonth(), 1 - leadDays ); printDate = new Date( this.year(), date.getMonth(), 1 - leadDays );
for ( var row = 0; row < rows; row++ ) { for ( var row = 0; row < rows; row++ ) {
var week = result[ result.length ] = { var week = result[ result.length ] = {
number: this.iso8601Week( printDate ), number: Globalize.format( printDate, { pattern: "w" } ),
days: [] days: []
}; };
for ( var dayx = 0; dayx < 7; dayx++ ) { for ( var dayx = 0; dayx < 7; dayx++ ) {
@ -153,16 +159,6 @@ $.date = function( datestring, formatstring ) {
result[ result.length - 1 ].last = true; result[ result.length - 1 ].last = true;
return result; return result;
}, },
iso8601Week: function(date) {
var checkDate = new Date( date.getTime() );
// Find Thursday of this week starting on Monday
checkDate.setDate( checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ) );
var time = checkDate.getTime();
// Compare with Jan 1
checkDate.setMonth( 0 );
checkDate.setDate( 1 );
return Math.floor( Math.round( ( time - checkDate ) / 86400000) / 7 ) + 1;
},
select: function() { select: function() {
this.selected = this.clone(); this.selected = this.clone();
return this; return this;
@ -170,27 +166,20 @@ $.date = function( datestring, formatstring ) {
clone: function() { clone: function() {
return $.date( new Date(date.getFullYear(), date.getMonth(), return $.date( new Date(date.getFullYear(), date.getMonth(),
date.getDate(), date.getHours(), date.getDate(), date.getHours(),
date.getMinutes(), date.getSeconds()), formatstring ); date.getMinutes(), date.getSeconds()), globalFormat );
}, },
// TODO compare year, month, day each for better performance // TODO compare year, month, day each for better performance
equal: function( other ) { equal: function( other ) {
function format( date ) { function format( date ) {
return Globalize.format( date, "d" ); return Globalize.format( date, { pattern: "yyyyMMdd" } );
} }
return format( date ) === format( other ); return format( date ) === format( other );
}, },
date: function() { date: function() {
return date; return date;
}, },
format: function( formatstring ) { format: function( format ) {
return Globalize.format( date, formatstring ? formatstring : format ); return Globalize.format( date, format || globalFormat );
},
calendar: function( newcalendar ) {
if ( newcalendar ) {
calendar = newcalendar;
return this;
}
return calendar;
} }
}; };
}; };

View File

@ -1,81 +0,0 @@
/*
* Globalize Culture de-DE
*
* http://github.com/jquery/globalize
*
* Copyright Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* This file was generated by the Globalize Culture Generator
* Translation: bugs found in this file need to be fixed in the generator
*/
(function( window, undefined ) {
var Globalize;
if ( typeof require !== "undefined"
&& typeof exports !== "undefined"
&& typeof module !== "undefined" ) {
// Assume CommonJS
Globalize = require( "globalize" );
} else {
// Global variable
Globalize = window.Globalize;
}
Globalize.addCultureInfo( "de-DE", "default", {
name: "de-DE",
englishName: "German (Germany)",
nativeName: "Deutsch (Deutschland)",
language: "de",
numberFormat: {
",": ".",
".": ",",
NaN: "n. def.",
negativeInfinity: "-unendlich",
positiveInfinity: "+unendlich",
percent: {
pattern: ["-n%","n%"],
",": ".",
".": ","
},
currency: {
pattern: ["-n $","n $"],
",": ".",
".": ",",
symbol: "€"
}
},
calendars: {
standard: {
"/": ".",
firstDay: 1,
days: {
names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
},
months: {
names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""],
namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
},
AM: null,
PM: null,
eras: [{"name":"n. Chr.","start":null,"offset":0}],
patterns: {
d: "dd.MM.yyyy",
D: "dddd, d. MMMM yyyy",
t: "HH:mm",
T: "HH:mm:ss",
f: "dddd, d. MMMM yyyy HH:mm",
F: "dddd, d. MMMM yyyy HH:mm:ss",
M: "dd MMMM",
Y: "MMMM yyyy"
}
}
}
});
}( this ));

View File

@ -1,100 +0,0 @@
/*
* Globalize Culture ja-JP
*
* http://github.com/jquery/globalize
*
* Copyright Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* This file was generated by the Globalize Culture Generator
* Translation: bugs found in this file need to be fixed in the generator
*/
(function( window, undefined ) {
var Globalize;
if ( typeof require !== "undefined"
&& typeof exports !== "undefined"
&& typeof module !== "undefined" ) {
// Assume CommonJS
Globalize = require( "globalize" );
} else {
// Global variable
Globalize = window.Globalize;
}
Globalize.addCultureInfo( "ja-JP", "default", {
name: "ja-JP",
englishName: "Japanese (Japan)",
nativeName: "日本語 (日本)",
language: "ja",
numberFormat: {
NaN: "NaN (非数値)",
negativeInfinity: "-∞",
positiveInfinity: "+∞",
percent: {
pattern: ["-n%","n%"]
},
currency: {
pattern: ["-$n","$n"],
decimals: 0,
symbol: "¥"
}
},
calendars: {
standard: {
days: {
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
namesAbbr: ["日","月","火","水","木","金","土"],
namesShort: ["日","月","火","水","木","金","土"]
},
months: {
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
},
AM: ["午前","午前","午前"],
PM: ["午後","午後","午後"],
eras: [{"name":"西暦","start":null,"offset":0}],
patterns: {
d: "yyyy/MM/dd",
D: "yyyy'年'M'月'd'日'",
t: "H:mm",
T: "H:mm:ss",
f: "yyyy'年'M'月'd'日' H:mm",
F: "yyyy'年'M'月'd'日' H:mm:ss",
M: "M'月'd'日'",
Y: "yyyy'年'M'月'"
}
},
Japanese: {
name: "Japanese",
days: {
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
namesAbbr: ["日","月","火","水","木","金","土"],
namesShort: ["日","月","火","水","木","金","土"]
},
months: {
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
},
AM: ["午前","午前","午前"],
PM: ["午後","午後","午後"],
eras: [{"name":"平成","start":null,"offset":1867},{"name":"昭和","start":-1812153600000,"offset":1911},{"name":"大正","start":-1357603200000,"offset":1925},{"name":"明治","start":60022080000,"offset":1988}],
twoDigitYearMax: 99,
patterns: {
d: "gg y/M/d",
D: "gg y'年'M'月'd'日'",
t: "H:mm",
T: "H:mm:ss",
f: "gg y'年'M'月'd'日' H:mm",
F: "gg y'年'M'月'd'日' H:mm:ss",
M: "M'月'd'日'",
Y: "gg y'年'M'月'"
}
}
}
});
}( this ));

File diff suppressed because it is too large Load Diff

3549
external/localization.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -12,9 +12,9 @@
<script> <script>
TestHelpers.loadResources({ TestHelpers.loadResources({
js: [ js: [
"external/date.js",
"external/globalize.js", "external/globalize.js",
"external/globalize.culture.de-DE.js" "external/localization.js",
"external/date.js"
] ]
}); });
</script> </script>

View File

@ -53,29 +53,28 @@ test("Date Adjustments - Leap Year Edge Cases", 1, function(){
test("List days of Week", 2, function(){ test("List days of Week", 2, function(){
var date = $.date(), var date = $.date(),
offset0 = [ offset0 = [
{ "fullname": "Sunday", "shortname": "Su" }, { "fullname": "Sunday", "shortname": "Sun" },
{ "fullname": "Monday", "shortname": "Mo" }, { "fullname": "Monday", "shortname": "Mon" },
{ "fullname": "Tuesday", "shortname": "Tu" }, { "fullname": "Tuesday", "shortname": "Tue" },
{ "fullname": "Wednesday", "shortname": "We" }, { "fullname": "Wednesday", "shortname": "Wed" },
{ "fullname": "Thursday", "shortname": "Th" }, { "fullname": "Thursday", "shortname": "Thu" },
{ "fullname": "Friday", "shortname": "Fr" }, { "fullname": "Friday", "shortname": "Fri" },
{ "fullname": "Saturday", "shortname": "Sa" } { "fullname": "Saturday", "shortname": "Sat" }
], ],
offset1 = [ offset1 = [
{ "fullname": "Montag", "shortname": "Mo" }, { "fullname": "Montag", "shortname": "Mo." },
{ "fullname": "Dienstag", "shortname": "Di" }, { "fullname": "Dienstag", "shortname": "Di." },
{ "fullname": "Mittwoch", "shortname": "Mi" }, { "fullname": "Mittwoch", "shortname": "Mi." },
{ "fullname": "Donnerstag", "shortname": "Do" }, { "fullname": "Donnerstag", "shortname": "Do." },
{ "fullname": "Freitag", "shortname": "Fr" }, { "fullname": "Freitag", "shortname": "Fr." },
{ "fullname": "Samstag", "shortname": "Sa" }, { "fullname": "Samstag", "shortname": "Sa." },
{ "fullname": "Sonntag", "shortname": "So" } { "fullname": "Sonntag", "shortname": "So." }
]; ];
deepEqual(date.weekdays(), offset0, "Get weekdays with start of day on 0 (English)"); deepEqual(date.weekdays(), offset0, "Get weekdays with start of day on 0 (English)");
Globalize.culture( "de-DE" ); Globalize.locale( "de-DE" );
date.refresh();
deepEqual(date.weekdays(), offset1, "Get weekdays with start of day on 1 (Germany)"); deepEqual(date.weekdays(), offset1, "Get weekdays with start of day on 1 (Germany)");
//Revert Globalize changes back to English //Revert Globalize changes back to English
Globalize.culture("en-EN"); Globalize.locale( "en" );
}); });
test("Leap Year Check", 8, function(){ test("Leap Year Check", 8, function(){
@ -101,10 +100,9 @@ test("Days in Month", 3, function(){
test("Month Name", 2, function(){ test("Month Name", 2, function(){
var date = $.date(); var date = $.date();
equal(date.setMonth(3).monthName(), "April", "Month name return April (English)"); equal(date.setMonth(3).monthName(), "April", "Month name return April (English)");
Globalize.culture( "de-DE" ); Globalize.locale( "de-DE" );
date.refresh();
equal(date.setMonth(2).monthName(), "März", "Month name return March (German)"); equal(date.setMonth(2).monthName(), "März", "Month name return March (German)");
Globalize.culture("en-EN"); Globalize.locale( "en" );
}); });
@ -154,13 +152,6 @@ test( "Months", 5, function(){
ok( firstMonth.month() === lastMonth.month() - 1 ); ok( firstMonth.month() === lastMonth.month() - 1 );
}); });
test("iso8601Week", 2, function(){
var date = $.date();
//date.setFullDate(2012, 0, 8);
equal(date.iso8601Week(new Date(2012, 0, 8)), 1, "Test first week is 1");
equal(date.iso8601Week(new Date(2012, 11, 31)), 1, "Test last week is 1 in next year");
});
test("Equal", 4, function(){ test("Equal", 4, function(){
var date = $.date(); var date = $.date();
date.setFullDate(2012, 9, 16); date.setFullDate(2012, 9, 16);
@ -178,45 +169,8 @@ test("Date", 1, function(){
test("Format", 4, function(){ test("Format", 4, function(){
var date = $.date(); var date = $.date();
date.setFullDate(2012, 9, 16); date.setFullDate(2012, 9, 16);
equal(date.format(), "10/16/2012", "Checking default US format"); equal(date.format({ date: "short" }), "10/16/12", "Checking default US format");
equal(date.format("yyyy/MM/dd"), "2012/10/16", "Checking yyyy/MM/dd format"); equal(date.format({ pattern: "yyyy/MM/dd" }), "2012/10/16", "Checking yyyy/MM/dd format");
equal(date.format("yy/dd/MM"), "12/16/10", "Checking yy/dd/MM format"); equal(date.format({ pattern: "yy/dd/MM" }), "12/16/10", "Checking yy/dd/MM format");
equal(date.format("MMMM dd, yyyy"), "October 16, 2012", "Checking MMMM dd, yyyy format"); equal(date.format({ pattern: "MMMM dd, yyyy" }), "October 16, 2012", "Checking MMMM dd, yyyy format");
});
test("Calendar", 3, function(){
var date = $.date(),
de_cal = {
calendars: {
standard: {
"/": ".",
firstDay: 1,
days: {
names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
},
months: {
names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""],
namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
},
AM: null,
PM: null,
eras: [{"name":"n. Chr.","start":null,"offset":0}],
patterns: {
d: "dd.MM.yyyy",
D: "dddd, d. MMMM yyyy",
t: "HH:mm",
T: "HH:mm:ss",
f: "dddd, d. MMMM yyyy HH:mm",
F: "dddd, d. MMMM yyyy HH:mm:ss",
M: "dd MMMM",
Y: "MMMM yyyy"
}
}
}
};
ok(date.calendar(), "Calendar type returned");
ok(date.calendar(de_cal), "Calendar type changed");
deepEqual(date.calendar(), de_cal, "Calendar change verified");
}); });

View File

@ -8,8 +8,8 @@
<link rel="stylesheet" href="../../../external/qunit/qunit.css"> <link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script> <script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script> <script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../../../external/date.js"></script>
<script src="../../../external/globalize/globalize.js"></script> <script src="../../../external/globalize/globalize.js"></script>
<script src="../../../external/date.js"></script>
<script src="../../../external/localization.js"></script> <script src="../../../external/localization.js"></script>
<script src="../testsuite.js"></script> <script src="../testsuite.js"></script>
<script> <script>
@ -21,10 +21,6 @@
"ui/button.js", "ui/button.js",
"ui/position.js", "ui/position.js",
"ui/datepicker.js" "ui/datepicker.js"
/* TODO: Replace with Globalize cultures
"ui/i18n/datepicker-fr.js",
"ui/i18n/datepicker-he.js",
"ui/i18n/datepicker-zh-CN.js"*/
] ]
}); });
</script> </script>

View File

@ -7,7 +7,7 @@ TestHelpers.testJshint( "datepicker" );
test( "input's value determines starting date", function() { test( "input's value determines starting date", function() {
expect( 3 ); expect( 3 );
var input = $( "#datepicker" ).val( "1/1/2014" ).datepicker(), var input = $( "#datepicker" ).val( "1/1/14" ).datepicker(),
picker = input.datepicker( "widget" ); picker = input.datepicker( "widget" );
input.datepicker( "open" ); input.datepicker( "open" );
@ -228,19 +228,19 @@ test( "Keyboard handling", function() {
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke enter" ); TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke enter" );
// Enter = Select today's date by default // Enter = Select today's date by default
input.val( "1/1/2014" ).datepicker( "open" ) input.val( "1/1/14" ).datepicker( "open" )
.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); .simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
"Keystroke enter - preset" ); "Keystroke enter - preset" );
// Control + Home = Change the calendar to the current month // Control + Home = Change the calendar to the current month
input.val( "1/1/2014" ).datepicker( "open" ) input.val( "1/1/14" ).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( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+home" ); TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date, "Keystroke ctrl+home" );
// Control + End = Close the calendar and clear the input // Control + End = Close the calendar and clear the input
input.val( "1/1/2014" ).datepicker( "open" ) input.val( "1/1/14" ).datepicker( "open" )
.simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END }); .simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.END });
equal( input.val(), "", "Keystroke ctrl+end" ); equal( input.val(), "", "Keystroke ctrl+end" );
@ -249,12 +249,12 @@ test( "Keyboard handling", function() {
input.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE }); input.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
ok( !instance.isOpen, "escape closes the datepicker" ); ok( !instance.isOpen, "escape closes the datepicker" );
input.val( "1/1/2014" ).datepicker( "open" ) input.val( "1/1/14" ).datepicker( "open" )
.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE }); .simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),
"Keystroke esc - preset" ); "Keystroke esc - preset" );
input.val( "1/1/2014" ).datepicker( "open" ) input.val( "1/1/14" ).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( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ),

View File

@ -69,16 +69,16 @@ test( "value", function() {
picker = input.datepicker( "widget" ), picker = input.datepicker( "widget" ),
inline = $( "#inline" ).datepicker(); inline = $( "#inline" ).datepicker();
input.datepicker( "value", "1/1/2014" ); input.datepicker( "value", "1/1/14" );
equal( input.val(), "1/1/2014", "input's value set" ); equal( input.val(), "1/1/14", "input's value set" );
ok( picker.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ), ok( picker.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ),
"first day marked as selected" ); "first day marked as selected" );
equal( input.datepicker( "value" ), "1/1/2014", "getter" ); equal( input.datepicker( "value" ), "1/1/14", "getter" );
inline.datepicker( "value", "1/1/2014" ); inline.datepicker( "value", "1/1/14" );
ok( inline.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ), ok( inline.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ),
"first day marked as selected" ); "first day marked as selected" );
equal( inline.datepicker( "value" ), "1/1/2014", "getter" ); equal( inline.datepicker( "value" ), "1/1/14", "getter" );
// TODO: Handle for invalid values. // TODO: Handle for invalid values.
@ -93,7 +93,7 @@ test( "valueAsDate", function() {
inline = $( "#inline" ).datepicker(); inline = $( "#inline" ).datepicker();
input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) ); input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
equal( input.val(), "1/1/2014", "input's value set" ); equal( input.val(), "1/1/14", "input's value set" );
ok( picker.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ), ok( picker.find( "a[data-timestamp]:first" ).hasClass( "ui-state-focus" ),
"first day marked as selected" ); "first day marked as selected" );
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ),

View File

@ -42,16 +42,16 @@ test( "appendTo", function() {
test( "dateFormat", function() { test( "dateFormat", function() {
expect( 2 ); expect( 2 );
var input = $( "#datepicker" ).val( "1/1/2014" ).datepicker(), var input = $( "#datepicker" ).val( "1/1/14" ).datepicker(),
picker = input.datepicker( "widget" ), picker = input.datepicker( "widget" ),
firstDayLink = picker.find( "td[id]:first a" ); firstDayLink = picker.find( "td[id]:first a" );
input.datepicker( "open" ); input.datepicker( "open" );
firstDayLink.trigger( "mousedown" ); firstDayLink.trigger( "mousedown" );
equal( input.val(), "1/1/2014", "default formatting" ); equal( input.val(), "1/1/14", "default formatting" );
input.datepicker( "option", "dateFormat", "D" ); input.datepicker( "option", "dateFormat", { date: "full" } );
equal( input.val(), "Wednesday, January 01, 2014", "updated formatting" ); equal( input.val(), "Wednesday, January 1, 2014", "updated formatting" );
input.datepicker( "destroy" ); input.datepicker( "destroy" );
}); });

View File

@ -58,6 +58,7 @@ $.widget( "ui.datepicker", {
select: null select: null
}, },
_create: function() { _create: function() {
this.options.dateFormat = this.options.dateFormat || { date: "short" };
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;
@ -309,8 +310,6 @@ $.widget( "ui.datepicker", {
return element; return element;
}, },
_createTmpl: function() { _createTmpl: function() {
this.date.refresh();
this._createDatepicker(); this._createDatepicker();
this.picker.find( "button" ).button(); this.picker.find( "button" ).button();
@ -351,6 +350,7 @@ $.widget( "ui.datepicker", {
i = 0; i = 0;
for ( i; i < months.length; i++ ) { for ( i; i < months.length; i++ ) {
// TODO Shouldn't we pass date as a parameter to build* fns instead of setting this.date?
this.date = months[ i ]; this.date = months[ i ];
headerClass = months[ i ].first ? "ui-corner-left" : headerClass = months[ i ].first ? "ui-corner-left" :
months[ i ].last ? "ui-corner-right" : ""; months[ i ].last ? "ui-corner-right" : "";
@ -384,7 +384,7 @@ $.widget( "ui.datepicker", {
"</div>"; "</div>";
}, },
_buildPreviousLink: function() { _buildPreviousLink: function() {
var labels = Globalize.localize( "datepicker" ); var labels = Globalize.translate( "datepicker" );
return "<button class='ui-datepicker-prev ui-corner-all' " + return "<button class='ui-datepicker-prev ui-corner-all' " +
"title='" + labels.prevText + "'>" + "title='" + labels.prevText + "'>" +
"<span class='ui-icon ui-icon-circle-triangle-w'>" + "<span class='ui-icon ui-icon-circle-triangle-w'>" +
@ -393,7 +393,7 @@ $.widget( "ui.datepicker", {
"</button>"; "</button>";
}, },
_buildNextLink: function() { _buildNextLink: function() {
var labels = Globalize.localize( "datepicker" ); var labels = Globalize.translate( "datepicker" );
return "<button class='ui-datepicker-next ui-corner-all' " + return "<button class='ui-datepicker-next ui-corner-all' " +
"title='" + labels.nextText + "'>" + "title='" + labels.nextText + "'>" +
"<span class='ui-icon ui-icon-circle-triangle-e'>" + "<span class='ui-icon ui-icon-circle-triangle-e'>" +
@ -402,7 +402,7 @@ $.widget( "ui.datepicker", {
"</button>"; "</button>";
}, },
_buildTitlebar: function() { _buildTitlebar: function() {
var labels = Globalize.localize( "datepicker" ); var labels = Globalize.translate( "datepicker" );
return "<div role='header' id='" + this.id + "-title'>" + return "<div role='header' id='" + this.id + "-title'>" +
"<div id='" + this.id + "-month-lbl' class='ui-datepicker-title'>" + "<div id='" + this.id + "-month-lbl' class='ui-datepicker-title'>" +
this._buildTitle() + this._buildTitle() +
@ -428,7 +428,7 @@ $.widget( "ui.datepicker", {
_buildGridHeading: function() { _buildGridHeading: function() {
var cells = "", var cells = "",
i = 0, i = 0,
labels = Globalize.localize( "datepicker" ); labels = Globalize.translate( "datepicker" );
if ( this.options.showWeek ) { if ( this.options.showWeek ) {
cells += "<th class='ui-datepicker-week-col'>" + labels.weekHeader + "</th>"; cells += "<th class='ui-datepicker-week-col'>" + labels.weekHeader + "</th>";
@ -448,10 +448,12 @@ $.widget( "ui.datepicker", {
"</th>"; "</th>";
}, },
_buildGridBody: function() { _buildGridBody: function() {
var rows = "", // this.date.days() is not cached, and it has O(n^2) complexity. It is run O(n) times. So, it equals O(n^3). Not good at all. Caching.
i = 0; var days = this.date.days(),
for ( i; i < this.date.days().length; i++ ) { i = 0,
rows += this._buildWeekRow( this.date.days()[i] ); rows = "";
for ( i; i < days.length; i++ ) {
rows += this._buildWeekRow( days[i] );
} }
return "<tbody role='presentation'>" + rows + "</tbody>"; return "<tbody role='presentation'>" + rows + "</tbody>";
}, },
@ -488,7 +490,7 @@ $.widget( "ui.datepicker", {
_buildDayLink: function( day ) { _buildDayLink: function( day ) {
var link, var link,
classes = [ "ui-state-default" ], classes = [ "ui-state-default" ],
labels = Globalize.localize( "datepicker" ); labels = Globalize.translate( "datepicker" );
if ( day.date === this.date.day() ) { if ( day.date === this.date.day() ) {
classes.push( "ui-state-focus" ); classes.push( "ui-state-focus" );
@ -526,7 +528,7 @@ $.widget( "ui.datepicker", {
day.date + "</span>"; day.date + "</span>";
}, },
_buildButtons: function() { _buildButtons: function() {
var labels = Globalize.localize( "datepicker" ); var labels = Globalize.translate( "datepicker" );
return "<div class='ui-datepicker-buttonpane ui-widget-content'>" + return "<div class='ui-datepicker-buttonpane ui-widget-content'>" +
"<button class='ui-datepicker-current'>" + labels.currentText + "</button>" + "<button class='ui-datepicker-current'>" + labels.currentText + "</button>" +
"<button class='ui-datepicker-close'>" + labels.closeText + "</button>" + "<button class='ui-datepicker-close'>" + labels.closeText + "</button>" +
@ -544,8 +546,6 @@ $.widget( "ui.datepicker", {
refresh: function() { refresh: function() {
//determine which day gridcell to focus after refresh //determine which day gridcell to focus after refresh
//TODO: Prevent disabled cells from being focused //TODO: Prevent disabled cells from being focused
this.date.refresh();
if ( this.options.numberOfMonths === 1 ) { if ( this.options.numberOfMonths === 1 ) {
this.grid = $( this._buildGrid() ); this.grid = $( this._buildGrid() );
$( ".ui-datepicker-title", this.picker ).html( this._buildTitle() ); $( ".ui-datepicker-title", this.picker ).html( this._buildTitle() );