diff options
Diffstat (limited to 'ui/widgets')
| -rw-r--r-- | ui/widgets/calendar.js | 812 | ||||
| -rw-r--r-- | ui/widgets/datepicker.js | 2233 |
2 files changed, 1071 insertions, 1974 deletions
diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js new file mode 100644 index 000000000..d9ed4dee3 --- /dev/null +++ b/ui/widgets/calendar.js @@ -0,0 +1,812 @@ +/*! + * jQuery UI Calendar @VERSION + * http://jqueryui.com + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ + +//>>label: Calendar +//>>group: Widgets +//>>description: Displays a calendar for inline date selection. +//>>docs: http://api.jqueryui.com/calendar/ +//>>demos: http://jqueryui.com/calendar/ +//>>css.structure: ../../themes/base/core.css +//>>css.structure: ../../themes/base/calendar.css +//>>css.theme: ../../themes/base/theme.css + +( function( factory ) { + if ( typeof define === "function" && define.amd ) { + + // AMD. Register as an anonymous module. + define( [ + "jquery", + "globalize", + "globalize/date", + "globalize-locales", + "../date", + "./button", + "../widget", + "../version", + "../keycode", + "../unique-id", + "../tabbable", + "../escape-selector" + ], factory ); + } else { + + // Browser globals + factory( jQuery, Globalize ); + } +}( function( $, Globalize ) { + +return $.widget( "ui.calendar", { + version: "@VERSION", + options: { + buttons: [], + classes: { + "ui-calendar": "ui-corner-all", + "ui-calendar-header-first": "ui-corner-left", + "ui-calendar-header-last": "ui-corner-right", + "ui-calendar-prev": "ui-corner-all", + "ui-calendar-next": "ui-corner-all" + }, + dateFormat: { date: "short" }, + eachDay: $.noop, + icons: { + prevButton: "ui-icon-circle-triangle-w", + nextButton: "ui-icon-circle-triangle-e" + }, + labels: { + "datePickerRole": "date picker", + "nextText": "Next", + "prevText": "Prev", + "weekHeader": "Wk" + }, + locale: "en", + max: null, + min: null, + numberOfMonths: 1, + showWeek: false, + value: null, + + // callbacks + change: null, + refresh: null, + select: null + }, + + refreshRelatedOptions: { + dateFormat: true, + eachDay: true, + locale: true, + max: true, + min: true, + showWeek: true, + value: true + }, + + _create: function() { + this.id = this.element.uniqueId().attr( "id" ); + this._setGridId( this.id ); + this.labels = this.options.labels; + this.buttonClickContext = this.element[ 0 ]; + + this._setLocale( this.options.locale, this.options.dateFormat ); + + this._setDate( new $.ui.date( this.options.value, this._calendarDateOptions ) ); + this._setViewDate( this._getDate().clone() ); + this._getViewDate().eachDay = this.options.eachDay; + + this._on( this.element, { + "click .ui-calendar-prev": function( event ) { + event.preventDefault(); + this._getDate().adjust( "M", -this.options.numberOfMonths ); + this._updateView(); + }, + "click .ui-calendar-next": function( event ) { + event.preventDefault(); + this._getDate().adjust( "M", this.options.numberOfMonths ); + this._updateView(); + }, + "mousedown .ui-calendar-calendar button": "_select", + "mouseenter .ui-calendar-header-buttons button": "_hover", + "mouseleave .ui-calendar-header-buttons button": "_hover", + "mouseenter .ui-calendar-calendar button": "_hover", + "mouseleave .ui-calendar-calendar button": "_hover", + "keydown .ui-calendar-calendar": "_handleKeydown" + } ); + + this._createCalendar(); + this._setActiveDescendant(); + }, + + _hover: function( event ) { + this._addClass( $( event.currentTarget ), null, "ui-state-hover" ); + }, + + _select: function( event ) { + var oldValue = this.options.value ? this.options.value.getTime() : ""; + + this._setOption( + "value", new Date( $( event.currentTarget ).data( "ui-calendar-timestamp" ) ) + ); + this._updateDayElement( "ui-state-active" ); + + // Allow datepicker to handle focus + if ( this._trigger( "select", event, { value: this.options.value } ) !== false ) { + this.activeDescendant.closest( this.grid ).focus(); + event.preventDefault(); + } + + if ( oldValue !== this.options.value.getTime() ) { + this._trigger( "change", event, { value: this.options.value } ); + } + }, + + _handleKeydown: function( event ) { + var pageAltKey = ( event.altKey || event.ctrlKey && event.shiftKey ); + + switch ( event.keyCode ) { + case $.ui.keyCode.ENTER: + this._select( + $.Event( event, { currentTarget: this.activeDescendant[ 0 ] } ) + ); + return; + case $.ui.keyCode.PAGE_UP: + this._getDate().adjust( pageAltKey ? "Y" : "M", -1 ); + break; + case $.ui.keyCode.PAGE_DOWN: + this._getDate().adjust( pageAltKey ? "Y" : "M", 1 ); + break; + case $.ui.keyCode.END: + this._getDate().setDay( this._getDate().daysInMonth() ); + break; + case $.ui.keyCode.HOME: + this._getDate().setDay( 1 ); + break; + case $.ui.keyCode.LEFT: + this._getDate().adjust( "D", -1 ); + break; + case $.ui.keyCode.UP: + this._getDate().adjust( "D", -7 ); + break; + case $.ui.keyCode.RIGHT: + this._getDate().adjust( "D", 1 ); + break; + case $.ui.keyCode.DOWN: + this._getDate().adjust( "D", 7 ); + break; + default: + return; + } + + if ( this._needsRefresh() ) { + this._updateView(); + this.activeDescendant.closest( this.grid ).focus(); + } else { + this._setActiveDescendant(); + } + }, + + _updateView: function() { + if ( this.options.numberOfMonths > 1 && + this._getDate().year() === this._getViewDate().year() + ) { + this._getViewDate().adjust( "M", this.options.numberOfMonths * + ( this._getDate().month() > this._getViewDate().month() ? 1 : -1 ) + ); + } else { + this._getViewDate().setTimestamp( this._getDate().timestamp() ); + } + + this.refresh(); + }, + + _needsRefresh: function() { + if ( this._getDate().month() !== this._getViewDate().month() || + this._getDate().year() !== this._getViewDate().year() + ) { + + // Check if the needed day is already present in our grid due + // to eachDay option changes (eg. other-months demo) + return !this._getDateElement( this._getDayId( this._getDate() ) ).length; + } + + return false; + }, + + _setActiveDescendant: function() { + this.activeDescendant = this._updateDayElement( "ui-state-focus" ); + }, + + _updateDayElement: function( state ) { + var id = this._getDayId( this._getDate() ), + button = this._getDateElement( id ).children( "button" ); + + this.grid.attr( "aria-activedescendant", id ); + + this._removeClass( this.grid.find( "button." + state ), null, state ); + this._addClass( button, null, state ); + + return button; + }, + + _getDateElement: function( id ) { + return this.grid.find( "#" + $.ui.escapeSelector( id ) ); + }, + + _setLocale: function( locale, dateFormat ) { + var globalize = new Globalize( locale ), + weekdayShortFormatter = globalize.dateFormatter( { raw: "EEEEEE" } ), + weekdayNarrowFormatter = globalize.dateFormatter( { raw: "EEEEE" } ), + firstDayRaw = globalize.dateFormatter( { raw: "c" } )( new Date( 1970, 0, 3 ) ); + + this._format = globalize.dateFormatter( dateFormat ); + this._parse = globalize.dateParser( dateFormat ); + this._calendarDateOptions = { + firstDay: ( 7 - globalize.parseNumber( firstDayRaw ) ), + 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( { raw: "EEEE" } ), + formatMonth: globalize.dateFormatter( { raw: "MMMM" } ), + formatWeekOfYear: globalize.dateFormatter( { raw: "w" } ), + parse: this._parse + }; + }, + + _createCalendar: function() { + this.element + .attr( "role", "region" ) + .append( this._buildHeaderButtons() ); + + if ( this.options.numberOfMonths === 1 ) { + this._buildSinglePicker(); + } else { + this._buildMultiplePicker(); + } + + this._addClass( + this.element, "ui-calendar", "ui-widget ui-widget-content ui-helper-clearfix" + ); + + this._refreshHeaderButtons(); + this._createButtonPane(); + + this.grid = this.element.find( ".ui-calendar-calendar" ); + }, + + _buildSinglePicker: function() { + var header = this._buildHeader(); + + this._addClass( header, "ui-calendar-header-first ui-calendar-header-last" ); + this.element + .attr( "aria-labelledby", this._getGridId() + "-title" ) + .append( header ) + .append( this._buildGrid() ); + }, + + _buildMultiplePicker: function() { + var element, header, + rowBreak = $( "<div>" ), + currentDate = this._getViewDate(), + months = this._getViewDate().months( this.options.numberOfMonths - 1 ), + labelledBy = [], + i = 0; + + for ( ; i < months.length; i++ ) { + + // TODO: Shouldn't we pass date as a parameter to build* fns + // instead of setting this.viewDate? + this._setViewDate( months[ i ] ); + this._setGridId( this.id + "-" + i ); + labelledBy.push( this._getGridId() + "-title" ); + + element = $( "<div>" ); + this._addClass( element, "ui-calendar-group" ); + + header = this._buildHeader(); + this._addClass( header, "ui-calendar-header-" + + ( ( months[ i ].first ) ? "first" : ( months[ i ].last ) ? "last" : "middle" ) + ); + + element.appendTo( this.element ) + .append( header ) + .append( this._buildGrid() ); + } + + this._addClass( this.element, "ui-calendar-multi" ) + ._addClass( rowBreak, "ui-calendar-row-break" ); + + this.element + .attr( "aria-labelledby", labelledBy.join( " " ) ) + .append( rowBreak ); + + this._setViewDate( currentDate ); + }, + + _buildHeaderButtons: function() { + var buttons = $( "<div>" ); + + this._addClass( buttons, "ui-calendar-header-buttons" ); + + return buttons + .append( this.prevButton = this._buildIconButton( "prev" ) ) + .append( this.nextButton = this._buildIconButton( "next" ) ); + }, + + _buildIconButton: function( key ) { + var button = $( "<button>" ), + icon = $( "<span>" ); + + this._addClass( button, "ui-calendar-" + key ) + ._addClass( icon, null, "ui-icon " + this.options.icons[ key + "Button" ] ); + + return button.append( icon ); + }, + + _buildHeader: function() { + var header = $( "<div>" ), + title = $( "<div>", { role: "header", id: this._getGridId() + "-title" } ), + notice = $( "<span>" ).text( ", " + this._getTranslation( "datePickerRole" ) ); + + this._addClass( header, "ui-calendar-header", "ui-widget-header ui-helper-clearfix" ) + ._addClass( notice, null, "ui-helper-hidden-accessible" ); + + return header.append( + title + .append( this._buildTitle() ) + .append( notice ) + ); + }, + + _buildTitle: function() { + var title = $( "<div>", { role: "alert", id: this._getGridId() + "-month-label" } ), + month = this._buildTitleMonth(), + year = this._buildTitleYear(); + + this._addClass( title, "ui-calendar-title" ) + ._addClass( month, "ui-calendar-month" ) + ._addClass( year, "ui-calendar-year" ); + + return title + .append( month ) + .append( " " ) + .append( year ); + }, + + _buildTitleMonth: function() { + return $( "<span>" ).text( this._getViewDate().monthName() ); + }, + + _buildTitleYear: function() { + return $( "<span>" ).text( this._getViewDate().year() ); + }, + + _buildGrid: function() { + var table = $( "<table>", { + role: "grid", + tabindex: 0, + "aria-readonly": true, + "aria-labelledby": this._getGridId() + "-month-label", + "aria-activedescendant": this._getDayId( this._getDate() ) + } ); + + this._addClass( table, "ui-calendar-calendar" ); + + return table + .append( this._buildGridHeading() ) + .append( this._buildGridBody() ); + }, + + _buildGridHeading: function() { + var head = $( "<thead role='presentation'>" ), + week = $( "<th>" ), + row = $( "<tr role='row'>" ), + i = 0, + weekDayLength = this._getViewDate().weekdays().length, + weekdays = this._getViewDate().weekdays(); + + if ( this.options.showWeek ) { + this._addClass( week, "ui-calendar-week-col" ); + row.append( week.text( this._getTranslation( "weekHeader" ) ) ); + } + + for ( ; i < weekDayLength; i++ ) { + row.append( this._buildGridHeaderCell( weekdays[ i ] ) ); + } + + return head.append( row ); + }, + + _buildGridHeaderCell: function( day ) { + return $( "<th role='columnheader' abbr='" + day.fullname + + "' aria-label='" + day.fullname + "'>" + + "<span title='" + day.fullname + "'>" + day.shortname + "</span>" + + "</th>" ); + }, + + _buildGridBody: function() { + var days = this._getViewDate().days(), + i = 0, + rows = ""; + + for ( ; i < days.length; i++ ) { + rows += this._buildWeekRow( days[ i ] ); + } + + return "<tbody role='presentation'>" + rows + "</tbody>"; + }, + + _buildWeekRow: function( week ) { + var cells = "", + i = 0; + + if ( this.options.showWeek ) { + cells += "<td class='ui-calendar-week-col'>" + week.number + "</td>"; + } + for ( ; i < week.days.length; i++ ) { + cells += this._buildDayCell( week.days[ i ] ); + } + + return "<tr role='row'>" + cells + "</tr>"; + }, + + _buildDayCell: function( day ) { + var content = "", + dateObject = new Date( day.timestamp ), + dayName = this._calendarDateOptions.formatWeekdayFull( dateObject ), + attributes = [ + "role='gridcell'", + "aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'", + "aria-label='" + dayName + ", " + this._format( dateObject ) + "'", + "aria-describedby='" + this._getGridId() + "-month-label'" + ], + selectable = ( day.selectable && this._isValid( dateObject ) ); + + if ( day.render ) { + attributes.push( + "id='" + this.id + "-" + day.year + "-" + day.month + "-" + day.date + "'" + ); + + if ( !selectable ) { + attributes.push( "aria-disabled='true'" ); + attributes.push( "class='ui-state-disabled'" ); + } + + content = this._buildDayElement( day, selectable ); + } + + return "<td " + attributes.join( " " ) + ">" + content + "</td>"; + }, + + _getDayId: function( date ) { + return this.id + "-" + date.year() + "-" + date.month() + "-" + date.day(); + }, + + _buildDayElement: function( day, selectable ) { + var attributes, content, + classes = [ "ui-state-default" ]; + + if ( day === this._getDate() && selectable ) { + classes.push( "ui-state-focus" ); + } + if ( this._isCurrent( day ) ) { + classes.push( "ui-state-active" ); + } + if ( day.today ) { + classes.push( "ui-state-highlight" ); + } + if ( day.extraClasses ) { + classes.push( day.extraClasses.split( " " ) ); + } + + attributes = " class='" + classes.join( " " ) + "'"; + if ( selectable ) { + attributes += " tabindex='-1' data-ui-calendar-timestamp='" + day.timestamp + "'"; + } else { + attributes += " disabled='disabled'"; + } + content = "<button" + attributes + ">" + day.date + "</button>"; + + if ( day.today ) { + content += "<span class='ui-helper-hidden-accessible'>, " + + this._getTranslation( "currentText" ) + "</span>"; + } + + return content; + }, + + _isCurrent: function( day ) { + return this.options.value && day.timestamp === this.options.value.getTime(); + }, + + _createButtonPane: function() { + this.buttonPane = $( "<div>" ); + this.buttonSet = $( "<div>" ).appendTo( this.buttonPane ); + + this._addClass( + this.buttonPane, "ui-calendar-buttonpane", "ui-widget-content ui-helper-clearfix" + ) + ._addClass( this.buttonSet, "ui-calendar-buttonset" ); + + this._createButtons(); + }, + + _createButtons: function() { + var that = this, + buttons = this.options.buttons; + + this.buttonPane.remove(); + this.buttonSet.empty(); + + if ( $.isEmptyObject( buttons ) || ( $.isArray( buttons ) && !buttons.length ) ) { + this._removeClass( this.element, "ui-calendar-buttons" ); + return; + } + + $.each( buttons, function( name, props ) { + var click, buttonOptions; + props = $.isFunction( props ) ? + { click: props, text: name } : + props; + + // Default to a non-submitting button + props = $.extend( { type: "button" }, props ); + + // Change the context for the click callback to be the main element + click = props.click; + buttonOptions = { + icon: props.icon, + iconPosition: props.iconPosition, + showLabel: props.showLabel + }; + + delete props.click; + delete props.icon; + delete props.iconPosition; + delete props.showLabel; + + $( "<button></button>", props ) + .button( buttonOptions ) + .appendTo( that.buttonSet ) + .on( "click", function() { + click.apply( that.buttonClickContext, arguments ); + } ); + } ); + + this._addClass( this.element, "ui-calendar-buttons" ); + this.buttonPane.appendTo( this.element ); + }, + + // Refreshing the entire calendar 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. + refresh: function() { + this.labels = this.options.labels; + + // Determine which day grid cell to focus after refresh + if ( this.options.numberOfMonths === 1 ) { + this.element.find( ".ui-calendar-title" ).replaceWith( this._buildTitle() ); + this.element.find( ".ui-calendar-calendar" ).replaceWith( this._buildGrid() ); + } else { + this._refreshMultiplePicker(); + } + + this.grid = this.element.find( ".ui-calendar-calendar" ); + + this._setActiveDescendant(); + this._refreshHeaderButtons(); + this._createButtons(); + + this._trigger( "refresh" ); + }, + + _refreshHeaderButtons: function() { + var prevText = this._getTranslation( "prevText" ), + nextText = this._getTranslation( "nextText" ); + + this.prevButton.attr( "title", prevText ).children().html( prevText ); + this.nextButton.attr( "title", nextText ).children().html( nextText ); + this._headerButtonsState(); + }, + + _headerButtonsState: function() { + var months = this._getViewDate().months( this.options.numberOfMonths - 1 ), + i = 0; + + for ( ; i < months.length; i++ ) { + if ( this.options.min !== null && months[ i ].first ) { + this._disableElement( this.prevButton, + ( this.options.min.getMonth() >= months[ i ].month() && + this.options.min.getFullYear() === months[ i ].year() ) || + this.options.min.getFullYear() > months[ i ].year() + ); + } + if ( this.options.max !== null && months[ i ].last ) { + this._disableElement( this.nextButton, + ( this.options.max.getMonth() <= months[ i ].month() && + this.options.max.getFullYear() === months[ i ].year() ) || + this.options.max.getFullYear() < months[ i ].year() + ); + } + } + }, + + _disableElement: function( element, state ) { + element.attr( "aria-disabled", state ); + this._toggleClass( element, null, "ui-state-disabled", state ); + }, + + _refreshMultiplePicker: function() { + var i = 0; + + for ( ; i < this.options.numberOfMonths; i++ ) { + this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() ); + this.element.find( ".ui-calendar-calendar" ).eq( i ).replaceWith( this._buildGrid() ); + this._getViewDate().adjust( "M", 1 ); + } + this._getViewDate().adjust( "M", -this.options.numberOfMonths ); + }, + + _getTranslation: function( key ) { + return $( "<a>" ).text( this.labels[ key ] ).html(); + }, + + _setHiddenPicker: function() { + this.element.attr( { + "aria-hidden": "true", + "aria-expanded": "false" + } ); + }, + + _getGridId: function() { + return this.gridId; + }, + + _setGridId: function( id ) { + this.gridId = id; + }, + + _getDate: function() { + return this.date; + }, + + _setDate: function( date ) { + this.date = date; + }, + + _getViewDate: function() { + return this.viewDate; + }, + + _setViewDate: function( date ) { + this.viewDate = date; + }, + + value: function( value ) { + if ( arguments.length ) { + this.valueAsDate( this._parse( value ) ); + } else { + return this.option( "value" ) === null ? + null : this._format( this.option( "value" ) ); + } + }, + + valueAsDate: function( value ) { + if ( arguments.length ) { + this.option( "value", value ); + } else { + return this.options.value; + } + }, + + _isValid: function( value ) { + if ( $.type( value ) !== "date" ) { + return false; + } + + if ( $.type( this.options.max ) === "date" ) { + if ( value > this.options.max ) { + return false; + } + } + + if ( $.type( this.options.min ) === "date" ) { + if ( value < this.options.min ) { + return false; + } + } + + return true; + }, + + _destroy: function() { + this.element + .removeAttr( "role aria-labelledby" ) + .removeUniqueId() + .empty(); + }, + + _setOptions: function( options ) { + var that = this, + create = false, + refresh = false, + dateAttributes = false; + + $.each( options, function( key, value ) { + that._setOption( key, value ); + + if ( key === "numberOfMonths" ) { + create = true; + } + if ( key in that.refreshRelatedOptions ) { + refresh = true; + } + if ( key === "dateFormat" || key === "locale" ) { + dateAttributes = true; + } + } ); + + if ( dateAttributes ) { + this._setLocale( this.options.locale, this.options.dateFormat ); + this._getDate().setAttributes( this._calendarDateOptions ); + this._getViewDate().setAttributes( this._calendarDateOptions ); + } + if ( create || refresh ) { + this._getViewDate().setTimestamp( this._getDate().timestamp() ); + } + if ( create ) { + this.element.empty(); + this._removeClass( this.element, "ui-calendar-multi" ); + this._createCalendar(); + refresh = false; + } + if ( refresh ) { + this.refresh(); + } + }, + + _setOption: function( key, value ) { + if ( key === "value" ) { + if ( this._isValid( value ) ) { + this._getDate().setTimestamp( value.getTime() ); + } else { + value = null; + } + } + + if ( key === "max" || key === "min" ) { + if ( $.type( value ) !== "date" || value === null ) { + this._super( key, null ); + } else { + this._super( key, value ); + } + return; + } + + this._super( key, value ); + + if ( key === "buttons" ) { + this._createButtons(); + } + + if ( key === "disabled" ) { + this.element + .toggleClass( "ui-state-disabled", value ) + .attr( "aria-disabled", value ); + } + + if ( key === "eachDay" ) { + this._getViewDate().eachDay = value; + } + } +} ); + +} ) ); diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js index 63f713ec0..48926ff72 100644 --- a/ui/widgets/datepicker.js +++ b/ui/widgets/datepicker.js @@ -1,5 +1,3 @@ -// jscs:disable maximumLineLength -/* jscs:disable requireCamelCaseOrUpperCaseIdentifiers */ /*! * jQuery UI Datepicker @VERSION * http://jqueryui.com @@ -11,10 +9,11 @@ //>>label: Datepicker //>>group: Widgets -//>>description: Displays a calendar from an input or inline for selecting dates. +//>>description: Displays a calendar for input-based date selection. //>>docs: http://api.jqueryui.com/datepicker/ //>>demos: http://jqueryui.com/datepicker/ //>>css.structure: ../../themes/base/core.css +//>>css.structure: ../../themes/base/calendar.css //>>css.structure: ../../themes/base/datepicker.css //>>css.theme: ../../themes/base/theme.css @@ -24,2095 +23,381 @@ // AMD. Register as an anonymous module. define( [ "jquery", + "globalize", + "globalize/date", + "./calendar", + "../widget", + "../position", "../version", "../keycode" ], factory ); } else { // Browser globals - factory( jQuery ); + factory( jQuery, Globalize ); } -}( function( $ ) { +}( function( $, Globalize ) { -$.extend( $.ui, { datepicker: { version: "@VERSION" } } ); +var widget = $.widget( "ui.datepicker", { + version: "@VERSION", + defaultElement: "<input>", + options: { + appendTo: null, + position: { + my: "left top", + at: "left bottom" + }, + show: true, + hide: true, -var datepicker_instActive; - -function datepicker_getZindex( elem ) { - var position, value; - while ( elem.length && elem[ 0 ] !== document ) { - - // Ignore z-index if position is set to a value where z-index is ignored by the browser - // This makes behavior of this function consistent across browsers - // WebKit always returns auto if the element is positioned - position = elem.css( "position" ); - if ( position === "absolute" || position === "relative" || position === "fixed" ) { - - // IE returns 0 when zIndex is not specified - // other browsers return a string - // we ignore the case of nested elements with an explicit value of 0 - // <div style="z-index: -10;"><div style="z-index: 0;"></div></div> - value = parseInt( elem.css( "zIndex" ), 10 ); - if ( !isNaN( value ) && value !== 0 ) { - return value; - } - } - elem = elem.parent(); - } - - return 0; -} -/* Date picker manager. - Use the singleton instance of this class, $.datepicker, to interact with the date picker. - Settings for (groups of) date pickers are maintained in an instance object, - allowing multiple different settings on the same page. */ - -function Datepicker() { - this._curInst = null; // The current instance in use - this._keyEvent = false; // If the last event was a key event - this._disabledInputs = []; // List of date picker inputs that have been disabled - this._datepickerShowing = false; // True if the popup picker is showing , false if not - this._inDialog = false; // True if showing within a "dialog", false if not - this._mainDivId = "ui-datepicker-div"; // The ID of the main datepicker division - this._inlineClass = "ui-datepicker-inline"; // The name of the inline marker class - this._appendClass = "ui-datepicker-append"; // The name of the append marker class - this._triggerClass = "ui-datepicker-trigger"; // The name of the trigger marker class - this._dialogClass = "ui-datepicker-dialog"; // The name of the dialog marker class - this._disableClass = "ui-datepicker-disabled"; // The name of the disabled covering marker class - this._unselectableClass = "ui-datepicker-unselectable"; // The name of the unselectable cell marker class - this._currentClass = "ui-datepicker-current-day"; // The name of the current day marker class - this._dayOverClass = "ui-datepicker-days-cell-over"; // The name of the day hover marker class - this.regional = []; // Available regional settings, indexed by language code - this.regional[ "" ] = { // Default regional settings - closeText: "Done", // Display text for close link - prevText: "Prev", // Display text for previous month link - nextText: "Next", // Display text for next month link - currentText: "Today", // Display text for current month link - monthNames: [ "January","February","March","April","May","June", - "July","August","September","October","November","December" ], // Names of months for drop-down and formatting - monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], // For formatting - dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], // For formatting - dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], // For formatting - dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ], // Column headings for days starting at Sunday - weekHeader: "Wk", // Column header for week of the year - dateFormat: "mm/dd/yy", // See format options on parseDate - firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ... - isRTL: false, // True if right-to-left language, false if left-to-right - showMonthAfterYear: false, // True if the year select precedes month, false for month then year - yearSuffix: "" // Additional text to append to the year in the month headers - }; - this._defaults = { // Global defaults for all the date picker instances - showOn: "focus", // "focus" for popup on focus, - // "button" for trigger button, or "both" for either - showAnim: "fadeIn", // Name of jQuery animation for popup - showOptions: {}, // Options for enhanced animations - defaultDate: null, // Used when field is blank: actual date, - // +/-number for offset from today, null for today - appendText: "", // Display text following the input box, e.g. showing the format - buttonText: "...", // Text for trigger button - buttonImage: "", // URL for trigger button image - buttonImageOnly: false, // True if the image appears alone, false if it appears on a button - hideIfNoPrevNext: false, // True to hide next/previous month links - // if not applicable, false to just disable them - navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links - gotoCurrent: false, // True if today link goes back to current selection instead - changeMonth: false, // True if month can be selected directly, false if only prev/next - changeYear: false, // True if year can be selected directly, false if only prev/next - yearRange: "c-10:c+10", // Range of years to display in drop-down, - // either relative to today's year (-nn:+nn), relative to currently displayed year - // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n) - showOtherMonths: false, // True to show dates in other months, false to leave blank - selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable - showWeek: false, // True to show week of the year, false to not show it - calculateWeek: this.iso8601Week, // How to calculate the week of the year, - // takes a Date and returns the number of the week for it - shortYearCutoff: "+10", // Short year values < this are in the current century, - // > this are in the previous century, - // string value starting with "+" for current year + value - minDate: null, // The earliest selectable date, or null for no limit - maxDate: null, // The latest selectable date, or null for no limit - duration: "fast", // Duration of display/closure - beforeShowDay: null, // Function that takes a date and returns an array with - // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or "", - // [2] = cell title (optional), e.g. $.datepicker.noWeekends - beforeShow: null, // Function that takes an input field and - // returns a set of custom settings for the date picker - onSelect: null, // Define a callback function when a date is selected - onChangeMonthYear: null, // Define a callback function when the month or year is changed - onClose: null, // Define a callback function when the datepicker is closed - numberOfMonths: 1, // Number of months to show at a time - showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0) - stepMonths: 1, // Number of months to step back/forward - stepBigMonths: 12, // Number of months to step back/forward for the big links - altField: "", // Selector for an alternate field to store selected dates into - altFormat: "", // The date format to use for the alternate field - constrainInput: true, // The input is constrained by the current date format - showButtonPanel: false, // True to show button panel, false to not show it - autoSize: false, // True to size the input for the date format, false to leave as is - disabled: false // The initial disabled state - }; - $.extend( this._defaults, this.regional[ "" ] ); - this.regional.en = $.extend( true, {}, this.regional[ "" ] ); - this.regional[ "en-US" ] = $.extend( true, {}, this.regional.en ); - this.dpDiv = datepicker_bindHover( $( "<div id='" + this._mainDivId + "' class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>" ) ); -} - -$.extend( Datepicker.prototype, { - /* Class name added to elements to indicate already configured with a date picker. */ - markerClassName: "hasDatepicker", - - //Keep track of the maximum number of rows displayed (see #7043) - maxRows: 4, - - // TODO rename to "widget" when switching to widget factory - _widgetDatepicker: function() { - return this.dpDiv; - }, - - /* Override the default settings for all instances of the date picker. - * @param settings object - the new settings to use as defaults (anonymous object) - * @return the manager object - */ - setDefaults: function( settings ) { - datepicker_extendRemove( this._defaults, settings || {} ); - return this; - }, - - /* Attach the date picker to a jQuery selection. - * @param target element - the target input field or division or span - * @param settings object - the new settings to use for this date picker instance (anonymous) - */ - _attachDatepicker: function( target, settings ) { - var nodeName, inline, inst; - nodeName = target.nodeName.toLowerCase(); - inline = ( nodeName === "div" || nodeName === "span" ); - if ( !target.id ) { - this.uuid += 1; - target.id = "dp" + this.uuid; - } - inst = this._newInst( $( target ), inline ); - inst.settings = $.extend( {}, settings || {} ); - if ( nodeName === "input" ) { - this._connectDatepicker( target, inst ); - } else if ( inline ) { - this._inlineDatepicker( target, inst ); - } - }, - - /* Create a new instance object. */ - _newInst: function( target, inline ) { - var id = target[ 0 ].id.replace( /([^A-Za-z0-9_\-])/g, "\\\\$1" ); // escape jQuery meta chars - return { id: id, input: target, // associated target - selectedDay: 0, selectedMonth: 0, selectedYear: 0, // current selection - drawMonth: 0, drawYear: 0, // month being drawn - inline: inline, // is datepicker inline or not - dpDiv: ( !inline ? this.dpDiv : // presentation div - datepicker_bindHover( $( "<div class='" + this._inlineClass + " ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>" ) ) ) }; - }, - - /* Attach the date picker to an input field. */ - _connectDatepicker: function( target, inst ) { - var input = $( target ); - inst.append = $( [] ); - inst.trigger = $( [] ); - if ( input.hasClass( this.markerClassName ) ) { - return; - } - this._attachments( input, inst ); - input.addClass( this.markerClassName ).on( "keydown", this._doKeyDown ). - on( "keypress", this._doKeyPress ).on( "keyup", this._doKeyUp ); - this._autoSize( inst ); - $.data( target, "datepicker", inst ); - - //If disabled option is true, disable the datepicker once it has been attached to the input (see ticket #5665) - if ( inst.settings.disabled ) { - this._disableDatepicker( target ); - } + // callbacks + beforeOpen: null, + change: null, + close: null, + open: null, + refresh: null, + select: null }, - /* Make attachments based on settings. */ - _attachments: function( input, inst ) { - var showOn, buttonText, buttonImage, - appendText = this._get( inst, "appendText" ), - isRTL = this._get( inst, "isRTL" ); - - if ( inst.append ) { - inst.append.remove(); - } - if ( appendText ) { - inst.append = $( "<span class='" + this._appendClass + "'>" + appendText + "</span>" ); - input[ isRTL ? "before" : "after" ]( inst.append ); - } - - input.off( "focus", this._showDatepicker ); - - if ( inst.trigger ) { - inst.trigger.remove(); - } - - showOn = this._get( inst, "showOn" ); - if ( showOn === "focus" || showOn === "both" ) { // pop-up date picker when in the marked field - input.on( "focus", this._showDatepicker ); - } - if ( showOn === "button" || showOn === "both" ) { // pop-up date picker when button clicked - buttonText = this._get( inst, "buttonText" ); - buttonImage = this._get( inst, "buttonImage" ); - inst.trigger = $( this._get( inst, "buttonImageOnly" ) ? - $( "<img/>" ).addClass( this._triggerClass ). - attr( { src: buttonImage, alt: buttonText, title: buttonText } ) : - $( "<button type='button'></button>" ).addClass( this._triggerClass ). - html( !buttonImage ? buttonText : $( "<img/>" ).attr( - { src:buttonImage, alt:buttonText, title:buttonText } ) ) ); - input[ isRTL ? "before" : "after" ]( inst.trigger ); - inst.trigger.on( "click", function() { - if ( $.datepicker._datepickerShowing && $.datepicker._lastInput === input[ 0 ] ) { - $.datepicker._hideDatepicker(); - } else if ( $.datepicker._datepickerShowing && $.datepicker._lastInput !== input[ 0 ] ) { - $.datepicker._hideDatepicker(); - $.datepicker._showDatepicker( input[ 0 ] ); - } else { - $.datepicker._showDatepicker( input[ 0 ] ); - } - return false; - } ); - } - }, + calendarOptions: [ "buttons", "classes", "disabled", "dateFormat", "eachDay", + "icons", "labels", "locale", "max", "min", "numberOfMonths", "showWeek", "refresh" ], - /* Apply the maximum length for the date format. */ - _autoSize: function( inst ) { - if ( this._get( inst, "autoSize" ) && !inst.inline ) { - var findMax, max, maxI, i, - date = new Date( 2009, 12 - 1, 20 ), // Ensure double digits - dateFormat = this._get( inst, "dateFormat" ); + _create: function() { + this.suppressExpandOnFocus = false; + this._parse = new Globalize( this.options.locale ).dateParser( this.options.dateFormat ); - if ( dateFormat.match( /[DM]/ ) ) { - findMax = function( names ) { - max = 0; - maxI = 0; - for ( i = 0; i < names.length; i++ ) { - if ( names[ i ].length > max ) { - max = names[ i ].length; - maxI = i; - } - } - return maxI; - }; - date.setMonth( findMax( this._get( inst, ( dateFormat.match( /MM/ ) ? - "monthNames" : "monthNamesShort" ) ) ) ); - date.setDate( findMax( this._get( inst, ( dateFormat.match( /DD/ ) ? - "dayNames" : "dayNamesShort" ) ) ) + 20 - date.getDay() ); - } - inst.input.attr( "size", this._formatDate( inst, date ).length ); + if ( $.type( this.options.max ) === "string" ) { + this.options.max = this._parse( this.options.max ); } - }, - - /* Attach an inline date picker to a div. */ - _inlineDatepicker: function( target, inst ) { - var divSpan = $( target ); - if ( divSpan.hasClass( this.markerClassName ) ) { - return; + if ( $.type( this.options.min ) === "string" ) { + this.options.min = this._parse( this.options.min ); } - divSpan.addClass( this.markerClassName ).append( inst.dpDiv ); - $.data( target, "datepicker", inst ); - this._setDate( inst, this._getDefaultDate( inst ), true ); - this._updateDatepicker( inst ); - this._updateAlternate( inst ); - //If disabled option is true, disable the datepicker before showing it (see ticket #5665) - if ( inst.settings.disabled ) { - this._disableDatepicker( target ); - } + this._createCalendar(); - // Set display:block in place of inst.dpDiv.show() which won't work on disconnected elements - // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height - inst.dpDiv.css( "display", "block" ); + this._on( this._inputEvents ); + this._on( this.calendar, this._calendarEvents ); + this._on( this.document, this._documentEvents ); }, - /* Pop-up the date picker in a "dialog" box. - * @param input element - ignored - * @param date string or Date - the initial date to display - * @param onSelect function - the function to call when a date is selected - * @param settings object - update the dialog date picker instance's settings (anonymous object) - * @param pos int[2] - coordinates for the dialog's position within the screen or - * event - with x/y coordinates or - * leave empty for default (screen centre) - * @return the manager object - */ - _dialogDatepicker: function( input, date, onSelect, settings, pos ) { - var id, browserWidth, browserHeight, scrollX, scrollY, - inst = this._dialogInst; // internal instance + _getCreateOptions: function() { + var max = this.element.attr( "max" ), + min = this.element.attr( "min" ), + parser = function( value ) { + var exploded = value.split( "-" ); - if ( !inst ) { - this.uuid += 1; - id = "dp" + this.uuid; - this._dialogInput = $( "<input type='text' id='" + id + - "' style='position: absolute; top: -100px; width: 0px;'/>" ); - this._dialogInput.on( "keydown", this._doKeyDown ); - $( "body" ).append( this._dialogInput ); - inst = this._dialogInst = this._newInst( this._dialogInput, false ); - inst.settings = {}; - $.data( this._dialogInput[ 0 ], "datepicker", inst ); - } - datepicker_extendRemove( inst.settings, settings || {} ); - date = ( date && date.constructor === Date ? this._formatDate( inst, date ) : date ); - this._dialogInput.val( date ); - - this._pos = ( pos ? ( pos.length ? pos : [ pos.pageX, pos.pageY ] ) : null ); - if ( !this._pos ) { - browserWidth = document.documentElement.clientWidth; - browserHeight = document.documentElement.clientHeight; - scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; - scrollY = document.documentElement.scrollTop || document.body.scrollTop; - this._pos = // should use actual width/height below - [ ( browserWidth / 2 ) - 100 + scrollX, ( browserHeight / 2 ) - 150 + scrollY ]; - } - - // Move input on screen for focus, but hidden behind dialog - this._dialogInput.css( "left", ( this._pos[ 0 ] + 20 ) + "px" ).css( "top", this._pos[ 1 ] + "px" ); - inst.settings.onSelect = onSelect; - this._inDialog = true; - this.dpDiv.addClass( this._dialogClass ); - this._showDatepicker( this._dialogInput[ 0 ] ); - if ( $.blockUI ) { - $.blockUI( this.dpDiv ); - } - $.data( this._dialogInput[ 0 ], "datepicker", inst ); - return this; - }, - - /* Detach a datepicker from its control. - * @param target element - the target input field or division or span - */ - _destroyDatepicker: function( target ) { - var nodeName, - $target = $( target ), - inst = $.data( target, "datepicker" ); + return new Date( exploded[ 0 ], exploded[ 1 ] - 1, exploded[ 2 ] ); + }, + options = {}; - if ( !$target.hasClass( this.markerClassName ) ) { - return; + if ( max !== undefined ) { + options.max = parser( max ); } - nodeName = target.nodeName.toLowerCase(); - $.removeData( target, "datepicker" ); - if ( nodeName === "input" ) { - inst.append.remove(); - inst.trigger.remove(); - $target.removeClass( this.markerClassName ). - off( "focus", this._showDatepicker ). - off( "keydown", this._doKeyDown ). - off( "keypress", this._doKeyPress ). - off( "keyup", this._doKeyUp ); - } else if ( nodeName === "div" || nodeName === "span" ) { - $target.removeClass( this.markerClassName ).empty(); + if ( min !== undefined ) { + options.min = parser( min ); } - if ( datepicker_instActive === inst ) { - datepicker_instActive = null; - } + return options; }, - /* Enable the date picker to a jQuery selection. - * @param target element - the target input field or division or span - */ - _enableDatepicker: function( target ) { - var nodeName, inline, - $target = $( target ), - inst = $.data( target, "datepicker" ); - - if ( !$target.hasClass( this.markerClassName ) ) { - return; - } - - nodeName = target.nodeName.toLowerCase(); - if ( nodeName === "input" ) { - target.disabled = false; - inst.trigger.filter( "button" ). - each( function() { this.disabled = false; } ).end(). - filter( "img" ).css( { opacity: "1.0", cursor: "" } ); - } else if ( nodeName === "div" || nodeName === "span" ) { - inline = $target.children( "." + this._inlineClass ); - inline.children().removeClass( "ui-state-disabled" ); - inline.find( "select.ui-datepicker-month, select.ui-datepicker-year" ). - prop( "disabled", false ); - } - this._disabledInputs = $.map( this._disabledInputs, - function( value ) { return ( value === target ? null : value ); } ); // delete entry - }, + _createCalendar: function() { + var that = this; - /* Disable the date picker to a jQuery selection. - * @param target element - the target input field or division or span - */ - _disableDatepicker: function( target ) { - var nodeName, inline, - $target = $( target ), - inst = $.data( target, "datepicker" ); + this.calendar = $( "<div>" ).appendTo( this._appendTo() ); + this._addClass( this.calendar, "ui-datepicker", "ui-front" ); - if ( !$target.hasClass( this.markerClassName ) ) { - return; - } + // Initialize calendar widget + this.calendarInstance = this.calendar + .calendar( $.extend( {}, this.options, { + value: this._parse( this.element.val() ), + change: function( event ) { + that._trigger( "change", event, { + value: that.calendarInstance.valueAsDate() + } ); + }, + select: function( event ) { + that.element.val( that.calendarInstance.value() ); + that.close(); + event.preventDefault(); + that._focusTrigger(); + that._trigger( "select", event, { + value: that.calendarInstance.valueAsDate() + } ); - nodeName = target.nodeName.toLowerCase(); - if ( nodeName === "input" ) { - target.disabled = true; - inst.trigger.filter( "button" ). - each( function() { this.disabled = true; } ).end(). - filter( "img" ).css( { opacity: "0.5", cursor: "default" } ); - } else if ( nodeName === "div" || nodeName === "span" ) { - inline = $target.children( "." + this._inlineClass ); - inline.children().addClass( "ui-state-disabled" ); - inline.find( "select.ui-datepicker-month, select.ui-datepicker-year" ). - prop( "disabled", true ); - } - this._disabledInputs = $.map( this._disabledInputs, - function( value ) { return ( value === target ? null : value ); } ); // delete entry - this._disabledInputs[ this._disabledInputs.length ] = target; - }, + return false; + } + } ) ) + .calendar( "instance" ); - /* Is the first field in a jQuery collection disabled as a datepicker? - * @param target element - the target input field or division or span - * @return boolean - true if disabled, false if enabled - */ - _isDisabledDatepicker: function( target ) { - if ( !target ) { - return false; - } - for ( var i = 0; i < this._disabledInputs.length; i++ ) { - if ( this._disabledInputs[ i ] === target ) { - return true; - } - } - return false; - }, + this.calendarInstance.buttonClickContext = that.element[ 0 ]; - /* Retrieve the instance data for the target control. - * @param target element - the target input field or division or span - * @return object - the associated instance data - * @throws error if a jQuery problem getting data - */ - _getInst: function( target ) { - try { - return $.data( target, "datepicker" ); - } - catch ( err ) { - throw "Missing instance data for this datepicker"; - } + this._setHiddenPicker(); + this.element.attr( { + "aria-haspopup": true, + "aria-owns": this.calendar.attr( "id" ) + } ); }, - /* Update or retrieve the settings for a date picker attached to an input field or division. - * @param target element - the target input field or division or span - * @param name object - the new settings to update or - * string - the name of the setting to change or retrieve, - * when retrieving also "all" for all instance settings or - * "defaults" for all global defaults - * @param value any - the new value for the setting - * (omit if above is an object or to retrieve a value) - */ - _optionDatepicker: function( target, name, value ) { - var settings, date, minDate, maxDate, - inst = this._getInst( target ); - - if ( arguments.length === 2 && typeof name === "string" ) { - return ( name === "defaults" ? $.extend( {}, $.datepicker._defaults ) : - ( inst ? ( name === "all" ? $.extend( {}, inst.settings ) : - this._get( inst, name ) ) : null ) ); - } - - settings = name || {}; - if ( typeof name === "string" ) { - settings = {}; - settings[ name ] = value; - } - - if ( inst ) { - if ( this._curInst === inst ) { - this._hideDatepicker(); + _inputEvents: { + keydown: function( event ) { + switch ( event.keyCode ) { + case $.ui.keyCode.TAB: + + // Waiting for close() will make popup hide too late, which breaks tab key behavior + this.calendar.hide(); + this.close( event ); + break; + case $.ui.keyCode.ESCAPE: + if ( this.isOpen ) { + this.close( event ); + } + break; + case $.ui.keyCode.ENTER: + case $.ui.keyCode.DOWN: + case $.ui.keyCode.UP: + this.open( event ); + break; } - - date = this._getDateDatepicker( target, true ); - minDate = this._getMinMaxDate( inst, "min" ); - maxDate = this._getMinMaxDate( inst, "max" ); - datepicker_extendRemove( inst.settings, settings ); - - // reformat the old minDate/maxDate values if dateFormat changes and a new minDate/maxDate isn't provided - if ( minDate !== null && settings.dateFormat !== undefined && settings.minDate === undefined ) { - inst.settings.minDate = this._formatDate( inst, minDate ); + }, + keyup: function() { + if ( this.isValid() ) { + this.refresh(); } - if ( maxDate !== null && settings.dateFormat !== undefined && settings.maxDate === undefined ) { - inst.settings.maxDate = this._formatDate( inst, maxDate ); + }, + mousedown: function( event ) { + if ( this.isOpen ) { + this.suppressExpandOnFocus = true; + this.close(); + return; } - if ( "disabled" in settings ) { - if ( settings.disabled ) { - this._disableDatepicker( target ); - } else { - this._enableDatepicker( target ); - } + this.open( event ); + clearTimeout( this.closeTimer ); + }, + focus: function( event ) { + if ( !this.suppressExpandOnFocus && !this.isOpen ) { + this._delay( function() { + this.open( event ); + } ); } - this._attachments( $( target ), inst ); - this._autoSize( inst ); - this._setDate( inst, date ); - this._updateAlternate( inst ); - this._updateDatepicker( inst ); - } - }, - - // Change method deprecated - _changeDatepicker: function( target, name, value ) { - this._optionDatepicker( target, name, value ); - }, - - /* Redraw the date picker attached to an input field or division. - * @param target element - the target input field or division or span - */ - _refreshDatepicker: function( target ) { - var inst = this._getInst( target ); - if ( inst ) { - this._updateDatepicker( inst ); - } - }, - - /* Set the dates for a jQuery selection. - * @param target element - the target input field or division or span - * @param date Date - the new date - */ - _setDateDatepicker: function( target, date ) { - var inst = this._getInst( target ); - if ( inst ) { - this._setDate( inst, date ); - this._updateDatepicker( inst ); - this._updateAlternate( inst ); - } - }, - - /* Get the date(s) for the first entry in a jQuery selection. - * @param target element - the target input field or division or span - * @param noDefault boolean - true if no default date is to be used - * @return Date - the current date - */ - _getDateDatepicker: function( target, noDefault ) { - var inst = this._getInst( target ); - if ( inst && !inst.inline ) { - this._setDateFromField( inst, noDefault ); + this._delay( function() { + this.suppressExpandOnFocus = false; + }, 100 ); + }, + blur: function() { + this.suppressExpandOnFocus = false; + }, + change: function( event ) { + this._trigger( "change", event, { + value: this.calendarInstance.valueAsDate() + } ); } - return ( inst ? this._getDate( inst ) : null ); }, - /* Handle keystrokes. */ - _doKeyDown: function( event ) { - var onSelect, dateStr, sel, - inst = $.datepicker._getInst( event.target ), - handled = true, - isRTL = inst.dpDiv.is( ".ui-datepicker-rtl" ); - - inst._keyEvent = true; - if ( $.datepicker._datepickerShowing ) { - switch ( event.keyCode ) { - case 9: $.datepicker._hideDatepicker(); - handled = false; - break; // hide on tab out - case 13: sel = $( "td." + $.datepicker._dayOverClass + ":not(." + - $.datepicker._currentClass + ")", inst.dpDiv ); - if ( sel[ 0 ] ) { - $.datepicker._selectDay( event.target, inst.selectedMonth, inst.selectedYear, sel[ 0 ] ); - } - - onSelect = $.datepicker._get( inst, "onSelect" ); - if ( onSelect ) { - dateStr = $.datepicker._formatDate( inst ); - - // Trigger custom callback - onSelect.apply( ( inst.input ? inst.input[ 0 ] : null ), [ dateStr, inst ] ); - } else { - $.datepicker._hideDatepicker(); - } - - return false; // don't submit the form - case 27: $.datepicker._hideDatepicker(); - break; // hide on escape - case 33: $.datepicker._adjustDate( event.target, ( event.ctrlKey ? - -$.datepicker._get( inst, "stepBigMonths" ) : - -$.datepicker._get( inst, "stepMonths" ) ), "M" ); - break; // previous month/year on page up/+ ctrl - case 34: $.datepicker._adjustDate( event.target, ( event.ctrlKey ? - +$.datepicker._get( inst, "stepBigMonths" ) : - +$.datepicker._get( inst, "stepMonths" ) ), "M" ); - break; // next month/year on page down/+ ctrl - case 35: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._clearDate( event.target ); - } - handled = event.ctrlKey || event.metaKey; - break; // clear on ctrl or command +end - case 36: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._gotoToday( event.target ); - } - handled = event.ctrlKey || event.metaKey; - break; // current on ctrl or command +home - case 37: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._adjustDate( event.target, ( isRTL ? +1 : -1 ), "D" ); - } - handled = event.ctrlKey || event.metaKey; - - // -1 day on ctrl or command +left - if ( event.originalEvent.altKey ) { - $.datepicker._adjustDate( event.target, ( event.ctrlKey ? - -$.datepicker._get( inst, "stepBigMonths" ) : - -$.datepicker._get( inst, "stepMonths" ) ), "M" ); - } - - // next month/year on alt +left on Mac - break; - case 38: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._adjustDate( event.target, -7, "D" ); - } - handled = event.ctrlKey || event.metaKey; - break; // -1 week on ctrl or command +up - case 39: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._adjustDate( event.target, ( isRTL ? -1 : +1 ), "D" ); - } - handled = event.ctrlKey || event.metaKey; - - // +1 day on ctrl or command +right - if ( event.originalEvent.altKey ) { - $.datepicker._adjustDate( event.target, ( event.ctrlKey ? - +$.datepicker._get( inst, "stepBigMonths" ) : - +$.datepicker._get( inst, "stepMonths" ) ), "M" ); - } - - // next month/year on alt +right - break; - case 40: if ( event.ctrlKey || event.metaKey ) { - $.datepicker._adjustDate( event.target, +7, "D" ); - } - handled = event.ctrlKey || event.metaKey; - break; // +1 week on ctrl or command +down - default: handled = false; + _calendarEvents: { + focusout: function( event ) { + + // use a timer to allow click to clear it and letting that + // handle the closing instead of opening again + // also allows tabbing inside the calendar without it closing + this.closeTimer = this._delay( function() { + this.close( event ); + }, 150 ); + }, + focusin: function() { + clearTimeout( this.closeTimer ); + }, + mouseup: function() { + clearTimeout( this.closeTimer ); + }, + + keydown: function( event ) { + if ( event.keyCode === $.ui.keyCode.ESCAPE && this.calendar.is( ":visible" ) ) { + this.close( event ); + this._focusTrigger(); } - } else if ( event.keyCode === 36 && event.ctrlKey ) { // display the date picker on ctrl+home - $.datepicker._showDatepicker( this ); - } else { - handled = false; - } - if ( handled ) { - event.preventDefault(); - event.stopPropagation(); - } - }, - - /* Filter entered characters - based on date format. */ - _doKeyPress: function( event ) { - var chars, chr, - inst = $.datepicker._getInst( event.target ); - - if ( $.datepicker._get( inst, "constrainInput" ) ) { - chars = $.datepicker._possibleChars( $.datepicker._get( inst, "dateFormat" ) ); - chr = String.fromCharCode( event.charCode == null ? event.keyCode : event.charCode ); - return event.ctrlKey || event.metaKey || ( chr < " " || !chars || chars.indexOf( chr ) > -1 ); - } - }, + if ( event.keyCode === $.ui.keyCode.TAB && this.calendar.is( ":visible" ) ) { + var element = $( event.target ); - /* Synchronise manual entry and field/alternate field. */ - _doKeyUp: function( event ) { - var date, - inst = $.datepicker._getInst( event.target ); - - if ( inst.input.val() !== inst.lastVal ) { - try { - date = $.datepicker.parseDate( $.datepicker._get( inst, "dateFormat" ), - ( inst.input ? inst.input.val() : null ), - $.datepicker._getFormatConfig( inst ) ); - - if ( date ) { // only if valid - $.datepicker._setDateFromField( inst ); - $.datepicker._updateAlternate( inst ); - $.datepicker._updateDatepicker( inst ); + // Reset focus when leaving widget + if ( + ( event.shiftKey && element.is( this.calendarInstance.prevButton ) ) || + ( !event.shiftKey && element.is( this.calendarInstance.grid.last() ) ) + ) { + this.close( event ); + this._focusTrigger(); } } - catch ( err ) { - } } - return true; }, - /* Pop-up the date picker for a given input field. - * If false returned from beforeShow event handler do not show. - * @param input element - the input field attached to the date picker or - * event - if triggered by focus - */ - _showDatepicker: function( input ) { - input = input.target || input; - if ( input.nodeName.toLowerCase() !== "input" ) { // find from button/image trigger - input = $( "input", input.parentNode )[ 0 ]; - } - - if ( $.datepicker._isDisabledDatepicker( input ) || $.datepicker._lastInput === input ) { // already here - return; - } - - var inst, beforeShow, beforeShowSettings, isFixed, - offset, showAnim, duration; - - inst = $.datepicker._getInst( input ); - if ( $.datepicker._curInst && $.datepicker._curInst !== inst ) { - $.datepicker._curInst.dpDiv.stop( true, true ); - if ( inst && $.datepicker._datepickerShowing ) { - $.datepicker._hideDatepicker( $.datepicker._curInst.input[ 0 ] ); + _documentEvents: { + mousedown: function( event ) { + if ( !this.isOpen ) { + return; } - } - - beforeShow = $.datepicker._get( inst, "beforeShow" ); - beforeShowSettings = beforeShow ? beforeShow.apply( input, [ input, inst ] ) : {}; - if ( beforeShowSettings === false ) { - return; - } - datepicker_extendRemove( inst.settings, beforeShowSettings ); - - inst.lastVal = null; - $.datepicker._lastInput = input; - $.datepicker._setDateFromField( inst ); - - if ( $.datepicker._inDialog ) { // hide cursor - input.value = ""; - } - if ( !$.datepicker._pos ) { // position below input - $.datepicker._pos = $.datepicker._findPos( input ); - $.datepicker._pos[ 1 ] += input.offsetHeight; // add the height - } - isFixed = false; - $( input ).parents().each( function() { - isFixed |= $( this ).css( "position" ) === "fixed"; - return !isFixed; - } ); - - offset = { left: $.datepicker._pos[ 0 ], top: $.datepicker._pos[ 1 ] }; - $.datepicker._pos = null; - - //to avoid flashes on Firefox - inst.dpDiv.empty(); - - // determine sizing offscreen - inst.dpDiv.css( { position: "absolute", display: "block", top: "-1000px" } ); - $.datepicker._updateDatepicker( inst ); - - // fix width for dynamic number of date pickers - // and adjust position before showing - offset = $.datepicker._checkOffset( inst, offset, isFixed ); - inst.dpDiv.css( { position: ( $.datepicker._inDialog && $.blockUI ? - "static" : ( isFixed ? "fixed" : "absolute" ) ), display: "none", - left: offset.left + "px", top: offset.top + "px" } ); - - if ( !inst.inline ) { - showAnim = $.datepicker._get( inst, "showAnim" ); - duration = $.datepicker._get( inst, "duration" ); - inst.dpDiv.css( "z-index", datepicker_getZindex( $( input ) ) + 1 ); - $.datepicker._datepickerShowing = true; - - if ( $.effects && $.effects.effect[ showAnim ] ) { - inst.dpDiv.show( showAnim, $.datepicker._get( inst, "showOptions" ), duration ); - } else { - inst.dpDiv[ showAnim || "show" ]( showAnim ? duration : null ); + if ( !$( event.target ).closest( this.element.add( this.calendar ) ).length ) { + this.close( event ); } - - if ( $.datepicker._shouldFocusInput( inst ) ) { - inst.input.trigger( "focus" ); - } - - $.datepicker._curInst = inst; } }, - /* Generate the date picker content. */ - _updateDatepicker: function( inst ) { - this.maxRows = 4; //Reset the max number of rows being displayed (see #7043) - datepicker_instActive = inst; // for delegate hover events - inst.dpDiv.empty().append( this._generateHTML( inst ) ); - this._attachHandlers( inst ); - - var origyearshtml, - numMonths = this._getNumberOfMonths( inst ), - cols = numMonths[ 1 ], - width = 17, - activeCell = inst.dpDiv.find( "." + this._dayOverClass + " a" ); - - if ( activeCell.length > 0 ) { - datepicker_handleMouseover.apply( activeCell.get( 0 ) ); - } + _appendTo: function() { + var element = this.options.appendTo; - inst.dpDiv.removeClass( "ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4" ).width( "" ); - if ( cols > 1 ) { - inst.dpDiv.addClass( "ui-datepicker-multi-" + cols ).css( "width", ( width * cols ) + "em" ); + if ( element ) { + element = element.jquery || element.nodeType ? + $( element ) : + this.document.find( element ).eq( 0 ); } - inst.dpDiv[ ( numMonths[ 0 ] !== 1 || numMonths[ 1 ] !== 1 ? "add" : "remove" ) + - "Class" ]( "ui-datepicker-multi" ); - inst.dpDiv[ ( this._get( inst, "isRTL" ) ? "add" : "remove" ) + - "Class" ]( "ui-datepicker-rtl" ); - if ( inst === $.datepicker._curInst && $.datepicker._datepickerShowing && $.datepicker._shouldFocusInput( inst ) ) { - inst.input.trigger( "focus" ); + if ( !element || !element[ 0 ] ) { + element = this.element.closest( ".ui-front, dialog" ); } - // Deffered render of the years select (to avoid flashes on Firefox) - if ( inst.yearshtml ) { - origyearshtml = inst.yearshtml; - setTimeout( function() { - - //assure that inst.yearshtml didn't change. - if ( origyearshtml === inst.yearshtml && inst.yearshtml ) { - inst.dpDiv.find( "select.ui-datepicker-year:first" ).replaceWith( inst.yearshtml ); - } - origyearshtml = inst.yearshtml = null; - }, 0 ); + if ( !element.length ) { + element = this.document[ 0 ].body; } - }, - // #6694 - don't focus the input if it's already focused - // this breaks the change event in IE - // Support: IE and jQuery <1.9 - _shouldFocusInput: function( inst ) { - return inst.input && inst.input.is( ":visible" ) && !inst.input.is( ":disabled" ) && !inst.input.is( ":focus" ); + return element; }, - /* Check positioning to remain on screen. */ - _checkOffset: function( inst, offset, isFixed ) { - var dpWidth = inst.dpDiv.outerWidth(), - dpHeight = inst.dpDiv.outerHeight(), - inputWidth = inst.input ? inst.input.outerWidth() : 0, - inputHeight = inst.input ? inst.input.outerHeight() : 0, - viewWidth = document.documentElement.clientWidth + ( isFixed ? 0 : $( document ).scrollLeft() ), - viewHeight = document.documentElement.clientHeight + ( isFixed ? 0 : $( document ).scrollTop() ); - - offset.left -= ( this._get( inst, "isRTL" ) ? ( dpWidth - inputWidth ) : 0 ); - offset.left -= ( isFixed && offset.left === inst.input.offset().left ) ? $( document ).scrollLeft() : 0; - offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0; - - // Now check if datepicker is showing outside window viewport - move to a better place if so. - offset.left -= Math.min( offset.left, ( offset.left + dpWidth > viewWidth && viewWidth > dpWidth ) ? - Math.abs( offset.left + dpWidth - viewWidth ) : 0 ); - offset.top -= Math.min( offset.top, ( offset.top + dpHeight > viewHeight && viewHeight > dpHeight ) ? - Math.abs( dpHeight + inputHeight ) : 0 ); - - return offset; + _focusTrigger: function() { + this.suppressExpandOnFocus = true; + this.element.focus(); }, - /* Find an object's position on the screen. */ - _findPos: function( obj ) { - var position, - inst = this._getInst( obj ), - isRTL = this._get( inst, "isRTL" ); - - while ( obj && ( obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden( obj ) ) ) { - obj = obj[ isRTL ? "previousSibling" : "nextSibling" ]; - } - - position = $( obj ).offset(); - return [ position.left, position.top ]; + refresh: function() { + this.calendarInstance.option( "value", this._getParsedValue() ); }, - /* Hide the date picker from view. - * @param input element - the input field attached to the date picker - */ - _hideDatepicker: function( input ) { - var showAnim, duration, postProcess, onClose, - inst = this._curInst; - - if ( !inst || ( input && inst !== $.data( input, "datepicker" ) ) ) { + open: function( event ) { + if ( this.isOpen ) { return; } - - if ( this._datepickerShowing ) { - showAnim = this._get( inst, "showAnim" ); - duration = this._get( inst, "duration" ); - postProcess = function() { - $.datepicker._tidyDialog( inst ); - }; - - // DEPRECATED: after BC for 1.8.x $.effects[ showAnim ] is not needed - if ( $.effects && ( $.effects.effect[ showAnim ] || $.effects[ showAnim ] ) ) { - inst.dpDiv.hide( showAnim, $.datepicker._get( inst, "showOptions" ), duration, postProcess ); - } else { - inst.dpDiv[ ( showAnim === "slideDown" ? "slideUp" : - ( showAnim === "fadeIn" ? "fadeOut" : "hide" ) ) ]( ( showAnim ? duration : null ), postProcess ); - } - - if ( !showAnim ) { - postProcess(); - } - this._datepickerShowing = false; - - onClose = this._get( inst, "onClose" ); - if ( onClose ) { - onClose.apply( ( inst.input ? inst.input[ 0 ] : null ), [ ( inst.input ? inst.input.val() : "" ), inst ] ); - } - - this._lastInput = null; - if ( this._inDialog ) { - this._dialogInput.css( { position: "absolute", left: "0", top: "-100px" } ); - if ( $.blockUI ) { - $.unblockUI(); - $( "body" ).append( this.dpDiv ); - } - } - this._inDialog = false; - } - }, - - /* Tidy up after a dialog display. */ - _tidyDialog: function( inst ) { - inst.dpDiv.removeClass( this._dialogClass ).off( ".ui-datepicker-calendar" ); - }, - - /* Close date picker if clicked elsewhere. */ - _checkExternalClick: function( event ) { - if ( !$.datepicker._curInst ) { + if ( this._trigger( "beforeOpen", event ) === false ) { return; } - var $target = $( event.target ), - inst = $.datepicker._getInst( $target[ 0 ] ); - - if ( ( ( $target[ 0 ].id !== $.datepicker._mainDivId && - $target.parents( "#" + $.datepicker._mainDivId ).length === 0 && - !$target.hasClass( $.datepicker.markerClassName ) && - !$target.closest( "." + $.datepicker._triggerClass ).length && - $.datepicker._datepickerShowing && !( $.datepicker._inDialog && $.blockUI ) ) ) || - ( $target.hasClass( $.datepicker.markerClassName ) && $.datepicker._curInst !== inst ) ) { - $.datepicker._hideDatepicker(); - } - }, - - /* Adjust one of the date sub-fields. */ - _adjustDate: function( id, offset, period ) { - var target = $( id ), - inst = this._getInst( target[ 0 ] ); + this.calendarInstance.refresh(); + this.calendar + .attr( { + "aria-hidden": false, + "aria-expanded": true + } ) + .show() + .position( this._buildPosition() ) + .hide(); + this._show( this.calendar, this.options.show ); - if ( this._isDisabledDatepicker( target[ 0 ] ) ) { - return; - } - this._adjustInstDate( inst, offset, period ); - this._updateDatepicker( inst ); - }, + this.isOpen = true; + this._trigger( "open", event ); - /* Action for current link. */ - _gotoToday: function( id ) { - var date, - target = $( id ), - inst = this._getInst( target[ 0 ] ); - - if ( this._get( inst, "gotoCurrent" ) && inst.currentDay ) { - inst.selectedDay = inst.currentDay; - inst.drawMonth = inst.selectedMonth = inst.currentMonth; - inst.drawYear = inst.selectedYear = inst.currentYear; - } else { - date = new Date(); - inst.selectedDay = date.getDate(); - inst.drawMonth = inst.selectedMonth = date.getMonth(); - inst.drawYear = inst.selectedYear = date.getFullYear(); - } - this._notifyChange( inst ); - this._adjustDate( target ); + this._delay( function() { + this.calendarInstance.grid.focus(); + } ); }, - /* Action for selecting a new month/year. */ - _selectMonthYear: function( id, select, period ) { - var target = $( id ), - inst = this._getInst( target[ 0 ] ); - - inst[ "selected" + ( period === "M" ? "Month" : "Year" ) ] = - inst[ "draw" + ( period === "M" ? "Month" : "Year" ) ] = - parseInt( select.options[ select.selectedIndex ].value, 10 ); + close: function( event ) { + this._setHiddenPicker(); + this._hide( this.calendar, this.options.hide ); - this._notifyChange( inst ); - this._adjustDate( target ); + this.isOpen = false; + this._trigger( "close", event ); }, - /* Action for selecting a day. */ - _selectDay: function( id, month, year, td ) { - var inst, - target = $( id ); - - if ( $( td ).hasClass( this._unselectableClass ) || this._isDisabledDatepicker( target[ 0 ] ) ) { - return; - } - - inst = this._getInst( target[ 0 ] ); - inst.selectedDay = inst.currentDay = $( "a", td ).html(); - inst.selectedMonth = inst.currentMonth = month; - inst.selectedYear = inst.currentYear = year; - this._selectDate( id, this._formatDate( inst, - inst.currentDay, inst.currentMonth, inst.currentYear ) ); + _setHiddenPicker: function() { + this.calendar.attr( { + "aria-hidden": true, + "aria-expanded": false + } ); }, - /* Erase the input field and hide the date picker. */ - _clearDate: function( id ) { - var target = $( id ); - this._selectDate( target, "" ); + _buildPosition: function() { + return $.extend( { of: this.element }, this.options.position ); }, - /* Update the input field with the selected date. */ - _selectDate: function( id, dateStr ) { - var onSelect, - target = $( id ), - inst = this._getInst( target[ 0 ] ); - - dateStr = ( dateStr != null ? dateStr : this._formatDate( inst ) ); - if ( inst.input ) { - inst.input.val( dateStr ); - } - this._updateAlternate( inst ); - - onSelect = this._get( inst, "onSelect" ); - if ( onSelect ) { - onSelect.apply( ( inst.input ? inst.input[ 0 ] : null ), [ dateStr, inst ] ); // trigger custom callback - } else if ( inst.input ) { - inst.input.trigger( "change" ); // fire the change event - } - - if ( inst.inline ) { - this._updateDatepicker( inst ); + value: function( value ) { + if ( arguments.length ) { + this.valueAsDate( this._parse( value ) ); } else { - this._hideDatepicker(); - this._lastInput = inst.input[ 0 ]; - if ( typeof( inst.input[ 0 ] ) !== "object" ) { - inst.input.trigger( "focus" ); // restore focus - } - this._lastInput = null; - } - }, - - /* Update any alternate field to synchronise with the main field. */ - _updateAlternate: function( inst ) { - var altFormat, date, dateStr, - altField = this._get( inst, "altField" ); - - if ( altField ) { // update alternate field too - altFormat = this._get( inst, "altFormat" ) || this._get( inst, "dateFormat" ); - date = this._getDate( inst ); - dateStr = this.formatDate( altFormat, date, this._getFormatConfig( inst ) ); - $( altField ).val( dateStr ); + return this._getParsedValue() ? this.element.val() : null; } }, - /* Set as beforeShowDay function to prevent selection of weekends. - * @param date Date - the date to customise - * @return [boolean, string] - is this date selectable?, what is its CSS class? - */ - noWeekends: function( date ) { - var day = date.getDay(); - return [ ( day > 0 && day < 6 ), "" ]; - }, - - /* Set as calculateWeek to determine the week of the year based on the ISO 8601 definition. - * @param date Date - the date to get the week for - * @return number - the number of the week within the year that contains this date - */ - iso8601Week: function( date ) { - var time, - checkDate = new Date( date.getTime() ); - - // Find Thursday of this week starting on Monday - checkDate.setDate( checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ) ); - - time = checkDate.getTime(); - checkDate.setMonth( 0 ); // Compare with Jan 1 - checkDate.setDate( 1 ); - return Math.floor( Math.round( ( time - checkDate ) / 86400000 ) / 7 ) + 1; - }, - - /* Parse a string value into a date object. - * See formatDate below for the possible formats. - * - * @param format string - the expected format of the date - * @param value string - the date in the above format - * @param settings Object - attributes include: - * shortYearCutoff number - the cutoff year for determining the century (optional) - * dayNamesShort string[7] - abbreviated names of the days from Sunday (optional) - * dayNames string[7] - names of the days from Sunday (optional) - * monthNamesShort string[12] - abbreviated names of the months (optional) - * monthNames string[12] - names of the months (optional) - * @return Date - the extracted date value or null if value is blank - */ - parseDate: function( format, value, settings ) { - if ( format == null || value == null ) { - throw "Invalid arguments"; - } - - value = ( typeof value === "object" ? value.toString() : value + "" ); - if ( value === "" ) { - return null; - } - - var iFormat, dim, extra, - iValue = 0, - shortYearCutoffTemp = ( settings ? settings.shortYearCutoff : null ) || this._defaults.shortYearCutoff, - shortYearCutoff = ( typeof shortYearCutoffTemp !== "string" ? shortYearCutoffTemp : - new Date().getFullYear() % 100 + parseInt( shortYearCutoffTemp, 10 ) ), - dayNamesShort = ( settings ? settings.dayNamesShort : null ) || this._defaults.dayNamesShort, - dayNames = ( settings ? settings.dayNames : null ) || this._defaults.dayNames, - monthNamesShort = ( settings ? settings.monthNamesShort : null ) || this._defaults.monthNamesShort, - monthNames = ( settings ? settings.monthNames : null ) || this._defaults.monthNames, - year = -1, - month = -1, - day = -1, - doy = -1, - literal = false, - date, - - // Check whether a format character is doubled - lookAhead = function( match ) { - var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match ); - if ( matches ) { - iFormat++; - } - return matches; - }, - - // Extract a number from the string value - getNumber = function( match ) { - var isDoubled = lookAhead( match ), - size = ( match === "@" ? 14 : ( match === "!" ? 20 : - ( match === "y" && isDoubled ? 4 : ( match === "o" ? 3 : 2 ) ) ) ), - minSize = ( match === "y" ? size : 1 ), - digits = new RegExp( "^\\d{" + minSize + "," + size + "}" ), - num = value.substring( iValue ).match( digits ); - if ( !num ) { - throw "Missing number at position " + iValue; - } - iValue += num[ 0 ].length; - return parseInt( num[ 0 ], 10 ); - }, - - // Extract a name from the string value and convert to an index - getName = function( match, shortNames, longNames ) { - var index = -1, - names = $.map( lookAhead( match ) ? longNames : shortNames, function( v, k ) { - return [ [ k, v ] ]; - } ).sort( function( a, b ) { - return -( a[ 1 ].length - b[ 1 ].length ); - } ); - - $.each( names, function( i, pair ) { - var name = pair[ 1 ]; - if ( value.substr( iValue, name.length ).toLowerCase() === name.toLowerCase() ) { - index = pair[ 0 ]; - iValue += name.length; - return false; - } - } ); - if ( index !== -1 ) { - return index + 1; - } else { - throw "Unknown name at position " + iValue; - } - }, - - // Confirm that a literal character matches the string value - checkLiteral = function() { - if ( value.charAt( iValue ) !== format.charAt( iFormat ) ) { - throw "Unexpected literal at position " + iValue; - } - iValue++; - }; - - for ( iFormat = 0; iFormat < format.length; iFormat++ ) { - if ( literal ) { - if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) { - literal = false; - } else { - checkLiteral(); - } - } else { - switch ( format.charAt( iFormat ) ) { - case "d": - day = getNumber( "d" ); - break; - case "D": - getName( "D", dayNamesShort, dayNames ); - break; - case "o": - doy = getNumber( "o" ); - break; - case "m": - month = getNumber( "m" ); - break; - case "M": - month = getName( "M", monthNamesShort, monthNames ); - break; - case "y": - year = getNumber( "y" ); - break; - case "@": - date = new Date( getNumber( "@" ) ); - year = date.getFullYear(); - month = date.getMonth() + 1; - day = date.getDate(); - break; - case "!": - date = new Date( ( getNumber( "!" ) - this._ticksTo1970 ) / 10000 ); - year = date.getFullYear(); - month = date.getMonth() + 1; - day = date.getDate(); - break; - case "'": - if ( lookAhead( "'" ) ) { - checkLiteral(); - } else { - literal = true; - } - break; - default: - checkLiteral(); - } - } - } - - if ( iValue < value.length ) { - extra = value.substr( iValue ); - if ( !/^\s+/.test( extra ) ) { - throw "Extra/unparsed characters found in date: " + extra; + valueAsDate: function( value ) { + if ( arguments.length ) { + if ( this.calendarInstance._isValid( value ) ) { + this.calendarInstance.valueAsDate( value ); + this.element.val( this.calendarInstance._format( value ) ); } + } else { + return this._getParsedValue(); } - - if ( year === -1 ) { - year = new Date().getFullYear(); - } else if ( year < 100 ) { - year += new Date().getFullYear() - new Date().getFullYear() % 100 + - ( year <= shortYearCutoff ? 0 : -100 ); - } - - if ( doy > -1 ) { - month = 1; - day = doy; - do { - dim = this._getDaysInMonth( year, month - 1 ); - if ( day <= dim ) { - break; - } - month++; - day -= dim; - } while ( true ); - } - - date = this._daylightSavingAdjust( new Date( year, month - 1, day ) ); - if ( date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day ) { - throw "Invalid date"; // E.g. 31/02/00 - } - return date; - }, - - /* Standard date formats. */ - ATOM: "yy-mm-dd", // RFC 3339 (ISO 8601) - COOKIE: "D, dd M yy", - ISO_8601: "yy-mm-dd", - RFC_822: "D, d M y", - RFC_850: "DD, dd-M-y", - RFC_1036: "D, d M y", - RFC_1123: "D, d M yy", - RFC_2822: "D, d M yy", - RSS: "D, d M y", // RFC 822 - TICKS: "!", - TIMESTAMP: "@", - W3C: "yy-mm-dd", // ISO 8601 - - _ticksTo1970: ( ( ( 1970 - 1 ) * 365 + Math.floor( 1970 / 4 ) - Math.floor( 1970 / 100 ) + - Math.floor( 1970 / 400 ) ) * 24 * 60 * 60 * 10000000 ), - - /* Format a date object into a string value. - * The format can be combinations of the following: - * d - day of month (no leading zero) - * dd - day of month (two digit) - * o - day of year (no leading zeros) - * oo - day of year (three digit) - * D - day name short - * DD - day name long - * m - month of year (no leading zero) - * mm - month of year (two digit) - * M - month name short - * MM - month name long - * y - year (two digit) - * yy - year (four digit) - * @ - Unix timestamp (ms since 01/01/1970) - * ! - Windows ticks (100ns since 01/01/0001) - * "..." - literal text - * '' - single quote - * - * @param format string - the desired format of the date - * @param date Date - the date value to format - * @param settings Object - attributes include: - * dayNamesShort string[7] - abbreviated names of the days from Sunday (optional) - * dayNames string[7] - names of the days from Sunday (optional) - * monthNamesShort string[12] - abbreviated names of the months (optional) - * monthNames string[12] - names of the months (optional) - * @return string - the date in the above format - */ - formatDate: function( format, date, settings ) { - if ( !date ) { - return ""; - } - - var iFormat, - dayNamesShort = ( settings ? settings.dayNamesShort : null ) || this._defaults.dayNamesShort, - dayNames = ( settings ? settings.dayNames : null ) || this._defaults.dayNames, - monthNamesShort = ( settings ? settings.monthNamesShort : null ) || this._defaults.monthNamesShort, - monthNames = ( settings ? settings.monthNames : null ) || this._defaults.monthNames, - - // Check whether a format character is doubled - lookAhead = function( match ) { - var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match ); - if ( matches ) { - iFormat++; - } - return matches; - }, - - // Format a number, with leading zero if necessary - formatNumber = function( match, value, len ) { - var num = "" + value; - if ( lookAhead( match ) ) { - while ( num.length < len ) { - num = "0" + num; - } - } - return num; - }, - - // Format a name, short or long as requested - formatName = function( match, value, shortNames, longNames ) { - return ( lookAhead( match ) ? longNames[ value ] : shortNames[ value ] ); - }, - output = "", - literal = false; - - if ( date ) { - for ( iFormat = 0; iFormat < format.length; iFormat++ ) { - if ( literal ) { - if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) { - literal = false; - } else { - output += format.charAt( iFormat ); - } - } else { - switch ( format.charAt( iFormat ) ) { - case "d": - output += formatNumber( "d", date.getDate(), 2 ); - break; - case "D": - output += formatName( "D", date.getDay(), dayNamesShort, dayNames ); - break; - case "o": - output += formatNumber( "o", - Math.round( ( new Date( date.getFullYear(), date.getMonth(), date.getDate() ).getTime() - new Date( date.getFullYear(), 0, 0 ).getTime() ) / 86400000 ), 3 ); - break; - case "m": - output += formatNumber( "m", date.getMonth() + 1, 2 ); - break; - case "M": - output += formatName( "M", date.getMonth(), monthNamesShort, monthNames ); - break; - case "y": - output += ( lookAhead( "y" ) ? date.getFullYear() : - ( date.getFullYear() % 100 < 10 ? "0" : "" ) + date.getFullYear() % 100 ); - break; - case "@": - output += date.getTime(); - break; - case "!": - output += date.getTime() * 10000 + this._ticksTo1970; - break; - case "'": - if ( lookAhead( "'" ) ) { - output += "'"; - } else { - literal = true; - } - break; - default: - output += format.charAt( iFormat ); - } - } - } - } - return output; - }, - - /* Extract all possible characters from the date format. */ - _possibleChars: function( format ) { - var iFormat, - chars = "", - literal = false, - - // Check whether a format character is doubled - lookAhead = function( match ) { - var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match ); - if ( matches ) { - iFormat++; - } - return matches; - }; - - for ( iFormat = 0; iFormat < format.length; iFormat++ ) { - if ( literal ) { - if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) { - literal = false; - } else { - chars += format.charAt( iFormat ); - } - } else { - switch ( format.charAt( iFormat ) ) { - case "d": case "m": case "y": case "@": - chars += "0123456789"; - break; - case "D": case "M": - return null; // Accept anything - case "'": - if ( lookAhead( "'" ) ) { - chars += "'"; - } else { - literal = true; - } - break; - default: - chars += format.charAt( iFormat ); - } - } - } - return chars; - }, - - /* Get a setting value, defaulting if necessary. */ - _get: function( inst, name ) { - return inst.settings[ name ] !== undefined ? - inst.settings[ name ] : this._defaults[ name ]; - }, - - /* Parse existing date and initialise date picker. */ - _setDateFromField: function( inst, noDefault ) { - if ( inst.input.val() === inst.lastVal ) { - return; - } - - var dateFormat = this._get( inst, "dateFormat" ), - dates = inst.lastVal = inst.input ? inst.input.val() : null, - defaultDate = this._getDefaultDate( inst ), - date = defaultDate, - settings = this._getFormatConfig( inst ); - - try { - date = this.parseDate( dateFormat, dates, settings ) || defaultDate; - } catch ( event ) { - dates = ( noDefault ? "" : dates ); - } - inst.selectedDay = date.getDate(); - inst.drawMonth = inst.selectedMonth = date.getMonth(); - inst.drawYear = inst.selectedYear = date.getFullYear(); - inst.currentDay = ( dates ? date.getDate() : 0 ); - inst.currentMonth = ( dates ? date.getMonth() : 0 ); - inst.currentYear = ( dates ? date.getFullYear() : 0 ); - this._adjustInstDate( inst ); }, - /* Retrieve the default date shown on opening. */ - _getDefaultDate: function( inst ) { - return this._restrictMinMax( inst, - this._determineDate( inst, this._get( inst, "defaultDate" ), new Date() ) ); + isValid: function() { + return this.calendarInstance._isValid( this._getParsedValue() ); }, - /* A date may be specified as an exact value or a relative one. */ - _determineDate: function( inst, date, defaultDate ) { - var offsetNumeric = function( offset ) { - var date = new Date(); - date.setDate( date.getDate() + offset ); - return date; - }, - offsetString = function( offset ) { - try { - return $.datepicker.parseDate( $.datepicker._get( inst, "dateFormat" ), - offset, $.datepicker._getFormatConfig( inst ) ); - } - catch ( e ) { - - // Ignore - } - - var date = ( offset.toLowerCase().match( /^c/ ) ? - $.datepicker._getDate( inst ) : null ) || new Date(), - year = date.getFullYear(), - month = date.getMonth(), - day = date.getDate(), - pattern = /([+\-]?[0-9]+)\s*(d|D|w|W|m|M|y|Y)?/g, - matches = pattern.exec( offset ); - - while ( matches ) { - switch ( matches[ 2 ] || "d" ) { - case "d" : case "D" : - day += parseInt( matches[ 1 ], 10 ); break; - case "w" : case "W" : - day += parseInt( matches[ 1 ], 10 ) * 7; break; - case "m" : case "M" : - month += parseInt( matches[ 1 ], 10 ); - day = Math.min( day, $.datepicker._getDaysInMonth( year, month ) ); - break; - case "y": case "Y" : - year += parseInt( matches[ 1 ], 10 ); - day = Math.min( day, $.datepicker._getDaysInMonth( year, month ) ); - break; - } - matches = pattern.exec( offset ); - } - return new Date( year, month, day ); - }, - newDate = ( date == null || date === "" ? defaultDate : ( typeof date === "string" ? offsetString( date ) : - ( typeof date === "number" ? ( isNaN( date ) ? defaultDate : offsetNumeric( date ) ) : new Date( date.getTime() ) ) ) ); - - newDate = ( newDate && newDate.toString() === "Invalid Date" ? defaultDate : newDate ); - if ( newDate ) { - newDate.setHours( 0 ); - newDate.setMinutes( 0 ); - newDate.setSeconds( 0 ); - newDate.setMilliseconds( 0 ); - } - return this._daylightSavingAdjust( newDate ); + _destroy: function() { + this.calendarInstance.destroy(); + this.calendar.remove(); + this.element.removeAttr( "aria-haspopup aria-owns" ); }, - /* Handle switch to/from daylight saving. - * Hours may be non-zero on daylight saving cut-over: - * > 12 when midnight changeover, but then cannot generate - * midnight datetime, so jump to 1AM, otherwise reset. - * @param date (Date) the date to check - * @return (Date) the corrected date - */ - _daylightSavingAdjust: function( date ) { - if ( !date ) { - return null; - } - date.setHours( date.getHours() > 12 ? date.getHours() + 2 : 0 ); - return date; + widget: function() { + return this.calendar; }, - /* Set the date(s) directly. */ - _setDate: function( inst, date, noChange ) { - var clear = !date, - origMonth = inst.selectedMonth, - origYear = inst.selectedYear, - newDate = this._restrictMinMax( inst, this._determineDate( inst, date, new Date() ) ); - - inst.selectedDay = inst.currentDay = newDate.getDate(); - inst.drawMonth = inst.selectedMonth = inst.currentMonth = newDate.getMonth(); - inst.drawYear = inst.selectedYear = inst.currentYear = newDate.getFullYear(); - if ( ( origMonth !== inst.selectedMonth || origYear !== inst.selectedYear ) && !noChange ) { - this._notifyChange( inst ); - } - this._adjustInstDate( inst ); - if ( inst.input ) { - inst.input.val( clear ? "" : this._formatDate( inst ) ); - } + _getParsedValue: function() { + return this._parse( this.element.val() ); }, - /* Retrieve the date(s) directly. */ - _getDate: function( inst ) { - var startDate = ( !inst.currentYear || ( inst.input && inst.input.val() === "" ) ? null : - this._daylightSavingAdjust( new Date( - inst.currentYear, inst.currentMonth, inst.currentDay ) ) ); - return startDate; - }, - - /* Attach the onxxx handlers. These are declared statically so - * they work with static code transformers like Caja. - */ - _attachHandlers: function( inst ) { - var stepMonths = this._get( inst, "stepMonths" ), - id = "#" + inst.id.replace( /\\\\/g, "\\" ); - inst.dpDiv.find( "[data-handler]" ).map( function() { - var handler = { - prev: function() { - $.datepicker._adjustDate( id, -stepMonths, "M" ); - }, - next: function() { - $.datepicker._adjustDate( id, +stepMonths, "M" ); - }, - hide: function() { - $.datepicker._hideDatepicker(); - }, - today: function() { - $.datepicker._gotoToday( id ); - }, - selectDay: function() { - $.datepicker._selectDay( id, +this.getAttribute( "data-month" ), +this.getAttribute( "data-year" ), this ); - return false; - }, - selectMonth: function() { - $.datepicker._selectMonthYear( id, this, "M" ); - return false; - }, - selectYear: function() { - $.datepicker._selectMonthYear( id, this, "Y" ); - return false; - } - }; - $( this ).on( this.getAttribute( "data-event" ), handler[ this.getAttribute( "data-handler" ) ] ); - } ); - }, - - /* Generate the HTML for the current state of the date picker. */ - _generateHTML: function( inst ) { - var maxDraw, prevText, prev, nextText, next, currentText, gotoDate, - controls, buttonPanel, firstDay, showWeek, dayNames, dayNamesMin, - monthNames, monthNamesShort, beforeShowDay, showOtherMonths, - selectOtherMonths, defaultDate, html, dow, row, group, col, selectedDate, - cornerClass, calender, thead, day, daysInMonth, leadDays, curRows, numRows, - printDate, dRow, tbody, daySettings, otherMonth, unselectable, - tempDate = new Date(), - today = this._daylightSavingAdjust( - new Date( tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate() ) ), // clear time - isRTL = this._get( inst, "isRTL" ), - showButtonPanel = this._get( inst, "showButtonPanel" ), - hideIfNoPrevNext = this._get( inst, "hideIfNoPrevNext" ), - navigationAsDateFormat = this._get( inst, "navigationAsDateFormat" ), - numMonths = this._getNumberOfMonths( inst ), - showCurrentAtPos = this._get( inst, "showCurrentAtPos" ), - stepMonths = this._get( inst, "stepMonths" ), - isMultiMonth = ( numMonths[ 0 ] !== 1 || numMonths[ 1 ] !== 1 ), - currentDate = this._daylightSavingAdjust( ( !inst.currentDay ? new Date( 9999, 9, 9 ) : - new Date( inst.currentYear, inst.currentMonth, inst.currentDay ) ) ), - minDate = this._getMinMaxDate( inst, "min" ), - maxDate = this._getMinMaxDate( inst, "max" ), - drawMonth = inst.drawMonth - showCurrentAtPos, - drawYear = inst.drawYear; - - if ( drawMonth < 0 ) { - drawMonth += 12; - drawYear--; - } - if ( maxDate ) { - maxDraw = this._daylightSavingAdjust( new Date( maxDate.getFullYear(), - maxDate.getMonth() - ( numMonths[ 0 ] * numMonths[ 1 ] ) + 1, maxDate.getDate() ) ); - maxDraw = ( minDate && maxDraw < minDate ? minDate : maxDraw ); - while ( this._daylightSavingAdjust( new Date( drawYear, drawMonth, 1 ) ) > maxDraw ) { - drawMonth--; - if ( drawMonth < 0 ) { - drawMonth = 11; - drawYear--; - } + _setOption: function( key, value ) { + if ( key === "max" || key === "min" ) { + if ( typeof value === "string" ) { + value = this._parse( value ); } } - inst.drawMonth = drawMonth; - inst.drawYear = drawYear; - - prevText = this._get( inst, "prevText" ); - prevText = ( !navigationAsDateFormat ? prevText : this.formatDate( prevText, - this._daylightSavingAdjust( new Date( drawYear, drawMonth - stepMonths, 1 ) ), - this._getFormatConfig( inst ) ) ); - - prev = ( this._canAdjustMonth( inst, -1, drawYear, drawMonth ) ? - "<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click'" + - " title='" + prevText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" : - ( hideIfNoPrevNext ? "" : "<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='" + prevText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" ) ); - - nextText = this._get( inst, "nextText" ); - nextText = ( !navigationAsDateFormat ? nextText : this.formatDate( nextText, - this._daylightSavingAdjust( new Date( drawYear, drawMonth + stepMonths, 1 ) ), - this._getFormatConfig( inst ) ) ); - - next = ( this._canAdjustMonth( inst, +1, drawYear, drawMonth ) ? - "<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click'" + - " title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span></a>" : - ( hideIfNoPrevNext ? "" : "<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span></a>" ) ); - - currentText = this._get( inst, "currentText" ); - gotoDate = ( this._get( inst, "gotoCurrent" ) && inst.currentDay ? currentDate : today ); - currentText = ( !navigationAsDateFormat ? currentText : - this.formatDate( currentText, gotoDate, this._getFormatConfig( inst ) ) ); - - controls = ( !inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" + - this._get( inst, "closeText" ) + "</button>" : "" ); - - buttonPanel = ( showButtonPanel ) ? "<div class='ui-datepicker-buttonpane ui-widget-content'>" + ( isRTL ? controls : "" ) + - ( this._isInRange( inst, gotoDate ) ? "<button type='button' class='ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all' data-handler='today' data-event='click'" + - ">" + currentText + "</button>" : "" ) + ( isRTL ? "" : controls ) + "</div>" : ""; - firstDay = parseInt( this._get( inst, "firstDay" ), 10 ); - firstDay = ( isNaN( firstDay ) ? 0 : firstDay ); + this._super( key, value ); - showWeek = this._get( inst, "showWeek" ); - dayNames = this._get( inst, "dayNames" ); - dayNamesMin = this._get( inst, "dayNamesMin" ); - monthNames = this._get( inst, "monthNames" ); - monthNamesShort = this._get( inst, "monthNamesShort" ); - beforeShowDay = this._get( inst, "beforeShowDay" ); - showOtherMonths = this._get( inst, "showOtherMonths" ); - selectOtherMonths = this._get( inst, "selectOtherMonths" ); - defaultDate = this._getDefaultDate( inst ); - html = ""; - - for ( row = 0; row < numMonths[ 0 ]; row++ ) { - group = ""; - this.maxRows = 4; - for ( col = 0; col < numMonths[ 1 ]; col++ ) { - selectedDate = this._daylightSavingAdjust( new Date( drawYear, drawMonth, inst.selectedDay ) ); - cornerClass = " ui-corner-all"; - calender = ""; - if ( isMultiMonth ) { - calender += "<div class='ui-datepicker-group"; - if ( numMonths[ 1 ] > 1 ) { - switch ( col ) { - case 0: calender += " ui-datepicker-group-first"; - cornerClass = " ui-corner-" + ( isRTL ? "right" : "left" ); break; - case numMonths[ 1 ] - 1: calender += " ui-datepicker-group-last"; - cornerClass = " ui-corner-" + ( isRTL ? "left" : "right" ); break; - default: calender += " ui-datepicker-group-middle"; cornerClass = ""; break; - } - } - calender += "'>"; - } - calender += "<div class='ui-datepicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" + - ( /all|left/.test( cornerClass ) && row === 0 ? ( isRTL ? next : prev ) : "" ) + - ( /all|right/.test( cornerClass ) && row === 0 ? ( isRTL ? prev : next ) : "" ) + - this._generateMonthYearHeader( inst, drawMonth, drawYear, minDate, maxDate, - row > 0 || col > 0, monthNames, monthNamesShort ) + // draw month headers - "</div><table class='ui-datepicker-calendar'><thead>" + - "<tr>"; - thead = ( showWeek ? "<th class='ui-datepicker-week-col'>" + this._get( inst, "weekHeader" ) + "</th>" : "" ); - for ( dow = 0; dow < 7; dow++ ) { // days of the week - day = ( dow + firstDay ) % 7; - thead += "<th scope='col'" + ( ( dow + firstDay + 6 ) % 7 >= 5 ? " class='ui-datepicker-week-end'" : "" ) + ">" + - "<span title='" + dayNames[ day ] + "'>" + dayNamesMin[ day ] + "</span></th>"; - } - calender += thead + "</tr></thead><tbody>"; - daysInMonth = this._getDaysInMonth( drawYear, drawMonth ); - if ( drawYear === inst.selectedYear && drawMonth === inst.selectedMonth ) { - inst.selectedDay = Math.min( inst.selectedDay, daysInMonth ); - } - leadDays = ( this._getFirstDayOfMonth( drawYear, drawMonth ) - firstDay + 7 ) % 7; - curRows = Math.ceil( ( leadDays + daysInMonth ) / 7 ); // calculate the number of rows to generate - numRows = ( isMultiMonth ? this.maxRows > curRows ? this.maxRows : curRows : curRows ); //If multiple months, use the higher number of rows (see #7043) - this.maxRows = numRows; - printDate = this._daylightSavingAdjust( new Date( drawYear, drawMonth, 1 - leadDays ) ); - for ( dRow = 0; dRow < numRows; dRow++ ) { // create date picker rows - calender += "<tr>"; - tbody = ( !showWeek ? "" : "<td class='ui-datepicker-week-col'>" + - this._get( inst, "calculateWeek" )( printDate ) + "</td>" ); - for ( dow = 0; dow < 7; dow++ ) { // create date picker days - daySettings = ( beforeShowDay ? - beforeShowDay.apply( ( inst.input ? inst.input[ 0 ] : null ), [ printDate ] ) : [ true, "" ] ); - otherMonth = ( printDate.getMonth() !== drawMonth ); - unselectable = ( otherMonth && !selectOtherMonths ) || !daySettings[ 0 ] || - ( minDate && printDate < minDate ) || ( maxDate && printDate > maxDate ); - tbody += "<td class='" + - ( ( dow + firstDay + 6 ) % 7 >= 5 ? " ui-datepicker-week-end" : "" ) + // highlight weekends - ( otherMonth ? " ui-datepicker-other-month" : "" ) + // highlight days from other months - ( ( printDate.getTime() === selectedDate.getTime() && drawMonth === inst.selectedMonth && inst._keyEvent ) || // user pressed key - ( defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime() ) ? - - // or defaultDate is current printedDate and defaultDate is selectedDate - " " + this._dayOverClass : "" ) + // highlight selected day - ( unselectable ? " " + this._unselectableClass + " ui-state-disabled" : "" ) + // highlight unselectable days - ( otherMonth && !showOtherMonths ? "" : " " + daySettings[ 1 ] + // highlight custom dates - ( printDate.getTime() === currentDate.getTime() ? " " + this._currentClass : "" ) + // highlight selected day - ( printDate.getTime() === today.getTime() ? " ui-datepicker-today" : "" ) ) + "'" + // highlight today (if different) - ( ( !otherMonth || showOtherMonths ) && daySettings[ 2 ] ? " title='" + daySettings[ 2 ].replace( /'/g, "'" ) + "'" : "" ) + // cell title - ( unselectable ? "" : " data-handler='selectDay' data-event='click' data-month='" + printDate.getMonth() + "' data-year='" + printDate.getFullYear() + "'" ) + ">" + // actions - ( otherMonth && !showOtherMonths ? " " : // display for other months - ( unselectable ? "<span class='ui-state-default'>" + printDate.getDate() + "</span>" : "<a class='ui-state-default" + - ( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) + - ( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + // highlight selected day - ( otherMonth ? " ui-priority-secondary" : "" ) + // distinguish dates from other months - "' href='#'>" + printDate.getDate() + "</a>" ) ) + "</td>"; // display selectable date - printDate.setDate( printDate.getDate() + 1 ); - printDate = this._daylightSavingAdjust( printDate ); - } - calender += tbody + "</tr>"; - } - drawMonth++; - if ( drawMonth > 11 ) { - drawMonth = 0; - drawYear++; - } - calender += "</tbody></table>" + ( isMultiMonth ? "</div>" + - ( ( numMonths[ 0 ] > 0 && col === numMonths[ 1 ] - 1 ) ? "<div class='ui-datepicker-row-break'></div>" : "" ) : "" ); - group += calender; - } - html += group; + if ( $.inArray( key, this.calendarOptions ) !== -1 ) { + this.calendarInstance.option( key, value ); } - html += buttonPanel; - inst._keyEvent = false; - return html; - }, - /* Generate the month and year header. */ - _generateMonthYearHeader: function( inst, drawMonth, drawYear, minDate, maxDate, - secondary, monthNames, monthNamesShort ) { - - var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear, - changeMonth = this._get( inst, "changeMonth" ), - changeYear = this._get( inst, "changeYear" ), - showMonthAfterYear = this._get( inst, "showMonthAfterYear" ), - html = "<div class='ui-datepicker-title'>", - monthHtml = ""; - - // Month selection - if ( secondary || !changeMonth ) { - monthHtml += "<span class='ui-datepicker-month'>" + monthNames[ drawMonth ] + "</span>"; - } else { - inMinYear = ( minDate && minDate.getFullYear() === drawYear ); - inMaxYear = ( maxDate && maxDate.getFullYear() === drawYear ); - monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>"; - for ( month = 0; month < 12; month++ ) { - if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) { - monthHtml += "<option value='" + month + "'" + - ( month === drawMonth ? " selected='selected'" : "" ) + - ">" + monthNamesShort[ month ] + "</option>"; - } - } - monthHtml += "</select>"; + if ( key === "appendTo" ) { + this.calendar.appendTo( this._appendTo() ); } - if ( !showMonthAfterYear ) { - html += monthHtml + ( secondary || !( changeMonth && changeYear ) ? " " : "" ); + if ( key === "locale" || key === "dateFormat" ) { + this.element.val( this.calendarInstance.value() ); } - // Year selection - if ( !inst.yearshtml ) { - inst.yearshtml = ""; - if ( secondary || !changeYear ) { - html += "<span class='ui-datepicker-year'>" + drawYear + "</span>"; - } else { - - // determine range of years to display - years = this._get( inst, "yearRange" ).split( ":" ); - thisYear = new Date().getFullYear(); - determineYear = function( value ) { - var year = ( value.match( /c[+\-].*/ ) ? drawYear + parseInt( value.substring( 1 ), 10 ) : - ( value.match( /[+\-].*/ ) ? thisYear + parseInt( value, 10 ) : - parseInt( value, 10 ) ) ); - return ( isNaN( year ) ? thisYear : year ); - }; - year = determineYear( years[ 0 ] ); - endYear = Math.max( year, determineYear( years[ 1 ] || "" ) ); - year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year ); - endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear ); - inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>"; - for ( ; year <= endYear; year++ ) { - inst.yearshtml += "<option value='" + year + "'" + - ( year === drawYear ? " selected='selected'" : "" ) + - ">" + year + "</option>"; - } - inst.yearshtml += "</select>"; + if ( key === "disabled" ) { + this.element + .prop( "disabled", value ) + .toggleClass( "ui-state-disabled", value ) + .attr( "aria-disabled", value ); - html += inst.yearshtml; - inst.yearshtml = null; + if ( value ) { + this.close(); } } - html += this._get( inst, "yearSuffix" ); - if ( showMonthAfterYear ) { - html += ( secondary || !( changeMonth && changeYear ) ? " " : "" ) + monthHtml; - } - html += "</div>"; // Close datepicker_header - return html; - }, - - /* Adjust one of the date sub-fields. */ - _adjustInstDate: function( inst, offset, period ) { - var year = inst.selectedYear + ( period === "Y" ? offset : 0 ), - month = inst.selectedMonth + ( period === "M" ? offset : 0 ), - day = Math.min( inst.selectedDay, this._getDaysInMonth( year, month ) ) + ( period === "D" ? offset : 0 ), - date = this._restrictMinMax( inst, this._daylightSavingAdjust( new Date( year, month, day ) ) ); - - inst.selectedDay = date.getDate(); - inst.drawMonth = inst.selectedMonth = date.getMonth(); - inst.drawYear = inst.selectedYear = date.getFullYear(); - if ( period === "M" || period === "Y" ) { - this._notifyChange( inst ); - } - }, - - /* Ensure a date is within any min/max bounds. */ - _restrictMinMax: function( inst, date ) { - var minDate = this._getMinMaxDate( inst, "min" ), - maxDate = this._getMinMaxDate( inst, "max" ), - newDate = ( minDate && date < minDate ? minDate : date ); - return ( maxDate && newDate > maxDate ? maxDate : newDate ); - }, - - /* Notify change of month/year. */ - _notifyChange: function( inst ) { - var onChange = this._get( inst, "onChangeMonthYear" ); - if ( onChange ) { - onChange.apply( ( inst.input ? inst.input[ 0 ] : null ), - [ inst.selectedYear, inst.selectedMonth + 1, inst ] ); - } - }, - - /* Determine the number of months to show. */ - _getNumberOfMonths: function( inst ) { - var numMonths = this._get( inst, "numberOfMonths" ); - return ( numMonths == null ? [ 1, 1 ] : ( typeof numMonths === "number" ? [ 1, numMonths ] : numMonths ) ); - }, - - /* Determine the current maximum date - ensure no time components are set. */ - _getMinMaxDate: function( inst, minMax ) { - return this._determineDate( inst, this._get( inst, minMax + "Date" ), null ); - }, - - /* Find the number of days in a given month. */ - _getDaysInMonth: function( year, month ) { - return 32 - this._daylightSavingAdjust( new Date( year, month, 32 ) ).getDate(); - }, - - /* Find the day of the week of the first of a month. */ - _getFirstDayOfMonth: function( year, month ) { - return new Date( year, month, 1 ).getDay(); - }, - - /* Determines if we should allow a "next/prev" month display change. */ - _canAdjustMonth: function( inst, offset, curYear, curMonth ) { - var numMonths = this._getNumberOfMonths( inst ), - date = this._daylightSavingAdjust( new Date( curYear, - curMonth + ( offset < 0 ? offset : numMonths[ 0 ] * numMonths[ 1 ] ), 1 ) ); - - if ( offset < 0 ) { - date.setDate( this._getDaysInMonth( date.getFullYear(), date.getMonth() ) ); + if ( key === "position" ) { + this.calendar.position( this._buildPosition() ); } - return this._isInRange( inst, date ); - }, - - /* Is the given date in the accepted range? */ - _isInRange: function( inst, date ) { - var yearSplit, currentYear, - minDate = this._getMinMaxDate( inst, "min" ), - maxDate = this._getMinMaxDate( inst, "max" ), - minYear = null, - maxYear = null, - years = this._get( inst, "yearRange" ); - if ( years ) { - yearSplit = years.split( ":" ); - currentYear = new Date().getFullYear(); - minYear = parseInt( yearSplit[ 0 ], 10 ); - maxYear = parseInt( yearSplit[ 1 ], 10 ); - if ( yearSplit[ 0 ].match( /[+\-].*/ ) ) { - minYear += currentYear; - } - if ( yearSplit[ 1 ].match( /[+\-].*/ ) ) { - maxYear += currentYear; - } - } - - return ( ( !minDate || date.getTime() >= minDate.getTime() ) && - ( !maxDate || date.getTime() <= maxDate.getTime() ) && - ( !minYear || date.getFullYear() >= minYear ) && - ( !maxYear || date.getFullYear() <= maxYear ) ); - }, - - /* Provide the configuration settings for formatting/parsing. */ - _getFormatConfig: function( inst ) { - var shortYearCutoff = this._get( inst, "shortYearCutoff" ); - shortYearCutoff = ( typeof shortYearCutoff !== "string" ? shortYearCutoff : - new Date().getFullYear() % 100 + parseInt( shortYearCutoff, 10 ) ); - return { shortYearCutoff: shortYearCutoff, - dayNamesShort: this._get( inst, "dayNamesShort" ), dayNames: this._get( inst, "dayNames" ), - monthNamesShort: this._get( inst, "monthNamesShort" ), monthNames: this._get( inst, "monthNames" ) }; - }, - - /* Format the given date for display. */ - _formatDate: function( inst, day, month, year ) { - if ( !day ) { - inst.currentDay = inst.selectedDay; - inst.currentMonth = inst.selectedMonth; - inst.currentYear = inst.selectedYear; - } - var date = ( day ? ( typeof day === "object" ? day : - this._daylightSavingAdjust( new Date( year, month, day ) ) ) : - this._daylightSavingAdjust( new Date( inst.currentYear, inst.currentMonth, inst.currentDay ) ) ); - return this.formatDate( this._get( inst, "dateFormat" ), date, this._getFormatConfig( inst ) ); } } ); -/* - * Bind hover events for datepicker elements. - * Done via delegate so the binding only occurs once in the lifetime of the parent div. - * Global datepicker_instActive, set by _updateDatepicker allows the handlers to find their way back to the active picker. - */ -function datepicker_bindHover( dpDiv ) { - var selector = "button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a"; - return dpDiv.on( "mouseout", selector, function() { - $( this ).removeClass( "ui-state-hover" ); - if ( this.className.indexOf( "ui-datepicker-prev" ) !== -1 ) { - $( this ).removeClass( "ui-datepicker-prev-hover" ); - } - if ( this.className.indexOf( "ui-datepicker-next" ) !== -1 ) { - $( this ).removeClass( "ui-datepicker-next-hover" ); - } - } ) - .on( "mouseover", selector, datepicker_handleMouseover ); -} - -function datepicker_handleMouseover() { - if ( !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline ? datepicker_instActive.dpDiv.parent()[ 0 ] : datepicker_instActive.input[ 0 ] ) ) { - $( this ).parents( ".ui-datepicker-calendar" ).find( "a" ).removeClass( "ui-state-hover" ); - $( this ).addClass( "ui-state-hover" ); - if ( this.className.indexOf( "ui-datepicker-prev" ) !== -1 ) { - $( this ).addClass( "ui-datepicker-prev-hover" ); - } - if ( this.className.indexOf( "ui-datepicker-next" ) !== -1 ) { - $( this ).addClass( "ui-datepicker-next-hover" ); - } - } -} - -/* jQuery extend now ignores nulls! */ -function datepicker_extendRemove( target, props ) { - $.extend( target, props ); - for ( var name in props ) { - if ( props[ name ] == null ) { - target[ name ] = props[ name ]; - } - } - return target; -} - -/* Invoke the datepicker functionality. - @param options string - a command, optionally followed by additional parameters or - Object - settings for attaching new datepicker functionality - @return jQuery object */ -$.fn.datepicker = function( options ) { - - /* Verify an empty collection wasn't passed - Fixes #6976 */ - if ( !this.length ) { - return this; - } - - /* Initialise the date picker. */ - if ( !$.datepicker.initialized ) { - $( document ).on( "mousedown", $.datepicker._checkExternalClick ); - $.datepicker.initialized = true; - } - - /* Append datepicker main container to body if not exist. */ - if ( $( "#" + $.datepicker._mainDivId ).length === 0 ) { - $( "body" ).append( $.datepicker.dpDiv ); - } - - var otherArgs = Array.prototype.slice.call( arguments, 1 ); - if ( typeof options === "string" && ( options === "isDisabled" || options === "getDate" || options === "widget" ) ) { - return $.datepicker[ "_" + options + "Datepicker" ]. - apply( $.datepicker, [ this[ 0 ] ].concat( otherArgs ) ); - } - if ( options === "option" && arguments.length === 2 && typeof arguments[ 1 ] === "string" ) { - return $.datepicker[ "_" + options + "Datepicker" ]. - apply( $.datepicker, [ this[ 0 ] ].concat( otherArgs ) ); - } - return this.each( function() { - typeof options === "string" ? - $.datepicker[ "_" + options + "Datepicker" ]. - apply( $.datepicker, [ this ].concat( otherArgs ) ) : - $.datepicker._attachDatepicker( this, options ); - } ); -}; - -$.datepicker = new Datepicker(); // singleton instance -$.datepicker.initialized = false; -$.datepicker.uuid = new Date().getTime(); -$.datepicker.version = "@VERSION"; +$.each( $.ui.datepicker.prototype.calendarOptions, function( index, option ) { + $.ui.datepicker.prototype.options[ option ] = $.ui.calendar.prototype.options[ option ]; +} ); -return $.datepicker; +return widget; } ) ); |