DatePickerSelect Class
<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:
-
configObjectObject literal specifying widget configuration properties.
Index
Methods
- _afterDisabledChangeDatePicker
- _afterSelectDate
- _bindSelectEvents
- _getAppendOrder
- _getLocaleMap
- _normalizeYearMonth
- _onSelectChange
- _populateDays
- _populateMonths
- _populateSelect
- _populateSelects
- _populateYears
- _renderElements
- _renderTriggerButton
- _selectCurrentDay
- _selectCurrentMonth
- _selectCurrentYear
- _syncSelectsUI
- _uiSetCurrentMonth
- bindUI
- destructor
- getCurrentDate
- getDaysInMonth
- renderUI
- syncUI
Properties
- DatePickerSelect.ATTRS static
- DatePickerSelect.HTML_PARSER static
- DatePickerSelect.NAME static
Methods
_afterDisabledChangeDatePicker
-
event
Fired after <a href="DatePickerSelect.html#config_disabled">disabled</a> is set.
Parameters:
-
eventEventFacade
_afterSelectDate
-
event
Fires when a date is selected on the Calendar.
Parameters:
-
eventEvent
_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:
_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:
_normalizeYearMonth
-
year -
month -
day
Returns an Object with the current day, month and year.
Parameters:
Returns:
_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
Populate a select element with the data passed on the params.
Parameters:
Returns:
_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
Fired after <a href="DatePickerSelect.html#config_currentMonth">currentMonth</a> is set.
Parameters:
-
eventEventFacade
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).
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' ]
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
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
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.