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: { qunit: {
files: expandFiles( "tests/unit/" + component + "/*.html" ).filter(function( file ) { 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: { options: {
page: { page: {

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

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

18
demos/datepicker/animation.html
View File

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

5
demos/datepicker/buttonbar.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display button bar</title> <title>jQuery UI Datepicker - Display button bar</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Format date</title> <title>jQuery UI Datepicker - Format date</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>
@ -24,12 +29,9 @@
<p>Format options:<br /> <p>Format options:<br />
<select id="format"> <select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="d">Default - M/d/yyyy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="D">Long - dddd, MMMM dd, yyyy</option>
<option value="d M, y">Short - d M, y</option> <option value="yyyy-MM-dd">ISO 8601 - yyyy-MM-dd</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>
</select> </select>
</p> </p>

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Select a Date Range</title> <title>jQuery UI Datepicker - Select a Date Range</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <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> <title>jQuery UI Datepicker - Display month &amp; year menus</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

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

5
demos/datepicker/inline.html
View File

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display inline</title> <title>jQuery UI Datepicker - Display inline</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

26
demos/datepicker/localization.html
View File

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

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Restrict date range</title> <title>jQuery UI Datepicker - Restrict date range</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Display multiple months</title> <title>jQuery UI Datepicker - Display multiple months</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Dates in other months</title> <title>jQuery UI Datepicker - Dates in other months</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

@ -5,8 +5,13 @@
<title>jQuery UI Datepicker - Show week of the year</title> <title>jQuery UI Datepicker - Show week of the year</title>
<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/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script> <script src="../../ui/core.js"></script>
<script src="../../ui/widget.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="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script>

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

@ -1,124 +1,121 @@
module("date: core");
test("Check Date Setup", 2, function(){
var PROP_NAME = 'date'; ok(true,"First Test Always Passes");
ok($.date(), "Load JQuery Date");
module('date: core');
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(); var date = $.date();
equal(date.setYear(2012).year(), 2012, 'Set year and retrieve'); equal(date.setYear(2012).year(), 2012, "Set year and retrieve");
equal(date.setMonth(9).month(), 9, 'Set month and retrieve'); equal(date.setMonth(9).month(), 9, "Set month and retrieve");
equal(date.setDay(15).day(), 15, 'Set day 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.setFullDate(2012,9,15).year(), 2012, "Set full date and retrieve year");
equal(date.month(), 9, 'Set full date and retrieve month'); equal(date.month(), 9, "Set full date and retrieve month");
equal(date.day(), 15, 'Set full date and retrieve day'); 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(); var date = $.date();
//Use October 15, 2012 //Use October 15, 2012
date.setFullDate(2012,9,15); date.setFullDate(2012,9,15);
equal(date.adjust('D',1).day(),16,'Add 1 day'); equal(date.adjust("D",1).day(),16,"Add 1 day");
equal(date.adjust('D',-1).day(),15,'Subtract 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(),10,"Add 1 month");
equal(date.adjust('M',-1).month(),9,'Subtract 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(),2013,"Add 1 year");
equal(date.adjust('Y',-1).year(),2012,'Subtract 1 year'); equal(date.adjust("Y",-1).year(),2012,"Subtract 1 year");
//Check changing one value impact another. Ex: Day impacts month //Check changing one value impact another. Ex: Day impacts month
//Use April 30th 2012 //Use April 30th 2012
date.setFullDate(2012,3,30); 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(),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(),3,"Subtract 1 day to change month from May to April");
//Use December 31st 2012 //Use December 31st 2012
date.setFullDate(2012,11,31); 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(),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(),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(); var date = $.date();
//Use May 31 2012 //Use May 31 2012
date.setFullDate(2012,4,31); 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,"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,"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(); var date = $.date();
//Use February 29 2012 a Leap year //Use February 29 2012 a Leap year
date.setFullDate(2012,1,29); 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(){ test("List days of Week", 2, function(){
var date = $.date(); var date = $.date(),
var offset0 = [ offset0 = [
{ 'fullname': 'Sunday', 'shortname': 'Su' }, { "fullname": "Sunday", "shortname": "Su" },
{ 'fullname': 'Monday', 'shortname': 'Mo' }, { "fullname": "Monday", "shortname": "Mo" },
{ 'fullname': 'Tuesday', 'shortname': 'Tu' }, { "fullname": "Tuesday", "shortname": "Tu" },
{ 'fullname': 'Wednesday', 'shortname': 'We' }, { "fullname": "Wednesday", "shortname": "We" },
{ 'fullname': 'Thursday', 'shortname': 'Th' }, { "fullname": "Thursday", "shortname": "Th" },
{ 'fullname': 'Friday', 'shortname': 'Fr' }, { "fullname": "Friday", "shortname": "Fr" },
{ 'fullname': 'Saturday', 'shortname': 'Sa' } ]; { "fullname": "Saturday", "shortname": "Sa" }
var offset1 = [ ],
{ 'fullname': 'Montag', 'shortname': 'Mo' }, offset1 = [
{ 'fullname': 'Dienstag', 'shortname': 'Di' }, { "fullname": "Montag", "shortname": "Mo" },
{ 'fullname': 'Mittwoch', 'shortname': 'Mi' }, { "fullname": "Dienstag", "shortname": "Di" },
{ 'fullname': 'Donnerstag', 'shortname': 'Do' }, { "fullname": "Mittwoch", "shortname": "Mi" },
{ 'fullname': 'Freitag', 'shortname': 'Fr' }, { "fullname": "Donnerstag", "shortname": "Do" },
{ 'fullname': 'Samstag', 'shortname': 'Sa' }, { "fullname": "Freitag", "shortname": "Fr" },
{ 'fullname': 'Sonntag', 'shortname': 'So' } ]; { "fullname": "Samstag", "shortname": "Sa" },
deepEqual(date.weekdays(), offset0, 'Get weekdays with start of day on 0 (English)'); { "fullname": "Sonntag", "shortname": "So" }
Globalize.culture( 'de-DE' ); ];
deepEqual(date.weekdays(), offset0, "Get weekdays with start of day on 0 (English)");
Globalize.culture( "de-DE" );
date.refresh(); 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.culture("en-EN");
}); });
test('Leap Year Check', 8, function(){ test("Leap Year Check", 8, function(){
var date = $.date(); var date = $.date();
ok(date.setYear( 2008 ).isLeapYear(), '2008 is 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( 2009 ).isLeapYear(), "2009 is not a Leap Year");
ok(!date.setYear( 2010 ).isLeapYear(), '2010 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.setYear( 2011 ).isLeapYear(), "2011 is not a Leap Year");
ok(date.isLeapYear( 2012 ), '2012 is 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( 2013 ), "2013 is not a Leap Year");
ok(!date.isLeapYear( 2014 ), '2014 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.isLeapYear( 2015 ), "2015 is not a Leap year");
}); });
test('Days in Month', 3, function(){ test("Days in Month", 3, function(){
var date = $.date(); var date = $.date();
date.setFullDate( 2012, 1, 1 ); date.setFullDate( 2012, 1, 1 );
equal(date.daysInMonth(), 29, 'Leap Year implicit check for 29 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( 2012, 1 ), 29, "Leap Year explicit check for 29 days");
equal(date.daysInMonth( 2011, 3 ), 30, 'April has 30 days'); equal(date.daysInMonth( 2011, 3 ), 30, "April has 30 days");
}); });
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.culture( "de-DE" );
date.refresh(); 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.culture("en-EN");
}); });
test('Clone', 2, function(){ test("Clone", 2, function(){
var date = $.date(); var date = $.date(),
var date2 = date.clone(); date2 = date.clone();
ok(date2, 'Created cloned object'); ok(date2, "Created cloned object");
notEqual(date.adjust('Y',1).year(), date2.year(), 'Object manipulated independently'); notEqual(date.adjust("Y",1).year(), date2.year(), "Object manipulated independently");
}); });
test('Days', 1, function(){ test("Days", 1, function(){
//TODO needs work //TODO needs work
var date = $.date(); var date = $.date();
date.eachDay = function( day ) { date.eachDay = function( day ) {
@ -133,7 +130,7 @@ test('Days', 1, function(){
day.render = true; day.render = true;
day.extraClasses = "ui-state-disabled"; day.extraClasses = "ui-state-disabled";
} }
if ( day.date == 1 ) { if ( day.date === 1 ) {
day.extraClasses = "ui-state-error"; day.extraClasses = "ui-state-error";
day.title = "Something bad explaining the error highlight"; day.title = "Something bad explaining the error highlight";
} }
@ -141,7 +138,7 @@ test('Days', 1, function(){
day.title = "A good day!"; day.title = "A good day!";
} }
}; };
ok(date.days(), 'Date days() returns'); ok(date.days(), "Date days() returns");
}); });
test( "Months", 5, function(){ test( "Months", 5, function(){
@ -154,70 +151,72 @@ test( "Months", 5, function(){
ok( lastMonth.last ); ok( lastMonth.last );
ok( !lastMonth.first ); 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(); var date = $.date();
//date.setFullDate(2012, 0, 8); //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, 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, 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);
ok(date.equal(new Date(2012, 9, 16)), 'Does date 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(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, 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, 15)), "Does date day not equal provide date");
}); });
test('Date', 1, function(){ test("Date", 1, function(){
var date = $.date(); 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(); 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(), "10/16/2012", "Checking default US format");
equal(date.format('yyyy/MM/dd'), '2012/10/16', 'Checking yyyy/MM/dd 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("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("MMMM dd, yyyy"), "October 16, 2012", "Checking MMMM dd, yyyy format");
}); });
test('Calendar', 3, function(){ test("Calendar", 3, function(){
var date = $.date(); var date = $.date(),
ok(date.calendar(), 'Calendar type returned') de_cal = {
var de_cal = {calendars: { calendars: {
standard: { standard: {
"/": ".", "/": ".",
firstDay: 1, firstDay: 1,
days: { days: {
names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"], names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"], namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"] namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
}, },
months: { months: {
names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""], 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",""] namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
}, },
AM: null, AM: null,
PM: null, PM: null,
eras: [{"name":"n. Chr.","start":null,"offset":0}], eras: [{"name":"n. Chr.","start":null,"offset":0}],
patterns: { patterns: {
d: "dd.MM.yyyy", d: "dd.MM.yyyy",
D: "dddd, d. MMMM yyyy", D: "dddd, d. MMMM yyyy",
t: "HH:mm", t: "HH:mm",
T: "HH:mm:ss", T: "HH:mm:ss",
f: "dddd, d. MMMM yyyy HH:mm", f: "dddd, d. MMMM yyyy HH:mm",
F: "dddd, d. MMMM yyyy HH:mm:ss", F: "dddd, d. MMMM yyyy HH:mm:ss",
M: "dd MMMM", M: "dd MMMM",
Y: "MMMM yyyy" Y: "MMMM yyyy"
}
}
} }
} };
}}; ok(date.calendar(), "Calendar type returned");
ok(date.calendar(de_cal), 'Calendar type changed'); ok(date.calendar(de_cal), "Calendar type changed");
deepEqual(date.calendar(), de_cal, 'Calendar change verified'); 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"> <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/localization.js"></script>
<script src="../testsuite.js"></script> <script src="../testsuite.js"></script>
<script> <script>
TestHelpers.loadResources({ TestHelpers.loadResources({
css: [ "core", "datepicker" ], css: [ "core", "datepicker" ],
js: [ js: [
"ui/core.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-fr.js",
"ui/i18n/datepicker-he.js", "ui/i18n/datepicker-he.js",
"ui/i18n/datepicker-zh-CN.js" "ui/i18n/datepicker-zh-CN.js"*/
] ]
}); });
</script> </script>

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

@ -12,16 +12,6 @@ module( "datepicker: core", {
TestHelpers.testJshint( "datepicker" ); 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() { test( "widget method - empty collection", function() {
expect( 1 ); expect( 1 );
$( "#nonExist" ).datepicker(); // should create nothing $( "#nonExist" ).datepicker(); // should create nothing

11
ui/datepicker.js
View File

@ -39,6 +39,7 @@ var idIncrement = 0,
$.widget( "ui.datepicker", { $.widget( "ui.datepicker", {
options: { options: {
appendTo: null, appendTo: null,
dateFormat: null,
// TODO review // TODO review
eachDay: $.noop, eachDay: $.noop,
numberOfMonths: 1, numberOfMonths: 1,
@ -51,12 +52,13 @@ $.widget( "ui.datepicker", {
hide: true, hide: true,
// callbacks // callbacks
beforeOpen: null,
close: null, close: null,
open: null, open: null,
select: null select: null
}, },
_create: function() { _create: function() {
this.date = $.date(); this.date = $.date( null, this.options.dateFormat );
this.date.eachDay = this.options.eachDay; this.date.eachDay = this.options.eachDay;
this.id = "ui-datepicker-" + idIncrement; this.id = "ui-datepicker-" + idIncrement;
idIncrement++; idIncrement++;
@ -529,7 +531,7 @@ $.widget( "ui.datepicker", {
} }
}, },
_refreshMultiplePicker: function() { _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-title", this.picker ).eq( i ).html( this._buildTitle() );
$( ".ui-datepicker-calendar", this.picker ).eq( i ).html( this._buildGrid() ); $( ".ui-datepicker-calendar", this.picker ).eq( i ).html( this._buildGrid() );
this.date.adjust( "M", 1 ); this.date.adjust( "M", 1 );
@ -541,9 +543,12 @@ $.widget( "ui.datepicker", {
if ( this.inline || this.isOpen ) { if ( this.inline || this.isOpen ) {
return; return;
} }
if ( this._trigger( "beforeOpen", event ) === false ) {
return;
}
// TODO explain this // 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.eachDay = this.options.eachDay;
this.date.select(); this.date.select();
this.refresh(); this.refresh();