},
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: {
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
+++ /dev/null
-/* 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: '<السابق',
- nextText: 'التالي>',
- 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'];
-
-}));
+++ /dev/null
-/* 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'];
-
-}));
+++ /dev/null
-/* 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: '<הקודם',
- nextText: 'הבא>',
- 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'];
-
-}));
+++ /dev/null
-/* 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: '<上月',
- nextText: '下月>',
- 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'];
-
-}));
<title>jQuery UI Datepicker - Display month & 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>
<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>
<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>
<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>
<p>Date: <input type="text" id="datepicker"/>
<select id="locale">
- <option value="ar">Arabic (‫(العربية</option>
- <option value="zh-TW">Chinese Traditional (繁體中文)</option>
- <option value="">English</option>
- <option value="fr" selected="selected">French (Français)</option>
- <option value="he">Hebrew (‫(עברית</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">
<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>
<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>
<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>
<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>
+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');
-});
-test('Date Adjustments - Normal Use Cases', 10, function(){
+ 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(){
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 ) {
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";
}
day.title = "A good day!";
}
};
- ok(date.days(), 'Date days() returns');
+ ok(date.days(), "Date days() returns");
});
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');
-});
\ No newline at end of file
+ };
+ ok(date.calendar(), "Calendar type returned");
+ ok(date.calendar(de_cal), "Calendar type changed");
+ deepEqual(date.calendar(), de_cal, "Calendar change verified");
+});
<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>
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
$.widget( "ui.datepicker", {
options: {
appendTo: null,
+ dateFormat: null,
// TODO review
eachDay: $.noop,
numberOfMonths: 1,
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++;
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() {
}
},
_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 );
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();