Datepicker: Use Globalize 1.0.0

- Move external/date.js -> ui/calendar/date.js and UMDify it;
- Create a locale option as discussed during Chicago's meeting:
  - [String] A String with locale value, e.g. "en"; or
  - [Object] An object with all the formatters.
  TODO: Use the Globalize to-be-created generators instead of these wrap
  functions.

demos/datepicker/localization.html

@@ -10,9 +10,8 @@
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
 	<script src="../../external/globalize/globalize/date.js"></script>
-	<script src="../../external/globalize/globalize/message.js"></script>
 	<script src="../../external/localization.js"></script>
-	<script src="../../external/date.js"></script>
+	<script src="../../ui/calendar/date.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
@@ -25,11 +24,14 @@
 		var datepicker = $( "#datepicker" ),
 			select = $( "#locale" );
 
-		Globalize.locale( select.val() );
+		datepicker.datepicker({
-		datepicker.datepicker();
+			locale: select.val()
+		});
 
-		select.on( "change", function() {
+		select.change( function() {
-			Globalize.locale( $( this ).val() );
+			datepicker.datepicker( "option", {
+				locale: select.val()
+			});
 			datepicker.datepicker( "valueAsDate", datepicker.datepicker( "valueAsDate" ) );
 		});
 	});

ui/calendar.js

@@ -13,39 +13,39 @@
 //>>docs: http://api.jqueryui.com/calendar/
 //>>demos: http://jqueryui.com/calendar/
 
-( function( factory ) {
+(function( factory ) {
 	if ( typeof define === "function" && define.amd ) {
 
 		// AMD. Register as an anonymous module.
 		// TODO: Keep button even if its optional?
-		define( [
+		define([
 			"jquery",
 			"globalize",
-			"./core",
+			"globalize/date",
-			"./widget",
 			"./button",
-			"date"
+			"./calendar/date",
+			"./core",
+			"./widget"
 		], factory );
 	} else {
 
 		// Browser globals
 		factory( jQuery, Globalize );
 	}
-}( function( $, Globalize ) {
+}(function( $, Globalize ) {
 
 return $.widget( "ui.calendar", {
 	version: "@VERSION",
 	options: {
 		buttons: [],
-		dateFormat: { date: "short" },
 		eachDay: $.noop,
 		labels: {
-			"currentText": "Today",
 			"datePickerRole": "date picker",
 			"nextText": "Next",
 			"prevText": "Prev",
 			"weekHeader": "Wk"
 		},
+		locale: "en",
 		max: null,
 		min: null,
 		numberOfMonths: 1,
@@ -69,6 +69,9 @@ return $.widget( "ui.calendar", {
 		this.labels = this.options.labels;
 		this.buttonClickContext = this.element[ 0 ];
 
+		this._setLocale( this.options.locale );
+
+		this.date = new $.ui.calendarDate( this.options.value, this.options.locale );
 		this.date = $.date( this.options.value, this.options.dateFormat );
 		this.viewDate = this.date.clone();
 		this.viewDate.eachDay = this.options.eachDay;
@@ -97,7 +100,7 @@ return $.widget( "ui.calendar", {
 			"mouseenter .ui-calendar-calendar button": "_hover",
 			"mouseleave .ui-calendar-calendar button": "_hover",
 			"keydown .ui-calendar-calendar": "_handleKeydown"
-		} );
+		});
 
 		this._createCalendar();
 	},
@@ -174,6 +177,48 @@ return $.widget( "ui.calendar", {
 		).addClass( "ui-state-focus" );
 	},
 
+	_setLocale: function( locale ) {
+		var globalize;
+
+		if ( typeof locale === "string" ) {
+			globalize = new Globalize( locale );
+			locale = {
+				format: function( date ) {
+					return globalize.formatDate( date, { date: "short" } );
+				},
+				parse: function( stringDate ) {
+					return globalize.parseDate( stringDate, { date: "short" } );
+				}
+			};
+		}
+
+		if ( !locale.firstDay ) {
+			globalize = globalize || new Globalize( locale._locale );
+			$.extend( locale, {
+				firstDay: globalize.cldr.supplemental.weekData.firstDay(),
+				formatWeekdayShort: function( date ) {
+
+					// Return the short weekday if its length is < 3. Otherwise, its narrow form.
+					var shortWeekday = globalize.formatDate( date, { pattern: "EEEEEE" } );
+					return shortWeekday.length > 3 ?
+						globalize.formatDate( date, { pattern: "EEEEE" } ) :
+						shortWeekday;
+				},
+				formatWeekdayFull: function( date ) {
+					return globalize.formatDate( date, { pattern: "EEEE" } );
+				},
+				formatMonth: function( date ) {
+					return globalize.formatDate( date, { pattern: "MMMM" } );
+				},
+				formatWeekOfYear: function( date ) {
+					return globalize.formatDate( date, { pattern: "w" } );
+				}
+			});
+		}
+
+		this.options.locale = locale;
+	},
+
 	_createCalendar: function() {
 		var classes = "ui-calendar ui-widget ui-widget-content ui-helper-clearfix ui-corner-all",
 			pickerHtml = "";
@@ -187,10 +232,10 @@ return $.widget( "ui.calendar", {
 
 		this.element
 			.addClass( classes )
-			.attr( {
+			.attr({
 				role: "region",
 				"aria-labelledby": this.id + "-title"
-			} )
+			})
 			.html( pickerHtml );
 
 		this._createButtonPane();
@@ -296,13 +341,14 @@ return $.widget( "ui.calendar", {
 	_buildGridHeading: function() {
 		var cells = "",
 			i = 0,
-			weekDayLength = this.viewDate.weekdays().length;
+			weekDayLength = this.viewDate.weekdays().length,
+			weekdays = this.date.weekdays();
 
 		if ( this.options.showWeek ) {
 			cells += "<th class='ui-calendar-week-col'>" + this._getTranslation( "weekHeader" ) + "</th>";
 		}
-		for ( ; i < weekDayLength; i++ ) {
+		for ( i; i < weekDayLength; i++ ) {
-			cells += this._buildGridHeaderCell( this.date.weekdays()[ i ] );
+			cells += this._buildGridHeaderCell( weekdays[ i ] );
 		}
 
 		return "<thead role='presentation'>" +
@@ -319,8 +365,6 @@ return $.widget( "ui.calendar", {
 	},
 
 	_buildGridBody: function() {
-
-		// this.date.days() needs caching as it has O(n^2) complexity.
 		var days = this.viewDate.days(),
 			i = 0,
 			rows = "";
@@ -454,7 +498,7 @@ return $.widget( "ui.calendar", {
 			$( "<button></button>", props )
 				.button( buttonOptions )
 				.appendTo( that.buttonSet );
-		} );
+		});
 		this.element.addClass( "ui-calendar-buttons" );
 		this.buttonPane.appendTo( this.element );
 	},
@@ -511,17 +555,18 @@ return $.widget( "ui.calendar", {
 	},
 
 	_setHiddenPicker: function() {
-		this.element.attr( {
+		this.element.attr({
 			"aria-hidden": "true",
 			"aria-expanded": "false"
-		} );
+		});
 	},
 
 	value: function( value ) {
+		var locale = this.options.locale;
 		if ( arguments.length ) {
-			this.valueAsDate( Globalize.parseDate( value, this.options.dateFormat ) );
+			this.valueAsDate( locale.parse( value ) );
 		} else {
-			return Globalize.formatDate( this.option( "value" ), this.options.dateFormat );
+			return locale.format( this.option( "value" ) );
 		}
 	},
 
@@ -572,7 +617,7 @@ return $.widget( "ui.calendar", {
 			if ( key in that.refreshRelatedOptions ) {
 				refresh = true;
 			}
-		} );
+		});
 
 		if ( refresh ) {
 			this._refresh();
@@ -611,10 +656,12 @@ return $.widget( "ui.calendar", {
 			this.viewDate.eachDay = value;
 		}
 
-		if ( key === "dateFormat" ) {
+		if ( key === "locale" ) {
-			this.date.setFormat( value );
+			this._setLocale( value );
+			this.date.setAttributes( this.options.locale );
+			this.refresh();
 		}
 	}
-} );
+});
 
-} ) );
+}));

ui/calendar/date.js

@@ -0,0 +1,245 @@
+/*
+ * jQuery UI Calendar/Date @VERSION
+ * http://jqueryui.com
+ *
+ * Based on Marc Grabanski's jQuery Date Plugin
+ * http://marcgrabanski.com/articles/jquery-date-plugin
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+(function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define([
+			"jquery"
+		], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+}(function( $ ) {
+
+$.ui = $.ui || {};
+
+var _Date,
+	weekdaysRev = {
+		"sun": 0,
+		"mon": 1,
+		"tue": 2,
+		"wed": 3,
+		"thu": 4,
+		"fri": 5,
+		"sat": 6
+	};
+
+_Date = function( date, attributes ) {
+	if ( !( this instanceof _Date ) ) {
+		return new _Date( date, options );
+	}
+
+	this.setAttributes( attributes );
+
+	if ( typeof date === "string" && date.length ) {
+		this.dateObject = attributes.parse( date );
+	} else if ( $.type( date ) === "date" ) {
+		this.dateObject = date;
+	}
+
+	this.dateObject = this.dateObject || new Date();
+};
+
+$.extend( _Date.prototype, {
+
+	setAttributes: function( attributes ) {
+		this.attributes = attributes;
+		this.firstDay = weekdaysRev[ this.attributes.firstDay ];
+	},
+
+	//TODO: same as the underlying Date object's terminology, but still misleading.
+	//TODO: We can use .setTime() instead of new Date and rename to setTimestamp.
+	setTime: function( time ) {
+		this.dateObject = new Date( time );
+		return this;
+	},
+
+	setDay: function( day ) {
+		var date = this.dateObject;
+		// FIXME: Why not to use .setDate?
+		this.dateObject = new Date( date.getFullYear(), date.getMonth(), day, date.getHours(),
+			date.getMinutes(), date.getSeconds() );
+		return this;
+	},
+
+	setMonth: function( month ) {
+
+		// Overflow example:  Month is October 31 (yeah Halloween) and month is changed to April with 30 days,
+		// the new date will me May 1.  We will honor the month the user wants to set and if and overflow
+		// occurs, set to last day of month.
+		var date = this.dateObject,
+			days = date.getDay(), year = date.getFullYear();
+		if ( days > this.daysInMonth( year, month ) ) {
+
+			// Overflow
+			days = this.daysInMonth( year, month );
+		}
+		this.dateObject = new Date( year, month, days, date.getHours(),
+			date.getMinutes(), date.getSeconds() );
+		return this;
+	},
+
+	setYear: function( year ) {
+		var date = this.dateObject,
+			day = date.getDate(),
+			month = date.getMonth();
+
+		// Check if Leap, and February and day is 29th
+		if ( this.isLeapYear( year ) && month == 1 && day == 29 ) {
+
+			// set day to last day of February
+			day = this.daysInMonth( year, month );
+		}
+		this.dateObject = new Date( year, month, day, date.getHours(),
+			date.getMinutes(), date.getSeconds() );
+		return this;
+	},
+
+	setFullDate: function( year, month, day ) {
+		this.dateObject = new Date( year, month, day );
+		return this;
+	},
+
+	adjust: function( period, offset ) {
+		var date = this.dateObject,
+			day = period == "D" ? date.getDate() + offset : date.getDate(),
+			month = period == "M" ? date.getMonth() + offset : date.getMonth(),
+			year = period == "Y" ? date.getFullYear() + offset : date.getFullYear();
+
+		// If not day, update the day to the new month and year
+		if ( period != "D" ) {
+			day = Math.max( 1, Math.min( day, this.daysInMonth( year, month ) ) );
+		}
+		this.dateObject = new Date( year, month, day, date.getHours(),
+			date.getMinutes(), date.getSeconds() );
+		return this;
+	},
+
+	daysInMonth: function( year, month ) {
+		var date = this.dateObject;
+		year = year || date.getFullYear();
+		month = month || date.getMonth();
+		return 32 - new Date( year, month, 32 ).getDate();
+	},
+
+	monthName: function() {
+		return this.attributes.formatMonth( this.dateObject );
+	},
+
+	day: function() {
+		return this.dateObject.getDate();
+	},
+
+	month: function() {
+		return this.dateObject.getMonth();
+	},
+
+	year: function() {
+		return this.dateObject.getFullYear();
+	},
+
+	isLeapYear: function( year ) {
+		year = year || this.dateObject.getFullYear();
+		return new Date( year, 1, 29 ).getMonth() == 1;
+	},
+
+	weekdays: function() {
+		var date,
+			firstDay = this.firstDay,
+			result = [];
+
+		// date = firstDay
+		date = new Date( this.dateObject.getTime() );
+		date.setDate( date.getDate() + firstDay - date.getDay() );
+
+		for ( var dow = 0; dow < 7; dow++ && date.setDate( date.getDate() + 1 ) ) {
+			result.push({
+				shortname: this.attributes.formatWeekdayShort( date ),
+				fullname: this.attributes.formatWeekdayFull( date )
+			});
+		}
+		return result;
+	},
+
+	days: function() {
+		var result = [],
+			today = new _Date( new Date(), this.attributes ),
+			date = this.dateObject,
+			firstDayOfMonth = new Date( this.year(), date.getMonth(), 1 ).getDay(),
+			leadDays = ( firstDayOfMonth - this.firstDay + 7 ) % 7,
+			rows = Math.ceil( ( leadDays + this.daysInMonth() ) / 7 ),
+			printDate = new Date( this.year(), date.getMonth(), 1 - leadDays );
+		for ( var row = 0; row < rows; row++ ) {
+			var week = result[ result.length ] = {
+				number: this.attributes.formatWeekOfYear( printDate ),
+				days: []
+			};
+			for ( var dayx = 0; dayx < 7; dayx++ ) {
+				var day = week.days[ week.days.length ] = {
+					lead: printDate.getMonth() !== date.getMonth(),
+					date: printDate.getDate(),
+					month: printDate.getMonth(),
+					year: printDate.getFullYear(),
+					timestamp: printDate.getTime(),
+					today: today.equal( printDate )
+				};
+				day.render = day.selectable = !day.lead;
+				if ( this.eachDay ) {
+					this.eachDay( day );
+				}
+
+				// TODO use adjust("D", 1)?
+				printDate.setDate( printDate.getDate() + 1 );
+			}
+		}
+		return result;
+	},
+
+	// specialized for multi-month template, could be used in general
+	months: function( add ) {
+		var clone,
+			result = [ this ];
+
+		for ( var i = 0; i < add; i++ ) {
+			clone = this.clone();
+			clone.adjust( "M", i + 1 );
+			result.push( clone );
+		}
+		result[ 0 ].first = true;
+		result[ result.length - 1 ].last = true;
+		return result;
+	},
+
+	clone: function() {
+		var date = this.dateObject;
+		return new _Date( new Date( date.getTime() ), this.attributes );
+	},
+
+	// TODO compare year, month, day each for better performance
+	equal: function( other ) {
+		var format = function( date ) {
+			return "" + date.getFullYear() + date.getMonth() + date.getDate();
+		}
+		return format( this.dateObject ) === format( other );
+	},
+
+	date: function() {
+		return this.dateObject;
+	}
+});
+
+return $.ui.calendarDate = _Date;
+
+}));

ui/datepicker.js

@@ -20,6 +20,7 @@
 		define([
 			"jquery",
 			"globalize",
+			"globalize/date",
 			"./core",
 			"./widget",
 			"./calendar",
@@ -36,6 +37,7 @@ var widget = $.widget( "ui.datepicker", {
 	version: "@VERSION",
 	options: {
 		appendTo: null,
+		locale: "en",
 		position: {
 			my: "left top",
 			at: "left bottom"
@@ -54,7 +56,19 @@ var widget = $.widget( "ui.datepicker", {
 		"min", "numberOfMonths", "showWeek" ],
 
 	_create: function() {
+		var globalize;
 		this.suppressExpandOnFocus = false;
+
+		this._setLocale( this.options.locale );
+
+		// FIXME: can we use Date instead?
+		if ( $.type( this.options.max ) === "string" ) {
+			this.options.max = globalize.parseDate( this.options.max , { pattern: "yyyy-MM-dd" } );
+		}
+		if ( $.type( this.options.min ) === "string" ) {
+			this.options.min = globalize.parseDate( this.options.min , { pattern: "yyyy-MM-dd" } );
+		}
+
 		this._createCalendar();
 
 		this._on( this._inputEvents );
@@ -206,7 +220,7 @@ var widget = $.widget( "ui.datepicker", {
 		}
 
 		if ( !element || !element[ 0 ] ) {
-			element = this.element.closest( ".ui-front, dialog" );
+			element = this.element.closest( ".ui-front" );
 		}
 
 		if ( !element.length ) {
@@ -269,13 +283,29 @@ var widget = $.widget( "ui.datepicker", {
 		});
 	},
 
+	_setLocale: function( locale ) {
+		if ( typeof locale === "string" ) {
+			globalize = new Globalize( locale );
+			locale = {
+				_locale: locale,
+				format: function( date ) {
+					return globalize.formatDate( date, { date: "short" } );
+				},
+				parse: function( stringDate ) {
+					return globalize.parseDate( stringDate, { date: "short" } );
+				}
+			};
+		}
+		this.options.locale = locale;
+	},
+
 	_buildPosition: function() {
 		return $.extend( { of: this.element }, this.options.position );
 	},
 
 	value: function( value ) {
 		if ( arguments.length ) {
-			this.valueAsDate( Globalize.parseDate( value, this.options.dateFormat ) );
+			this.valueAsDate( this.options.locale.parse( value ) );
 		} else {
 			return this._getParsedValue() ? this.element.val() : null;
 		}
@@ -285,7 +315,7 @@ var widget = $.widget( "ui.datepicker", {
 		if ( arguments.length ) {
 			if ( this.calendarInstance._isValid( value ) ) {
 				this.calendarInstance.valueAsDate( value );
-				this.element.val( Globalize.formatDate( value, this.options.dateFormat ) );
+				this.element.val( this.options.locale.format( value ) );
 			}
 		} else {
 			return this._getParsedValue();
@@ -307,7 +337,7 @@ var widget = $.widget( "ui.datepicker", {
 	},
 
 	_getParsedValue: function() {
-		return Globalize.parseDate( this.element.val(), this.options.dateFormat );
+		return this.options.locale.parse( this.element.val() );
 	},
 
 	_setOption: function( key, value ) {
@@ -321,7 +351,8 @@ var widget = $.widget( "ui.datepicker", {
 			this.calendar.appendTo( this._appendTo() );
 		}
 
-		if ( key === "dateFormat" ) {
+		if ( key === "locale" ) {
+			this._setLocale( value );
 			this.element.val( this.calendarInstance.value() );
 		}