/*!
* jQuery UI Calendar @VERSION
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
//>>label: Datepicker
//>>group: Widgets
//>>description: Displays a calendar for inline date selection.
//>>docs: http://api.jqueryui.com/calendar/
//>>demos: http://jqueryui.com/calendar/
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
// TODO: Keep button even if its optional?
define([
"jquery",
"globalize",
"globalize/date",
"./button",
"./calendar/date",
"./core",
"./widget"
], factory );
} else {
// Browser globals
factory( jQuery, Globalize );
}
}(function( $, Globalize ) {
return $.widget( "ui.calendar", {
version: "@VERSION",
options: {
buttons: [],
eachDay: $.noop,
labels: {
"datePickerRole": "date picker",
"nextText": "Next",
"prevText": "Prev",
"weekHeader": "Wk"
},
locale: "en",
max: null,
min: null,
numberOfMonths: 1,
showWeek: false,
value: null,
// callbacks
select: null
},
refreshRelatedOptions: {
eachDay: true,
max: true,
min: true,
showWeek: true,
value: true
},
_create: function() {
this.id = this.element.uniqueId().attr( "id" );
this.labels = this.options.labels;
this.buttonClickContext = this.element[ 0 ];
this._setLocale( this.options.locale );
this.date = new $.ui.calendarDate( this.options.value, this._calendarDateOptions );
this.viewDate = this.date.clone();
this.viewDate.eachDay = this.options.eachDay;
this._on( this.element, {
"click .ui-calendar-prev": function( event ) {
event.preventDefault();
this.date.adjust( "M", -this.options.numberOfMonths );
this._refresh();
},
"click .ui-calendar-next": function( event ) {
event.preventDefault();
this.date.adjust( "M", this.options.numberOfMonths );
this._refresh();
},
"mousedown .ui-calendar-calendar button": function( event ) {
event.preventDefault();
this._setOption( "value", new Date( $( event.currentTarget ).data( "timestamp" ) ) );
this.refresh();
this._trigger( "select", event );
this.grid.focus();
},
"mouseenter .ui-calendar-header button": "_hover",
"mouseleave .ui-calendar-header button": "_hover",
"mouseenter .ui-calendar-calendar button": "_hover",
"mouseleave .ui-calendar-calendar button": "_hover",
"keydown .ui-calendar-calendar": "_handleKeydown"
});
this._createCalendar();
},
_hover: function( event ) {
$( event.currentTarget ).toggleClass( "ui-state-hover" );
},
_handleKeydown: function( event ) {
switch ( event.keyCode ) {
case $.ui.keyCode.ENTER:
this.activeDescendant.mousedown();
return;
case $.ui.keyCode.PAGE_UP:
this.date.adjust( event.altKey ? "Y" : "M", -1 );
break;
case $.ui.keyCode.PAGE_DOWN:
this.date.adjust( event.altKey ? "Y" : "M", 1 );
break;
case $.ui.keyCode.END:
this.date.setDay( this.date.daysInMonth() );
break;
case $.ui.keyCode.HOME:
this.date.setDay( 1 );
break;
case $.ui.keyCode.LEFT:
this.date.adjust( "D", -1 );
break;
case $.ui.keyCode.UP:
this.date.adjust( "D", -7 );
break;
case $.ui.keyCode.RIGHT:
this.date.adjust( "D", 1 );
break;
case $.ui.keyCode.DOWN:
this.date.adjust( "D", 7 );
break;
default:
event.preventDefault();
return;
}
if ( this._needsRefresh() ) {
this._refresh();
this.grid.focus();
}
this._setActiveDescendant();
},
_needsRefresh: function() {
if ( this.date.month() !== this.viewDate.month() || this.date.year() !== this.viewDate.year() ) {
// Check if the needed day is already present in our grid due
// to eachDay option changes (eg. other-months demo)
return !this.grid.find(
this._sanitizeSelector( "#" + this._getDayId( this.date ) )
).length;
}
return false;
},
_setActiveDescendant: function() {
var id = this._getDayId( this.date );
this.grid
.attr( "aria-activedescendant", id )
.find( ".ui-state-focus" )
.removeClass( "ui-state-focus" );
this.activeDescendant = this.grid.find(
this._sanitizeSelector( "#" + id ) + " > button"
).addClass( "ui-state-focus" );
},
_setLocale: function( locale ) {
var globalize = new Globalize( locale ),
weekdayShortFormatter = globalize.dateFormatter({ pattern: "EEEEEE" }),
weekdayNarrowFormatter = globalize.dateFormatter({ pattern: "EEEEE" });
this._format = globalize.dateFormatter({ date: "short" });
this._parse = globalize.dateParser({ date: "short" });
this._calendarDateOptions = {
firstDay: globalize.cldr.supplemental.weekData.firstDay(),
formatWeekdayShort: function( date ) {
// Return the short weekday if its length is < 3. Otherwise, its narrow form.
var shortWeekday = weekdayShortFormatter( date );
return shortWeekday.length > 3 ? weekdayNarrowFormatter( date ) : shortWeekday;
},
formatWeekdayFull: globalize.dateFormatter({ pattern: "EEEE" }),
formatMonth: globalize.dateFormatter({ pattern: "MMMM" }),
formatWeekOfYear: globalize.dateFormatter({ pattern: "w" }),
parse: this._parse
};
},
_createCalendar: function() {
var classes = "ui-calendar ui-widget ui-widget-content ui-helper-clearfix ui-corner-all",
pickerHtml = "";
if ( this.options.numberOfMonths === 1 ) {
pickerHtml = this._buildHeader() + this._buildGrid();
} else {
pickerHtml = this._buildMultiplePicker();
classes += " ui-calendar-multi";
}
this.element
.addClass( classes )
.attr({
role: "region",
"aria-labelledby": this.id + "-title"
})
.html( pickerHtml );
this._createButtonPane();
this.grid = this.element.find( ".ui-calendar-calendar" );
},
_buildMultiplePicker: function() {
var headerClass,
html = "",
currentDate = this.viewDate,
months = this.viewDate.months( this.options.numberOfMonths - 1 ),
i = 0;
for ( ; i < months.length; i++ ) {
// TODO: Shouldn't we pass date as a parameter to build* fns instead of setting this.date?
this.viewDate = months[ i ];
headerClass = "ui-calendar-header ui-widget-header ui-helper-clearfix";
if ( months[ i ].first ) {
headerClass += " ui-corner-left";
} else if ( months[ i ].last ) {
headerClass += " ui-corner-right";
}
html += "
" +
"
";
if ( months[ i ].first ) {
html += this._buildPreviousLink();
} else if ( months[ i ].last ) {
html += this._buildNextLink();
}
html += this._buildTitlebar() + "