| 1 | define([ |
|---|
| 2 | "dojo/_base/declare", |
|---|
| 3 | "dojo/dom-class", |
|---|
| 4 | "dojo/dom-attr", |
|---|
| 5 | "./_DatePickerMixin", |
|---|
| 6 | "./ValuePicker", |
|---|
| 7 | "./ValuePickerSlot" |
|---|
| 8 | ], function(declare, domClass, domAttr, DatePickerMixin, ValuePicker, ValuePickerSlot){ |
|---|
| 9 | |
|---|
| 10 | // module: |
|---|
| 11 | // dojox/mobile/ValuePickerDatePicker |
|---|
| 12 | |
|---|
| 13 | return declare("dojox.mobile.ValuePickerDatePicker", [ValuePicker, DatePickerMixin], { |
|---|
| 14 | // summary: |
|---|
| 15 | // A ValuePicker-based date picker widget. |
|---|
| 16 | // description: |
|---|
| 17 | // ValuePickerDatePicker is a date picker widget. It is a subclass of |
|---|
| 18 | // dojox/mobile/ValuePicker. It has 3 slots: day, month and year. |
|---|
| 19 | |
|---|
| 20 | // readOnly: [const] Boolean |
|---|
| 21 | // If true, slot input fields are read-only. Only the plus and |
|---|
| 22 | // minus buttons can be used to change the values. |
|---|
| 23 | // Note that changing the value of the property after the widget |
|---|
| 24 | // creation has no effect. |
|---|
| 25 | readOnly: false, |
|---|
| 26 | |
|---|
| 27 | // yearPlusBtnLabel: String |
|---|
| 28 | // (Accessibility) Label for year plus button |
|---|
| 29 | yearPlusBtnLabel: "", |
|---|
| 30 | |
|---|
| 31 | // yearPlusBtnLabelRef: String |
|---|
| 32 | // (Accessibility) Reference to a node id containing text label for the year plus button |
|---|
| 33 | yearPlusBtnLabelRef: "", |
|---|
| 34 | |
|---|
| 35 | // yearPlusBtnLabel: String |
|---|
| 36 | // (Accessibility) Label for year minus button |
|---|
| 37 | yearMinusBtnLabel: "", |
|---|
| 38 | |
|---|
| 39 | // yearPlusBtnLabelRef: String |
|---|
| 40 | // (Accessibility) Reference to a node id containing text label for the year minus button |
|---|
| 41 | yearMinusBtnLabelRef: "", |
|---|
| 42 | |
|---|
| 43 | // monthPlusBtnLabel: String |
|---|
| 44 | // (Accessibility) Label for month plus button |
|---|
| 45 | monthPlusBtnLabel: "", |
|---|
| 46 | |
|---|
| 47 | // monthPlusBtnLabelRef: String |
|---|
| 48 | // (Accessibility) Reference to a node id containing text label for the month plus button |
|---|
| 49 | monthPlusBtnLabelRef: "", |
|---|
| 50 | |
|---|
| 51 | // monthMinusBtnLabel: String |
|---|
| 52 | // (Accessibility) Label for month minus button |
|---|
| 53 | monthMinusBtnLabel: "", |
|---|
| 54 | |
|---|
| 55 | // monthMinusBtnLabelRef: String |
|---|
| 56 | // (Accessibility) Reference to a node id containing text label for the month minus button |
|---|
| 57 | monthMinusBtnLabelRef: "", |
|---|
| 58 | |
|---|
| 59 | // dayPlusBtnLabel: String |
|---|
| 60 | // (Accessibility) Label for day plus button |
|---|
| 61 | dayPlusBtnLabel: "", |
|---|
| 62 | |
|---|
| 63 | // dayPlusBtnLabelRef: String |
|---|
| 64 | // (Accessibility) Reference to a node id containing text label for the day plus button |
|---|
| 65 | dayPlusBtnLabelRef: "", |
|---|
| 66 | |
|---|
| 67 | // dayMinusBtnLabel: String |
|---|
| 68 | // (Accessibility) Label for day minus button |
|---|
| 69 | dayMinusBtnLabel: "", |
|---|
| 70 | |
|---|
| 71 | // dayMinusBtnLabelRef: String |
|---|
| 72 | // (Accessibility) Reference to a node id containing text label for the day minus button |
|---|
| 73 | dayMinusBtnLabelRef: "", |
|---|
| 74 | |
|---|
| 75 | slotClasses: [ |
|---|
| 76 | ValuePickerSlot, |
|---|
| 77 | ValuePickerSlot, |
|---|
| 78 | ValuePickerSlot |
|---|
| 79 | ], |
|---|
| 80 | |
|---|
| 81 | slotProps: [ |
|---|
| 82 | {labelFrom:1970, labelTo:2038, style:{width:"87px"}}, |
|---|
| 83 | {style:{width:"72px"}}, |
|---|
| 84 | {style:{width:"72px"}} |
|---|
| 85 | ], |
|---|
| 86 | |
|---|
| 87 | buildRendering: function(){ |
|---|
| 88 | var p = this.slotProps; |
|---|
| 89 | p[0].readOnly = p[1].readOnly = p[2].readOnly = this.readOnly; |
|---|
| 90 | this._setBtnLabels(p); |
|---|
| 91 | this.initSlots(); |
|---|
| 92 | this.inherited(arguments); |
|---|
| 93 | domClass.add(this.domNode, "mblValuePickerDatePicker"); |
|---|
| 94 | this._conn = [ |
|---|
| 95 | this.connect(this.slots[0], "_spinToValue", "_onYearSet"), |
|---|
| 96 | this.connect(this.slots[1], "_spinToValue", "_onMonthSet"), |
|---|
| 97 | this.connect(this.slots[2], "_spinToValue", "_onDaySet") |
|---|
| 98 | ]; |
|---|
| 99 | }, |
|---|
| 100 | |
|---|
| 101 | disableValues: function(/*Number*/daysInMonth){ |
|---|
| 102 | // summary: |
|---|
| 103 | // Disables the end days of the month to match the specified |
|---|
| 104 | // number of days of the month. |
|---|
| 105 | var items = this.slots[2].items; |
|---|
| 106 | if(this._tail){ |
|---|
| 107 | this.slots[2].items = items = items.concat(this._tail); |
|---|
| 108 | } |
|---|
| 109 | this._tail = items.slice(daysInMonth); |
|---|
| 110 | items.splice(daysInMonth); |
|---|
| 111 | }, |
|---|
| 112 | |
|---|
| 113 | _setBtnLabels: function(slotProps){ |
|---|
| 114 | //summary: |
|---|
| 115 | // Set a11y labels on the plus/minus buttons |
|---|
| 116 | slotProps[0].plusBtnLabel = this.yearPlusBtnLabel; |
|---|
| 117 | slotProps[0].plusBtnLabelRef = this.yearPlusBtnLabelRef; |
|---|
| 118 | slotProps[0].minusBtnLabel = this.yearMinusBtnLabel; |
|---|
| 119 | slotProps[0].minusBtnLabelRef = this.yearMinusBtnLabelRef; |
|---|
| 120 | slotProps[1].plusBtnLabel = this.monthPlusBtnLabel; |
|---|
| 121 | slotProps[1].plusBtnLabelRef = this.monthPlusBtnLabelRef; |
|---|
| 122 | slotProps[1].minusBtnLabel = this.monthMinusBtnLabel; |
|---|
| 123 | slotProps[1].minusBtnLabelRef = this.monthMinusBtnLabelRef; |
|---|
| 124 | slotProps[2].plusBtnLabel = this.dayPlusBtnLabel; |
|---|
| 125 | slotProps[2].plusBtnLabelRef = this.dayPlusBtnLabelRef; |
|---|
| 126 | slotProps[2].minusBtnLabel = this.dayMinusBtnLabel; |
|---|
| 127 | slotProps[2].minusBtnLabelRef = this.dayMinusBtnLabelRef; |
|---|
| 128 | } |
|---|
| 129 | }); |
|---|
| 130 | }); |
|---|
