Show:

<p><img src="assets/images/aui-calendar-datepicker-select/main.png"/></p>

A base class for DatePickerSelect, providing: <ul> <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> <li>Select a date from Calendar to select elements</li> </ul>

Quick Example:<br/>

<pre><code>var instance = new A.DatePickerSelect({ srcNode: '#srcNodeId', calendar: { // locale: 'pt-br', dateFormat: '%m/%d/%y', yearRange: [ 1970, 2009 ] } }).render(); </code></pre>

Check the list of <a href="DatePickerSelect.html#configattributes">Configuration Attributes</a> available for DatePickerSelect.

Constructor

DatePickerSelect

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Methods

_afterDisabledChangeDatePicker

(
  • event
)
protected

Fired after <a href="DatePickerSelect.html#config_disabled">disabled</a> is set.

Parameters:

_afterSelectDate

(
  • event
)
protected

Fires when a date is selected on the Calendar.

Parameters:

_bindSelectEvents

() protected

Bind events on each select element (change, keypress, etc).

_getAppendOrder

() Array protected

Gets an Array with the field elements in the correct order defined on <a href="DatePickerSelect.html#config_appendOrder">appendOrder</a>.

Returns:

Array:

_getLocaleMap

() Object protected

Get the locale map containing the respective values for the <a href="Widget.html#config_locale">locale</a> used.

<pre><code>A.DataType.Date.Locale['pt-br'] = A.merge( A.DataType.Date.Locale['en'], { a: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Fri', 'Sat'], A: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'], b: ['Jan','Fev','Mar','Abr','Mai','Jun', 'Jul','Ago','Set','Out','Nov','Dez'], B: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho', 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], c: '%a %d %b %Y %T %Z', p: ['AM', 'PM'], P: ['am', 'pm'], r: '%I:%M:%S %p', x: '%d/%m/%y', X: '%T' } );</code></pre>

Returns:

Object:

_normalizeYearMonth

(
  • year
  • month
  • day
)
Object protected

Returns an Object with the current day, month and year.

Parameters:

  • year Number

    Year in the format YYYY.

  • month Number

    0 for January 11 for December.

  • day Number

Returns:

Object:

_onSelectChange

(
  • event
)
protected

Fired on any select change.

Parameters:

_populateDays

() protected

Populate the day select element with the correct data.

_populateMonths

() protected

Populate the month select element with the correct data.

_populateSelect

(
  • select
  • fromIndex
  • toIndex
  • values
)
String protected

Populate a select element with the data passed on the params.

Parameters:

  • select HTMLSelectElement

    Select to be populated

  • fromIndex Number

    Index to start

  • toIndex Number

    Index to end

  • values Object

    Object with labels to be used as content of each option. Optional.

Returns:

String:

_populateSelects

() protected

Populate each select element with the correct data for the day, month and year.

_populateYears

() protected

Populate the year select element with the correct data.

_renderElements

() protected

Render DOM elements for the DatePickerSelect.

_renderTriggerButton

() protected

Render DOM element for the trigger button of the DatePickerSelect.

_selectCurrentDay

() protected

Select the current day on the respective input field.

_selectCurrentMonth

() protected

Select the current month on the respective input field.

_selectCurrentYear

() protected

Select the current year on the respective input field.

_syncSelectsUI

() protected

Sync the UI of each DOM Select element.

_uiSetCurrentMonth

(
  • event
)
protected

Fired after <a href="DatePickerSelect.html#config_currentMonth">currentMonth</a> is set.

Parameters:

bindUI

() protected

Bind the events on the DatePickerSelect UI. Lifecycle.

destructor

() protected

Destructor lifecycle implementation for the Datepicker class. Purges events attached to the node (and all child nodes).

getCurrentDate

() Date

Get current date.

Returns:

Date:

getDaysInMonth

(
  • year
  • month
)
Number

Get the number of days in the passed year and month.

Parameters:

  • year Number

    Year in the format YYYY.

  • month Number

    0 for January 11 for December.

Returns:

renderUI

() protected

Create the DOM structure for the DatePickerSelect. Lifecycle.

syncUI

() protected

Sync the DatePickerSelect UI. Lifecycle.

Properties

DatePickerSelect.ATTRS

Object static

Static property used to define the default attribute configuration for the DatePickerSelect.

DatePickerSelect.HTML_PARSER

Object static

Object hash, defining how attribute values are to be parsed from markup contained in the widget's content box.

DatePickerSelect.NAME

String static

Static property provides a string to identify the class.

Attributes

appendOrder

Array

The order the selects elements are appended to the <a href="DatePickerSelect.html#config_srcNode">srcNode</a>.

Default: [ 'm', 'd', 'y' ]

buttonNode

String

DOM Node to display the button of the DatePickerSelect. If not specified try to query using HTML_PARSER an element inside contentBox which matches <code>aui-buttonitem</code>.

Default: Generated div element.

calendar

Object

<a href="Calendar.html">Calendar</a> configuration Object.</a>

Default: {}

dayNode

String | Node

DOM Node to display the day of the DatePickerSelect. If not specified try to query using HTML_PARSER an element inside contentBox which matches <code>aui-datepicker-year</code>.

Default: Generated div element.

dayNodeName

String

Name attribute used on the <a href="DatePickerSelect.html#config_dayNode">dayNode</a>.

Default: day

locale

String

Current locale

Default: en

monthNode

String | Node

DOM Node to display the month of the DatePickerSelect. If not specified try to query using HTML_PARSER an element inside contentBox which matches <code>aui-datepicker-year</code>.

Default: Generated div element.

monthNodeName

String

Name attribute used on the <a href="DatePickerSelect.html#config_monthNode">monthNode</a>.

Default: month

nullableDay

Boolean

If true the select element for the day will be nullable

Default: false

nullableMonth

Boolean

If true the select element for the month will be nullable

Default: false

nullableYear

Boolean

If true the select element for the year will be nullable

Default: false

populateDay

Boolean

If true the select element for the days will be automatic populated.

Default: true

populateMonth

Boolean

If true the select element for the month will be automatic populated.

Default: true

populateYear

Boolean

If true the select element for the year will be automatic populated.

Default: true

selectWrapperNode

String

DOM Node to display the selects of the DatePickerSelect. If not specified try to query using HTML_PARSER an element inside contentBox which matches <code>aui-datepicker-select-wrapper</code>.

Default: Generated div element.

trigger

Node | String

Trigger element to open the calendar. Inherited from <a href="OverlayContext.html#config_trigger">OverlayContext</a>.

Default: Generated HTLM div element

yearNode

String | Node

DOM Node to display the year of the DatePickerSelect. If not specified try to query using HTML_PARSER an element inside contentBox which matches <code>aui-datepicker-year</code>.

Default: Generated div element.

yearNodeName

String

Name attribute used on the <a href="DatePickerSelect.html#config_yearNode">yearNode</a>.

Default: year

yearRange

Array

Year range to be displayed on the year select element. By default it displays from -10 to +10 years from the current year.

Default: [ year - 10, year + 10 ]