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: Update tests and demos for new structure

Browse Source
This commit is contained in:
TJ VanToll 2013-08-30 08:27:19 -04:00 committed by Scott González
parent 5a7835595e
commit e50d6d3bd2
22 changed files with 251 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -174,7 +174,7 @@ grunt.initConfig({
},
qunit: {
files: expandFiles( "tests/unit/" + component + "/*.html" ).filter(function( file ) {
return !( /(all|index|test)\.html$/ ).test( file );
return !( /(all|index|test|datepicker)\.html$/ ).test( file );
}),
options: {
page: {

11
demos/datepicker/alt-field.html
View File

@ -5,15 +5,22 @@
<title>jQuery UI Datepicker - Populate alternate field</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
select: function( event, ui ) {
var date = Globalize.parseDate( ui.date );
$( "#alternate" ).val( Globalize.format( date, "dddd, d MMMM, yyyy" ) );
}
});
});
</script>

18
demos/datepicker/animation.html
View File

@ -5,6 +5,9 @@
<title>jQuery UI Datepicker - Animations</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/effect.js"></script>
@ -14,13 +17,19 @@
<script src="../../ui/effect-drop.js"></script>
<script src="../../ui/effect-fold.js"></script>
<script src="../../ui/effect-slide.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
var value = $( this ).val(),
hideValue = $( this ).find( "option:selected" ).data( "hide" );
$( "#datepicker" )
.datepicker( "option", "show", value )
.datepicker( "option", "hide", hideValue || value );
});
});
</script>
@ -31,16 +40,15 @@
<p>Animations:<br />
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="show">Fade in/out (default)</option>
<option value="slideDown" data-hide="slideUp">Slide down/up</option>
<option value="blind">Blind (UI Effect)</option>
<option value="bounce">Bounce (UI Effect)</option>
<option value="clip">Clip (UI Effect)</option>
<option value="drop">Drop (UI Effect)</option>
<option value="fold">Fold (UI Effect)</option>
<option value="slide">Slide (UI Effect)</option>
<option value="">None</option>
<option value="false">None</option>
</select>
</p>

5
demos/datepicker/buttonbar.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display button bar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

14
demos/datepicker/date-formats.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
@ -24,12 +29,9 @@
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
<option value="d">Default - M/d/yyyy</option>
<option value="D">Long - dddd, MMMM dd, yyyy</option>
<option value="yyyy-MM-dd">ISO 8601 - yyyy-MM-dd</option>
</select>
</p>

5
demos/datepicker/date-range.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

36
demos/datepicker/datepicker-ar.js
View File

@ -1,36 +0,0 @@
/* Arabic Translation for jQuery UI date picker plugin. */
/* Khaled Alhourani -- me@khaledalhourani.com */
/* NOTE: monthNames are the original months names and they are the Arabic names, not the new months name فبراير - يناير and there isn't any Arabic roots for these months */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['ar'] = {
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']);
return datepicker.regional['ar'];
}));

38
demos/datepicker/datepicker-fr.js
View File

@ -1,38 +0,0 @@
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani (sholby@sholby.net),
Stéphane Raimbault <stephane.raimbault@gmail.com> */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
monthNamesShort: ['janv.', 'févr.', 'mars', 'avril', 'mai', 'juin',
'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['fr']);
return datepicker.regional['fr'];
}));

36
demos/datepicker/datepicker-he.js
View File

@ -1,36 +0,0 @@
/* Hebrew initialisation for the UI Datepicker extension. */
/* Written by Amir Hardon (ahardon at gmail dot com). */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['he'] = {
closeText: 'סגור',
prevText: '&#x3C;הקודם',
nextText: 'הבא&#x3E;',
currentText: 'היום',
monthNames: ['ינואר','פברואר','מרץ','אפריל','מאי','יוני',
'יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'],
monthNamesShort: ['ינו','פבר','מרץ','אפר','מאי','יוני',
'יולי','אוג','ספט','אוק','נוב','דצמ'],
dayNames: ['ראשון','שני','שלישי','רביעי','חמישי','שישי','שבת'],
dayNamesShort: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
dayNamesMin: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 0,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['he']);
return datepicker.regional['he'];
}));

36
demos/datepicker/datepicker-zh-TW.js
View File

@ -1,36 +0,0 @@
/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Ressol (ressol@gmail.com). */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['zh-TW'] = {
closeText: '關閉',
prevText: '&#x3C;上月',
nextText: '下月&#x3E;',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
datepicker.setDefaults(datepicker.regional['zh-TW']);
return datepicker.regional['zh-TW'];
}));

5
demos/datepicker/dropdown-month-year.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

24
demos/datepicker/icon-trigger.html
View File

@ -5,18 +5,32 @@
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
var allowOpen = false;
var datepicker = $( "#datepicker" ).datepicker({
beforeOpen: function() {
return allowOpen;
}
});
$( "<img src='images/calendar.gif' alt='Open Datepicker'>")
.insertAfter( datepicker )
.click(function() {
allowOpen = true;
datepicker.focus();
setTimeout(function() {
allowOpen = false;
});
});
});
</script>
</head>

5
demos/datepicker/inline.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display inline</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

26
demos/datepicker/localization.html
View File

@ -5,20 +5,24 @@
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.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/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<script src="datepicker-ar.js"></script>
<script src="datepicker-fr.js"></script>
<script src="datepicker-he.js"></script>
<script src="datepicker-zh-TW.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
Globalize.culture( "de-DE" );
$( "#datepicker" ).datepicker();
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
// TODO refresh the current value to convert to the selected culture
Globalize.culture( $(this).val() );
});
});
</script>
@ -27,11 +31,9 @@
<p>Date: <input type="text" id="datepicker"/>&nbsp;
<select id="locale">
<option value="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
<option value="de-DE" selected>German (Deutsch)</option>
<option value="ja-JP">Japanese (日本語</option>
<option value="en">English</option>
</select></p>
<div class="demo-description">

5
demos/datepicker/min-max.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

5
demos/datepicker/multiple-calendars.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

5
demos/datepicker/other-months.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Dates in other months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

5
demos/datepicker/show-week.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Show week of the year</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>

257
tests/unit/date/date_core.js
View File

@ -1,124 +1,121 @@
module("date: core");
var PROP_NAME = 'date';
module('date: core');
test('Check Date Setup', 2, function(){
ok(true,'First Test Always Passes');
ok($.date(), 'Load JQuery Date');
test("Check Date Setup", 2, function(){
ok(true,"First Test Always Passes");
ok($.date(), "Load JQuery Date");
});
test('Check Sets and Gets', 6, function(){
test("Check Sets and Gets", 6, function(){
var date = $.date();
equal(date.setYear(2012).year(), 2012, 'Set year and retrieve');
equal(date.setMonth(9).month(), 9, 'Set month and retrieve');
equal(date.setDay(15).day(), 15, 'Set day and retrieve');
equal(date.setFullDate(2012,9,15).year(), 2012, 'Set full date and retrieve year');
equal(date.month(), 9, 'Set full date and retrieve month');
equal(date.day(), 15, 'Set full date and retrieve day');
equal(date.setYear(2012).year(), 2012, "Set year and retrieve");
equal(date.setMonth(9).month(), 9, "Set month and retrieve");
equal(date.setDay(15).day(), 15, "Set day and retrieve");
equal(date.setFullDate(2012,9,15).year(), 2012, "Set full date and retrieve year");
equal(date.month(), 9, "Set full date and retrieve month");
equal(date.day(), 15, "Set full date and retrieve day");
});
test('Date Adjustments - Normal Use Cases', 10, function(){
test("Date Adjustments - Normal Use Cases", 10, function(){
var date = $.date();
//Use October 15, 2012
date.setFullDate(2012,9,15);
equal(date.adjust('D',1).day(),16,'Add 1 day');
equal(date.adjust('D',-1).day(),15,'Subtract 1 day');
equal(date.adjust('M',1).month(),10,'Add 1 month');
equal(date.adjust('M',-1).month(),9,'Subtract 1 month');
equal(date.adjust('Y',1).year(),2013,'Add 1 year');
equal(date.adjust('Y',-1).year(),2012,'Subtract 1 year');
equal(date.adjust("D",1).day(),16,"Add 1 day");
equal(date.adjust("D",-1).day(),15,"Subtract 1 day");
equal(date.adjust("M",1).month(),10,"Add 1 month");
equal(date.adjust("M",-1).month(),9,"Subtract 1 month");
equal(date.adjust("Y",1).year(),2013,"Add 1 year");
equal(date.adjust("Y",-1).year(),2012,"Subtract 1 year");
//Check changing one value impact another. Ex: Day impacts month
//Use April 30th 2012
date.setFullDate(2012,3,30);
equal(date.adjust('D',1).month(),4,'Add 1 day to change month from April to May');
equal(date.adjust('D',-1).month(),3,'Subtract 1 day to change month from May to April');
equal(date.adjust("D",1).month(),4,"Add 1 day to change month from April to May");
equal(date.adjust("D",-1).month(),3,"Subtract 1 day to change month from May to April");
//Use December 31st 2012
date.setFullDate(2012,11,31);
equal(date.adjust('D',1).year(),2013,'Add 1 day to change year from 2012 to 2013');
equal(date.adjust('D',-1).year(),2012,'Subtract 1 day to change month from 2013 to 2012');
equal(date.adjust("D",1).year(),2013,"Add 1 day to change year from 2012 to 2013");
equal(date.adjust("D",-1).year(),2012,"Subtract 1 day to change month from 2013 to 2012");
});
test('Date Adjustments - Month Overflow Edge Cases', 2, function(){
test("Date Adjustments - Month Overflow Edge Cases", 2, function(){
var date = $.date();
//Use May 31 2012
date.setFullDate(2012,4,31);
equal(date.adjust('M',1).day(),30,'Add 1 month from May to June sets days to 30, last day in June (prevent Overflow)');
equal(date.adjust('M',-1).day(),30,'Subtract 1 month from June to May sets days to 30 in May');
equal(date.adjust("M",1).day(),30,"Add 1 month from May to June sets days to 30, last day in June (prevent Overflow)");
equal(date.adjust("M",-1).day(),30,"Subtract 1 month from June to May sets days to 30 in May");
});
test('Date Adjustments - Leap Year Edge Cases', 1, function(){
test("Date Adjustments - Leap Year Edge Cases", 1, function(){
var date = $.date();
//Use February 29 2012 a Leap year
date.setFullDate(2012,1,29);
equal(date.adjust('Y',1).day(),28,'Feb 29 2012, add a year to convert to Feb 28, 2013');
equal(date.adjust("Y",1).day(),28,"Feb 29 2012, add a year to convert to Feb 28, 2013");
});
test('List days of Week', 2, function(){
var date = $.date();
var offset0 = [
{ 'fullname': 'Sunday', 'shortname': 'Su' },
{ 'fullname': 'Monday', 'shortname': 'Mo' },
{ 'fullname': 'Tuesday', 'shortname': 'Tu' },
{ 'fullname': 'Wednesday', 'shortname': 'We' },
{ 'fullname': 'Thursday', 'shortname': 'Th' },
{ 'fullname': 'Friday', 'shortname': 'Fr' },
{ 'fullname': 'Saturday', 'shortname': 'Sa' } ];
var offset1 = [
{ 'fullname': 'Montag', 'shortname': 'Mo' },
{ 'fullname': 'Dienstag', 'shortname': 'Di' },
{ 'fullname': 'Mittwoch', 'shortname': 'Mi' },
{ 'fullname': 'Donnerstag', 'shortname': 'Do' },
{ 'fullname': 'Freitag', 'shortname': 'Fr' },
{ 'fullname': 'Samstag', 'shortname': 'Sa' },
{ 'fullname': 'Sonntag', 'shortname': 'So' } ];
deepEqual(date.weekdays(), offset0, 'Get weekdays with start of day on 0 (English)');
Globalize.culture( 'de-DE' );
test("List days of Week", 2, function(){
var date = $.date(),
offset0 = [
{ "fullname": "Sunday", "shortname": "Su" },
{ "fullname": "Monday", "shortname": "Mo" },
{ "fullname": "Tuesday", "shortname": "Tu" },
{ "fullname": "Wednesday", "shortname": "We" },
{ "fullname": "Thursday", "shortname": "Th" },
{ "fullname": "Friday", "shortname": "Fr" },
{ "fullname": "Saturday", "shortname": "Sa" }
],
offset1 = [
{ "fullname": "Montag", "shortname": "Mo" },
{ "fullname": "Dienstag", "shortname": "Di" },
{ "fullname": "Mittwoch", "shortname": "Mi" },
{ "fullname": "Donnerstag", "shortname": "Do" },
{ "fullname": "Freitag", "shortname": "Fr" },
{ "fullname": "Samstag", "shortname": "Sa" },
{ "fullname": "Sonntag", "shortname": "So" }
];
deepEqual(date.weekdays(), offset0, "Get weekdays with start of day on 0 (English)");
Globalize.culture( "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
Globalize.culture('en-EN');
Globalize.culture("en-EN");
});
test('Leap Year Check', 8, function(){
test("Leap Year Check", 8, function(){
var date = $.date();
ok(date.setYear( 2008 ).isLeapYear(), '2008 is a Leap Year');
ok(!date.setYear( 2009 ).isLeapYear(), '2009 is not a Leap Year');
ok(!date.setYear( 2010 ).isLeapYear(), '2010 is not a Leap Year');
ok(!date.setYear( 2011 ).isLeapYear(), '2011 is not a Leap Year');
ok(date.isLeapYear( 2012 ), '2012 is a Leap Year');
ok(!date.isLeapYear( 2013 ), '2013 is not a Leap Year');
ok(!date.isLeapYear( 2014 ), '2014 is not a Leap year');
ok(!date.isLeapYear( 2015 ), '2015 is not a Leap year');
ok(date.setYear( 2008 ).isLeapYear(), "2008 is a Leap Year");
ok(!date.setYear( 2009 ).isLeapYear(), "2009 is not a Leap Year");
ok(!date.setYear( 2010 ).isLeapYear(), "2010 is not a Leap Year");
ok(!date.setYear( 2011 ).isLeapYear(), "2011 is not a Leap Year");
ok(date.isLeapYear( 2012 ), "2012 is a Leap Year");
ok(!date.isLeapYear( 2013 ), "2013 is not a Leap Year");
ok(!date.isLeapYear( 2014 ), "2014 is not a Leap year");
ok(!date.isLeapYear( 2015 ), "2015 is not a Leap year");
});
test('Days in Month', 3, function(){
test("Days in Month", 3, function(){
var date = $.date();
date.setFullDate( 2012, 1, 1 );
equal(date.daysInMonth(), 29, 'Leap Year implicit check for 29 days');
equal(date.daysInMonth( 2012, 1 ), 29, 'Leap Year explicit check for 29 days');
equal(date.daysInMonth( 2011, 3 ), 30, 'April has 30 days');
equal(date.daysInMonth(), 29, "Leap Year implicit check for 29 days");
equal(date.daysInMonth( 2012, 1 ), 29, "Leap Year explicit check for 29 days");
equal(date.daysInMonth( 2011, 3 ), 30, "April has 30 days");
});
test('Month Name', 2, function(){
test("Month Name", 2, function(){
var date = $.date();
equal(date.setMonth(3).monthName(), 'April', 'Month name return April (English)');
Globalize.culture( 'de-DE' );
equal(date.setMonth(3).monthName(), "April", "Month name return April (English)");
Globalize.culture( "de-DE" );
date.refresh();
equal(date.setMonth(2).monthName(), 'März', 'Month name return March (German)');
Globalize.culture('en-EN');
equal(date.setMonth(2).monthName(), "März", "Month name return March (German)");
Globalize.culture("en-EN");
});
test('Clone', 2, function(){
var date = $.date();
var date2 = date.clone();
ok(date2, 'Created cloned object');
notEqual(date.adjust('Y',1).year(), date2.year(), 'Object manipulated independently');
test("Clone", 2, function(){
var date = $.date(),
date2 = date.clone();
ok(date2, "Created cloned object");
notEqual(date.adjust("Y",1).year(), date2.year(), "Object manipulated independently");
});
test('Days', 1, function(){
test("Days", 1, function(){
//TODO needs work
var date = $.date();
date.eachDay = function( day ) {
@ -133,7 +130,7 @@ test('Days', 1, function(){
day.render = true;
day.extraClasses = "ui-state-disabled";
}
if ( day.date == 1 ) {
if ( day.date === 1 ) {
day.extraClasses = "ui-state-error";
day.title = "Something bad explaining the error highlight";
}
@ -141,7 +138,7 @@ test('Days', 1, function(){
day.title = "A good day!";
}
};
ok(date.days(), 'Date days() returns');
ok(date.days(), "Date days() returns");
});
test( "Months", 5, function(){
@ -154,70 +151,72 @@ test( "Months", 5, function(){
ok( lastMonth.last );
ok( !lastMonth.first );
ok( firstMonth.month() == ( lastMonth.month() - 1 ) );
ok( firstMonth.month() === lastMonth.month() - 1 );
});
test('iso8601Week', 2, function(){
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');
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();
date.setFullDate(2012, 9, 16);
ok(date.equal(new Date(2012, 9, 16)), 'Does date equal provide date');
ok(!date.equal(new Date(2011, 9, 16)), 'Does date year not equal provide date');
ok(!date.equal(new Date(2012, 8, 16)), 'Does date month not equal provide date');
ok(!date.equal(new Date(2012, 9, 15)), 'Does date day not equal provide date');
ok(date.equal(new Date(2012, 9, 16)), "Does date equal provide date");
ok(!date.equal(new Date(2011, 9, 16)), "Does date year not equal provide date");
ok(!date.equal(new Date(2012, 8, 16)), "Does date month not equal provide date");
ok(!date.equal(new Date(2012, 9, 15)), "Does date day not equal provide date");
});
test('Date', 1, function(){
test("Date", 1, function(){
var date = $.date();
ok(date.date() instanceof Date, 'Date returned');
ok(date.date() instanceof Date, "Date returned");
});
test('Format', 4, function(){
test("Format", 4, function(){
var date = $.date();
date.setFullDate(2012, 9, 16);
equal(date.format(), '10/16/2012', 'Checking default US format');
equal(date.format('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('MMMM dd, yyyy'), 'October 16, 2012', 'Checking MMMM dd, yyyy format');
equal(date.format(), "10/16/2012", "Checking default US format");
equal(date.format("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("MMMM dd, yyyy"), "October 16, 2012", "Checking MMMM dd, yyyy format");
});
test('Calendar', 3, function(){
var date = $.date();
ok(date.calendar(), 'Calendar type returned')
var 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"
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(de_cal), 'Calendar type changed');
deepEqual(date.calendar(), de_cal, 'Calendar change verified');
});
};
ok(date.calendar(), "Calendar type returned");
ok(date.calendar(de_cal), "Calendar type changed");
deepEqual(date.calendar(), de_cal, "Calendar change verified");
});

11
tests/unit/datepicker/datepicker.html
View File

@ -8,16 +8,23 @@
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.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/localization.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "datepicker" ],
js: [
"ui/core.js",
"ui/datepicker.js",
"ui/widget.js",
"ui/button.js",
"ui/position.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"
"ui/i18n/datepicker-zh-CN.js"*/
]
});
</script>

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

@ -12,16 +12,6 @@ module( "datepicker: core", {
TestHelpers.testJshint( "datepicker" );
test("initialization - Reinitialization after body had been emptied.", function() {
expect( 1 );
var bodyContent = $("body").children(), inp = $("#inp");
$("#inp").datepicker();
$("body").empty().append(inp);
$("#inp").datepicker();
ok( $("#"+$.datepicker._mainDivId).length===1, "Datepicker container added" );
$("body").empty().append(bodyContent); // Returning to initial state for later tests
});
test( "widget method - empty collection", function() {
expect( 1 );
$( "#nonExist" ).datepicker(); // should create nothing

15
ui/datepicker.js
View File

@ -39,6 +39,7 @@ var idIncrement = 0,
$.widget( "ui.datepicker", {
options: {
appendTo: null,
dateFormat: null,
// TODO review
eachDay: $.noop,
numberOfMonths: 1,
@ -51,12 +52,13 @@ $.widget( "ui.datepicker", {
hide: true,
// callbacks
beforeOpen: null,
close: null,
open: null,
select: null
},
_create: function() {
this.date = $.date();
this.date = $.date( null, this.options.dateFormat );
this.date.eachDay = this.options.eachDay;
this.id = "ui-datepicker-" + idIncrement;
idIncrement++;
@ -511,8 +513,8 @@ $.widget( "ui.datepicker", {
this.element.focus();
},
// Refreshing the entire datepicker during interaction confuses screen readers, specifically
// because the grid heading is marked up as a live region and will often not update if it's
// destroyed and recreated instead of just having its text change. Additionally, interacting
// because the grid heading is marked up as a live region and will often not update if it's
// destroyed and recreated instead of just having its text change. Additionally, interacting
// with the prev and next links would cause loss of focus issues because the links being
// interacted with will disappear while focused.
refresh: function() {
@ -529,7 +531,7 @@ $.widget( "ui.datepicker", {
}
},
_refreshMultiplePicker: function() {
for (var i = 0; i < this.options.numberOfMonths; i++ ) {
for ( var i = 0; i < this.options.numberOfMonths; i++ ) {
$( ".ui-datepicker-title", this.picker ).eq( i ).html( this._buildTitle() );
$( ".ui-datepicker-calendar", this.picker ).eq( i ).html( this._buildGrid() );
this.date.adjust( "M", 1 );
@ -541,9 +543,12 @@ $.widget( "ui.datepicker", {
if ( this.inline || this.isOpen ) {
return;
}
if ( this._trigger( "beforeOpen", event ) === false ) {
return;
}
// TODO explain this
this.date = $.date( this.element.val() );
this.date = $.date( this.element.val(), this.options.dateFormat );
this.date.eachDay = this.options.eachDay;
this.date.select();
this.refresh();