Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

aui-datepicker-select-debug.js 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930
  1. AUI.add('aui-datepicker-select', function(A) {
  2. /**
  3. * The DatePickerSelect Utility
  4. *
  5. * @module aui-calendar
  6. * @submodule aui-calendar-datepicker-select
  7. */
  8. var Lang = A.Lang,
  9. isArray = Lang.isArray,
  10. nodeSetter = function(v) {
  11. return A.one(v);
  12. },
  13. createSelect = function() {
  14. return A.Node.create(SELECT_TPL);
  15. },
  16. DOC = A.config.doc,
  17. APPEND_ORDER = 'appendOrder',
  18. BLANK = '',
  19. BODY = 'body',
  20. BOUNDING_BOX = 'boundingBox',
  21. BUTTON = 'button',
  22. BUTTON_NODE = 'buttonNode',
  23. BUTTONITEM = 'buttonitem',
  24. CALENDAR = 'calendar',
  25. CLEARFIX = 'clearfix',
  26. CONTENT = 'content',
  27. CONTENT_BOX = 'contentBox',
  28. CURRENT_DAY = 'currentDay',
  29. CURRENT_MONTH = 'currentMonth',
  30. CURRENT_YEAR = 'currentYear',
  31. DATA_COMPONENT_ID = 'data-auiComponentID',
  32. DATEPICKER = 'datepicker',
  33. DAY = 'day',
  34. DAY_NODE = 'dayNode',
  35. DAY_NODE_NAME = 'dayNodeName',
  36. DISABLED = 'disabled',
  37. DISPLAY = 'display',
  38. DOT = '.',
  39. HELPER = 'helper',
  40. LOCALE = 'locale',
  41. ID = 'id',
  42. MAX_DATE = 'maxDate',
  43. MIN_DATE = 'minDate',
  44. MONTH = 'month',
  45. MONTH_NODE = 'monthNode',
  46. MONTH_NODE_NAME = 'monthNodeName',
  47. NAME = 'name',
  48. NULLABLE_DAY = 'nullableDay',
  49. NULLABLE_MONTH = 'nullableMonth',
  50. NULLABLE_YEAR = 'nullableYear',
  51. OPTION = 'option',
  52. POPULATE_DAY = 'populateDay',
  53. POPULATE_MONTH = 'populateMonth',
  54. POPULATE_YEAR = 'populateYear',
  55. SELECT = 'select',
  56. SELECTED = 'selected',
  57. SELECT_WRAPPER_NODE = 'selectWrapperNode',
  58. SPACE = ' ',
  59. SRC_NODE = 'srcNode',
  60. TRIGGER = 'trigger',
  61. WRAPPER = 'wrapper',
  62. YEAR = 'year',
  63. YEAR_NODE = 'yearNode',
  64. YEAR_NODE_NAME = 'yearNodeName',
  65. YEAR_RANGE = 'yearRange',
  66. getClassName = A.getClassName,
  67. CSS_BUTTONITEM = getClassName(BUTTONITEM),
  68. CSS_DATEPICKER = getClassName(DATEPICKER),
  69. CSS_DATEPICKER_BUTTON_WRAPPER = getClassName(DATEPICKER, BUTTON, WRAPPER),
  70. CSS_DATEPICKER_DAY = getClassName(DATEPICKER, DAY),
  71. CSS_DATEPICKER_DISPLAY = getClassName(DATEPICKER, DISPLAY),
  72. CSS_DATEPICKER_DISPLAY_CONTENT = getClassName(DATEPICKER, DISPLAY, CONTENT),
  73. CSS_DATEPICKER_MONTH = getClassName(DATEPICKER, MONTH),
  74. CSS_DATEPICKER_SELECT_WRAPPER = getClassName(DATEPICKER, SELECT, WRAPPER),
  75. CSS_DATEPICKER_YEAR = getClassName(DATEPICKER, YEAR),
  76. CSS_HELPER_CLEARFIX = getClassName(HELPER, CLEARFIX),
  77. SELECT_TPL = '<select></select>',
  78. SELECT_OPTION_TPL = '<option></option>',
  79. WRAPPER_BUTTON_TPL = '<div class="'+ CSS_DATEPICKER_BUTTON_WRAPPER +'"></div>',
  80. WRAPPER_SELECT_TPL = '<div class='+ CSS_DATEPICKER_SELECT_WRAPPER +'></div>';
  81. /**
  82. * <p><img src="assets/images/aui-calendar-datepicker-select/main.png"/></p>
  83. *
  84. * A base class for DatePickerSelect, providing:
  85. * <ul>
  86. * <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li>
  87. * <li>Select a date from Calendar to select elements</li>
  88. * </ul>
  89. *
  90. * Quick Example:<br/>
  91. *
  92. * <pre><code>var instance = new A.DatePickerSelect({
  93. * srcNode: '#srcNodeId',
  94. * calendar: {
  95. * // locale: 'pt-br',
  96. * dateFormat: '%m/%d/%y',
  97. * yearRange: [ 1970, 2009 ]
  98. * }
  99. * }).render();
  100. * </code></pre>
  101. *
  102. * Check the list of <a href="DatePickerSelect.html#configattributes">Configuration Attributes</a> available for
  103. * DatePickerSelect.
  104. *
  105. * @class DatePickerSelect
  106. * @param config {Object} Object literal specifying widget configuration properties.
  107. * @constructor
  108. * @extends Component
  109. */
  110. var DatePickerSelect = A.Component.create(
  111. {
  112. /**
  113. * Static property provides a string to identify the class.
  114. *
  115. * @property DatePickerSelect.NAME
  116. * @type String
  117. * @static
  118. */
  119. NAME: DATEPICKER,
  120. /**
  121. * Static property used to define the default attribute
  122. * configuration for the DatePickerSelect.
  123. *
  124. * @property DatePickerSelect.ATTRS
  125. * @type Object
  126. * @static
  127. */
  128. ATTRS: {
  129. /**
  130. * The order the selects elements are appended to the
  131. * <a href="DatePickerSelect.html#config_srcNode">srcNode</a>.
  132. *
  133. * @attribute appendOrder
  134. * @default [ 'm', 'd', 'y' ]
  135. * @type Array
  136. */
  137. appendOrder: {
  138. validator: isArray,
  139. value: [ 'm', 'd', 'y' ]
  140. },
  141. /**
  142. * DOM Node to display the button of the DatePickerSelect. If not
  143. * specified try to query using HTML_PARSER an element inside
  144. * contentBox which matches <code>aui-buttonitem</code>.
  145. *
  146. * @attribute buttonNode
  147. * @default Generated div element.
  148. * @type String
  149. */
  150. buttonNode: {},
  151. /**
  152. * <a href="Calendar.html">Calendar</a> configuration Object.</a>
  153. *
  154. * @attribute calendar
  155. * @default {}
  156. * @type Object
  157. */
  158. calendar: {
  159. value: {}
  160. },
  161. /**
  162. * DOM Node to display the day of the DatePickerSelect. If not
  163. * specified try to query using HTML_PARSER an element inside
  164. * contentBox which matches <code>aui-datepicker-year</code>.
  165. *
  166. * @attribute dayNode
  167. * @default Generated div element.
  168. * @type String | Node
  169. */
  170. dayNode: {
  171. setter: nodeSetter,
  172. valueFn: createSelect
  173. },
  174. /**
  175. * Name attribute used on the
  176. * <a href="DatePickerSelect.html#config_dayNode">dayNode</a>.
  177. *
  178. * @attribute dayNodeName
  179. * @default day
  180. * @type String
  181. */
  182. dayNodeName: {
  183. valueFn: function() {
  184. return this.get(DAY_NODE).get(NAME) || DAY;
  185. }
  186. },
  187. /**
  188. * DOM Node to display the month of the DatePickerSelect. If not
  189. * specified try to query using HTML_PARSER an element inside
  190. * contentBox which matches <code>aui-datepicker-year</code>.
  191. *
  192. * @attribute monthNode
  193. * @default Generated div element.
  194. * @type String | Node
  195. */
  196. monthNode: {
  197. setter: nodeSetter,
  198. valueFn: createSelect
  199. },
  200. /**
  201. * Name attribute used on the
  202. * <a href="DatePickerSelect.html#config_monthNode">monthNode</a>.
  203. *
  204. * @attribute monthNodeName
  205. * @default month
  206. * @type String
  207. */
  208. monthNodeName: {
  209. valueFn: function() {
  210. return this.get(MONTH_NODE).get(NAME) || MONTH;
  211. }
  212. },
  213. /**
  214. * If true the select element for the day will be nullable
  215. *
  216. * @attribute nullableDay
  217. * @default false
  218. * @type boolean
  219. */
  220. nullableDay: {
  221. value: false
  222. },
  223. /**
  224. * If true the select element for the month will be nullable
  225. *
  226. * @attribute nullableMonth
  227. * @default false
  228. * @type boolean
  229. */
  230. nullableMonth: {
  231. value: false
  232. },
  233. /**
  234. * If true the select element for the year will be nullable
  235. *
  236. * @attribute nullableYear
  237. * @default false
  238. * @type boolean
  239. */
  240. nullableYear: {
  241. value: false
  242. },
  243. /**
  244. * If true the select element for the days will be automatic
  245. * populated.
  246. *
  247. * @attribute populateDay
  248. * @default true
  249. * @type boolean
  250. */
  251. populateDay: {
  252. value: true
  253. },
  254. /**
  255. * If true the select element for the month will be automatic
  256. * populated.
  257. *
  258. * @attribute populateMonth
  259. * @default true
  260. * @type boolean
  261. */
  262. populateMonth: {
  263. value: true
  264. },
  265. /**
  266. * If true the select element for the year will be automatic
  267. * populated.
  268. *
  269. * @attribute populateYear
  270. * @default true
  271. * @type boolean
  272. */
  273. populateYear: {
  274. value: true
  275. },
  276. /**
  277. * DOM Node to display the selects of the DatePickerSelect. If not
  278. * specified try to query using HTML_PARSER an element inside
  279. * contentBox which matches <code>aui-datepicker-select-wrapper</code>.
  280. *
  281. * @attribute selectWrapperNode
  282. * @default Generated div element.
  283. * @type String
  284. */
  285. selectWrapperNode: {
  286. valueFn: function() {
  287. return A.Node.create(WRAPPER_SELECT_TPL);
  288. }
  289. },
  290. /**
  291. * Trigger element to open the calendar. Inherited from
  292. * <a href="OverlayContext.html#config_trigger">OverlayContext</a>.
  293. *
  294. * @attribute trigger
  295. * @default Generated HTLM div element
  296. * @type {Node | String}
  297. */
  298. trigger: {
  299. setter: function(value) {
  300. if (value instanceof A.NodeList) {
  301. return value;
  302. }
  303. else if (Lang.isString(value)) {
  304. return A.all(value);
  305. }
  306. return new A.NodeList(value);
  307. },
  308. valueFn: function() {
  309. return A.NodeList.create(WRAPPER_BUTTON_TPL);
  310. }
  311. },
  312. /**
  313. * DOM Node to display the year of the DatePickerSelect. If not
  314. * specified try to query using HTML_PARSER an element inside
  315. * contentBox which matches <code>aui-datepicker-year</code>.
  316. *
  317. * @attribute yearNode
  318. * @default Generated div element.
  319. * @type String | Node
  320. */
  321. yearNode: {
  322. setter: nodeSetter,
  323. valueFn: createSelect
  324. },
  325. /**
  326. * Name attribute used on the
  327. * <a href="DatePickerSelect.html#config_yearNode">yearNode</a>.
  328. *
  329. * @attribute yearNodeName
  330. * @default year
  331. * @type String
  332. */
  333. yearNodeName: {
  334. valueFn: function() {
  335. return this.get(YEAR_NODE).get(NAME) || YEAR;
  336. }
  337. },
  338. /**
  339. * Year range to be displayed on the year select element. By default
  340. * it displays from -10 to +10 years from the current year.
  341. *
  342. * @attribute yearRange
  343. * @default [ year - 10, year + 10 ]
  344. * @type Array
  345. */
  346. yearRange: {
  347. validator: isArray,
  348. valueFn: function() {
  349. var year = new Date().getFullYear();
  350. return [ year - 10, year + 10 ];
  351. }
  352. }
  353. },
  354. /**
  355. * Object hash, defining how attribute values are to be parsed from
  356. * markup contained in the widget's content box.
  357. *
  358. * @property DatePickerSelect.HTML_PARSER
  359. * @type Object
  360. * @static
  361. */
  362. HTML_PARSER: {
  363. buttonNode: DOT + CSS_BUTTONITEM,
  364. dayNode: DOT + CSS_DATEPICKER_DAY,
  365. monthNode: DOT + CSS_DATEPICKER_MONTH,
  366. selectWrapperNode: DOT + CSS_DATEPICKER_SELECT_WRAPPER,
  367. trigger: DOT + CSS_DATEPICKER_BUTTON_WRAPPER,
  368. yearNode: DOT + CSS_DATEPICKER_YEAR
  369. },
  370. EXTENDS: A.Component,
  371. prototype: {
  372. /**
  373. * Bind the events on the DatePickerSelect UI. Lifecycle.
  374. *
  375. * @method bindUI
  376. * @protected
  377. */
  378. bindUI: function() {
  379. var instance = this;
  380. instance._bindSelectEvents();
  381. instance.after('calendar:clear', instance._afterClearDate);
  382. instance.after('calendar:select', instance._afterSelectDate);
  383. },
  384. /**
  385. * Descructor lifecycle implementation for the Datepicker class.
  386. * Purges events attached to the node (and all child nodes).
  387. *
  388. * @method destructor
  389. * @protected
  390. */
  391. destructor: function() {
  392. var instance = this;
  393. instance.datePicker.destroy();
  394. },
  395. /**
  396. * Create the DOM structure for the DatePickerSelect. Lifecycle.
  397. *
  398. * @method renderUI
  399. * @protected
  400. */
  401. renderUI: function() {
  402. var instance = this;
  403. instance._renderElements();
  404. instance._renderTriggerButton();
  405. instance._renderCalendar();
  406. },
  407. /**
  408. * Sync the DatePickerSelect UI. Lifecycle.
  409. *
  410. * @method syncUI
  411. * @protected
  412. */
  413. syncUI: function() {
  414. var instance = this;
  415. instance._syncSelectsUI();
  416. },
  417. /**
  418. * Fires when a None is selected on the Calendar.
  419. *
  420. * @method _afterClearDate
  421. * @param {Event} event
  422. * @protected
  423. */
  424. _afterClearDate: function(event) {
  425. var instance = this;
  426. if (instance.get(NULLABLE_DAY) && instance.get(NULLABLE_MONTH) && instance.get(NULLABLE_YEAR)) {
  427. instance.get(DAY_NODE).val(-1);
  428. instance.get(MONTH_NODE).val(-1);
  429. instance.get(YEAR_NODE).val(-1);
  430. }
  431. },
  432. /**
  433. * Fires when a date is selected on the Calendar.
  434. *
  435. * @method _afterSelectDate
  436. * @param {Event} event
  437. * @protected
  438. */
  439. _afterSelectDate: function(event) {
  440. var instance = this;
  441. if (event.date.normal.length) {
  442. instance._syncSelectsUI();
  443. }
  444. },
  445. /**
  446. * Bind events on each select element (change, keypress, etc).
  447. *
  448. * @method _bindSelectEvents
  449. * @protected
  450. */
  451. _bindSelectEvents: function() {
  452. var instance = this;
  453. var selects = instance.get(SELECT_WRAPPER_NODE).all(SELECT);
  454. selects.on('change', instance._onSelectChange, instance);
  455. selects.on('keypress', instance._onSelectChange, instance);
  456. },
  457. /**
  458. * Gets an Array with the field elements in the correct order defined
  459. * on <a href="DatePickerSelect.html#config_appendOrder">appendOrder</a>.
  460. *
  461. * @method _getAppendOrder
  462. * @protected
  463. * @return {Array}
  464. */
  465. _getAppendOrder: function() {
  466. var instance = this;
  467. var appendOrder = instance.get(APPEND_ORDER);
  468. var id = instance.get(ID);
  469. var mapping = {
  470. d: instance.get(DAY_NODE),
  471. m: instance.get(MONTH_NODE),
  472. y: instance.get(YEAR_NODE)
  473. };
  474. var firstField = mapping[ appendOrder[0] ];
  475. var secondField = mapping[ appendOrder[1] ];
  476. var thirdField = mapping[ appendOrder[2] ];
  477. firstField.setAttribute(DATA_COMPONENT_ID, id);
  478. secondField.setAttribute(DATA_COMPONENT_ID, id);
  479. thirdField.setAttribute(DATA_COMPONENT_ID, id);
  480. return [ firstField, secondField, thirdField ];
  481. },
  482. /**
  483. * Fired on any select change.
  484. *
  485. * @method _onSelectChange
  486. * @param {EventFacade} event
  487. * @protected
  488. */
  489. _onSelectChange: function(event) {
  490. var instance = this;
  491. var target = event.currentTarget || event.target;
  492. var monthChanged = target.test(DOT + CSS_DATEPICKER_MONTH);
  493. var yearChanged = target.test(DOT + CSS_DATEPICKER_YEAR);
  494. var currentDay = instance.get(DAY_NODE).val();
  495. var currentMonth = instance.get(MONTH_NODE).val();
  496. var currentYear = instance.get(YEAR_NODE).val();
  497. var validDay = (currentDay > -1);
  498. var validMonth = (currentMonth > -1);
  499. var validYear = (currentYear > -1);
  500. if (validDay) {
  501. instance.calendar.set(CURRENT_DAY, currentDay);
  502. }
  503. if (validMonth) {
  504. instance.calendar.set(CURRENT_MONTH, currentMonth);
  505. }
  506. if (validYear) {
  507. instance.calendar.set(CURRENT_YEAR, currentYear);
  508. }
  509. if (monthChanged || yearChanged) {
  510. instance._uiSetCurrentMonth();
  511. if (validDay) {
  512. instance._selectCurrentDay();
  513. }
  514. }
  515. if (validDay) {
  516. instance.calendar.selectCurrentDate();
  517. }
  518. if (!validDay || !validMonth || !validYear) {
  519. instance.calendar.clear();
  520. }
  521. },
  522. /**
  523. * Populate the day select element with the correct data.
  524. *
  525. * @method _populateDays
  526. * @protected
  527. */
  528. _populateDays: function() {
  529. var instance = this;
  530. if (instance.get(POPULATE_DAY)) {
  531. instance._populateSelect(
  532. instance.get(DAY_NODE),
  533. 1,
  534. instance.calendar.getDaysInMonth(),
  535. null,
  536. null,
  537. instance.get(NULLABLE_DAY)
  538. );
  539. }
  540. },
  541. /**
  542. * Populate the month select element with the correct data.
  543. *
  544. * @method _populateMonths
  545. * @protected
  546. */
  547. _populateMonths: function() {
  548. var instance = this;
  549. var localeMap = instance.calendar._getLocaleMap();
  550. var monthLabels = localeMap.B;
  551. if (instance.get(POPULATE_MONTH)) {
  552. instance._populateSelect(
  553. instance.get(MONTH_NODE),
  554. 0,
  555. (monthLabels.length - 1),
  556. monthLabels,
  557. null,
  558. instance.get(NULLABLE_MONTH)
  559. );
  560. }
  561. },
  562. /**
  563. * Populate the year select element with the correct data.
  564. *
  565. * @method _populateYears
  566. * @protected
  567. */
  568. _populateYears: function() {
  569. var instance = this;
  570. var yearRange = instance.get(YEAR_RANGE);
  571. if (instance.get(POPULATE_YEAR)) {
  572. instance._populateSelect(
  573. instance.get(YEAR_NODE),
  574. yearRange[0],
  575. yearRange[1],
  576. null,
  577. null,
  578. instance.get(NULLABLE_YEAR)
  579. );
  580. }
  581. },
  582. /**
  583. * Populate a select element with the data passed on the params.
  584. *
  585. * @method _populateSelect
  586. * @param {HTMLSelectElement} select Select to be populated
  587. * @param {Number} fromIndex Index to start
  588. * @param {Number} toIndex Index to end
  589. * @param {Object} values Object with labels to be used as content of each
  590. * option. Optional.
  591. * @protected
  592. * @return {String}
  593. */
  594. _populateSelect: function(select, fromIndex, toIndex, labels, values, nullable) {
  595. var i = 0;
  596. var index = fromIndex;
  597. var selectEl = A.Node.getDOMNode(select);
  598. select.empty();
  599. labels = labels || [];
  600. values = values || [];
  601. if (nullable) {
  602. selectEl.options[0] = new Option(BLANK, -1);
  603. i++;
  604. }
  605. while (index <= toIndex) {
  606. var value = values[index] || index;
  607. var label = labels[index] || index;
  608. selectEl.options[i] = new Option(label, index);
  609. i++;
  610. index++;
  611. }
  612. },
  613. /**
  614. * Populate each select element with the correct data for the day, month
  615. * and year.
  616. *
  617. * @method _populateSelects
  618. * @protected
  619. */
  620. _populateSelects: function() {
  621. var instance = this;
  622. instance._populateDays();
  623. instance._populateMonths();
  624. instance._populateYears();
  625. // restricting dates based on the selects values
  626. var monthOptions = instance.get(MONTH_NODE).all(OPTION);
  627. var yearOptions = instance.get(YEAR_NODE).all(OPTION);
  628. var mLength = monthOptions.size() - 1;
  629. var yLength = yearOptions.size() - 1;
  630. var firstMonth = monthOptions.item(0).val();
  631. var firstYear = yearOptions.item(0).val();
  632. var lastMonth = monthOptions.item(mLength).val();
  633. var lastYear = yearOptions.item(yLength).val();
  634. var maxMonthDays = instance.calendar.getDaysInMonth(lastYear, lastMonth);
  635. var minDate = new Date(firstYear, firstMonth, 1);
  636. var maxDate = new Date(lastYear, lastMonth, maxMonthDays);
  637. instance.calendar.set(MAX_DATE, maxDate);
  638. instance.calendar.set(MIN_DATE, minDate);
  639. },
  640. _renderCalendar: function() {
  641. var instance = this;
  642. var datePickerConfig = {
  643. calendar: instance.get(CALENDAR),
  644. trigger: instance.get(TRIGGER).item(0)
  645. };
  646. var datePicker = new A.DatePicker(datePickerConfig).render();
  647. datePicker.addTarget(instance);
  648. instance.datePicker = datePicker;
  649. instance.calendar = datePicker.calendar;
  650. },
  651. /**
  652. * Render DOM elements for the DatePickerSelect.
  653. *
  654. * @method _renderElements
  655. * @protected
  656. */
  657. _renderElements: function() {
  658. var instance = this;
  659. var boundingBox = instance.get(BOUNDING_BOX);
  660. var contentBox = instance.get(CONTENT_BOX);
  661. var dayNode = instance.get(DAY_NODE);
  662. var monthNode = instance.get(MONTH_NODE);
  663. var yearNode = instance.get(YEAR_NODE);
  664. dayNode.addClass(CSS_DATEPICKER_DAY);
  665. monthNode.addClass(CSS_DATEPICKER_MONTH);
  666. yearNode.addClass(CSS_DATEPICKER_YEAR);
  667. boundingBox.addClass(CSS_DATEPICKER_DISPLAY);
  668. boundingBox.addClass(CSS_HELPER_CLEARFIX);
  669. contentBox.addClass(CSS_DATEPICKER_DISPLAY_CONTENT);
  670. // setting name of the fields
  671. monthNode.set(NAME, instance.get(MONTH_NODE_NAME));
  672. yearNode.set(NAME, instance.get(YEAR_NODE_NAME));
  673. dayNode.set(NAME, instance.get(DAY_NODE_NAME));
  674. if (!monthNode.inDoc(A.config.doc)) {
  675. // append elements
  676. var selectWrapper = instance.get(SELECT_WRAPPER_NODE);
  677. var orderedFields = instance._getAppendOrder();
  678. // this textNode is to prevent layout shifting only
  679. // simulate the default browser space between inputs/selects on re-append
  680. var textNode = A.one(
  681. DOC.createTextNode(SPACE)
  682. );
  683. selectWrapper.append(orderedFields[0]);
  684. selectWrapper.append( textNode.clone() );
  685. selectWrapper.append(orderedFields[1]);
  686. selectWrapper.append( textNode );
  687. selectWrapper.append(orderedFields[2]);
  688. contentBox.append(selectWrapper);
  689. }
  690. },
  691. /**
  692. * Render DOM element for the trigger button of the DatePickerSelect.
  693. *
  694. * @method _renderTriggerButton
  695. * @protected
  696. */
  697. _renderTriggerButton: function() {
  698. var instance = this;
  699. var trigger = instance.get(TRIGGER).item(0);
  700. instance._buttonItem = new A.ButtonItem(
  701. {
  702. boundingBox: instance.get(BUTTON_NODE),
  703. icon: CALENDAR
  704. }
  705. );
  706. instance.get(CONTENT_BOX).append(trigger);
  707. trigger.setAttribute(DATA_COMPONENT_ID, instance.get(ID));
  708. if ( trigger.test(DOT + CSS_DATEPICKER_BUTTON_WRAPPER) ) {
  709. // use Button if the user doesn't specify a trigger
  710. instance._buttonItem.render(trigger);
  711. }
  712. },
  713. /**
  714. * Select the current day on the respective input field.
  715. *
  716. * @method _selectCurrentDay
  717. * @protected
  718. */
  719. _selectCurrentDay: function() {
  720. var instance = this;
  721. var currentDate = instance.calendar.getCurrentDate();
  722. instance.get(DAY_NODE).val(
  723. String(currentDate.getDate())
  724. );
  725. },
  726. /**
  727. * Select the current month on the respective input field.
  728. *
  729. * @method _selectCurrentMonth
  730. * @protected
  731. */
  732. _selectCurrentMonth: function() {
  733. var instance = this;
  734. var currentDate = instance.calendar.getCurrentDate();
  735. instance.get(MONTH_NODE).val(
  736. String(currentDate.getMonth())
  737. );
  738. },
  739. /**
  740. * Select the current year on the respective input field.
  741. *
  742. * @method _selectCurrentYear
  743. * @protected
  744. */
  745. _selectCurrentYear: function() {
  746. var instance = this;
  747. var currentDate = instance.calendar.getCurrentDate();
  748. instance.get(YEAR_NODE).val(
  749. String(currentDate.getFullYear())
  750. );
  751. },
  752. /**
  753. * Sync the UI of each DOM Select element.
  754. *
  755. * @method _syncSelectsUI
  756. * @protected
  757. */
  758. _syncSelectsUI: function() {
  759. var instance = this;
  760. instance._populateSelects();
  761. instance._selectCurrentDay();
  762. instance._selectCurrentMonth();
  763. instance._selectCurrentYear();
  764. },
  765. /**
  766. * Fired after
  767. * <a href="DatePickerSelect.html#config_currentMonth">currentMonth</a> is set.
  768. *
  769. * @method _uiSetCurrentMonth
  770. * @param {EventFacade} event
  771. * @protected
  772. */
  773. _uiSetCurrentMonth: function(value) {
  774. var instance = this;
  775. instance._populateDays();
  776. },
  777. /**
  778. * Fired after
  779. * <a href="DatePickerSelect.html#config_disabled">disabled</a> is set.
  780. *
  781. * @method _afterDisabledChangeDatePicker
  782. * @param {EventFacade} event
  783. * @protected
  784. */
  785. _uiSetDisabled: function(disabled) {
  786. var instance = this;
  787. DatePickerSelect.superclass._uiSetDisabled.apply(instance, arguments);
  788. instance.get(DAY_NODE).set('disabled', disabled);
  789. instance.get(MONTH_NODE).set('disabled', disabled);
  790. instance.get(YEAR_NODE).set('disabled', disabled);
  791. instance.datePicker.set(DISABLED, disabled);
  792. instance._buttonItem.set(DISABLED, disabled);
  793. instance._buttonItem.StateInteraction.set(DISABLED, disabled);
  794. }
  795. }
  796. }
  797. );
  798. A.DatePickerSelect = DatePickerSelect;
  799. }, '@VERSION@' ,{requires:['aui-datepicker-base','aui-button-item'], skinnable:true});