mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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.
This commit is contained in:
Rafael Xavier de Souza
Felix Nagel
parent
fda7a7e98f
commit
82ea79ce5f
@ -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() {
|
||||
Globalize.locale( $( this ).val() );
|
||||
select.change( function() {
|
||||
datepicker.datepicker( "option", {
|
||||
locale: select.val()
|
||||
});
|
||||
datepicker.datepicker( "valueAsDate", datepicker.datepicker( "valueAsDate" ) );
|
||||
});
|
||||
});
|
||||
|
||||
@ -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",
|
||||
"./widget",
|
||||
"globalize/date",
|
||||
"./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++ ) {
|
||||
cells += this._buildGridHeaderCell( this.date.weekdays()[ i ] );
|
||||
for ( i; i < weekDayLength; 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" ) {
|
||||
this.date.setFormat( value );
|
||||
if ( key === "locale" ) {
|
||||
this._setLocale( value );
|
||||
this.date.setAttributes( this.options.locale );
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
} ) );
|
||||
}));
|
||||
|
||||
245
ui/calendar/date.js
Normal file
245
ui/calendar/date.js
Normal file
@ -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;
|
||||
|
||||
}));
|
||||
@ -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() );
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user