source: Dev/trunk/src/client/dojox/mobile/ValuePickerTimePicker.js @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.5 KB
Line 
1define([
2        "dojo/_base/declare",
3        "dojo/dom-class",
4        "./_TimePickerMixin",
5        "./ToolBarButton",
6        "./ValuePicker",
7        "./ValuePickerSlot"
8], function(declare, domClass, TimePickerMixin, ToolBarButton, ValuePicker, ValuePickerSlot){
9
10        // module:
11        //              dojox/mobile/ValuePickerTimePicker
12
13        return declare("dojox.mobile.ValuePickerTimePicker", [ValuePicker, TimePickerMixin], {
14                // summary:
15                //              A ValuePicker-based time picker widget.
16                // description:
17                //              ValuePickerTimePicker is a time picker widget. It is a subclass of
18                //              dojox.mobile.ValuePicker. It has two slots: hour and minute.
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                // is24h: Boolean
28                //              If true, the time is displayed in 24h format.
29                //              Otherwise, displayed in AM/PM mode.
30                is24h: false,
31
32                /*=====
33                // values: Array
34                //              The time value, as an array in 24h format: [hour24, minute] (ex. ["22","06"]).
35                //              Warning: Do not use this property directly, make sure to call set() or get() methods.
36                values: null,
37
38                // values12: Array
39                //              The time value, as an array in 12h format: [hour12, minute, ampm] (ex. ["10","06","PM"]).
40                //              Warning: Do not use this property directly, make sure to call set() or get() methods.
41                values12: null,
42                =====*/
43               
44                // hourPlusBtnLabel: String
45                //              (Accessibility) Label for hour plus button
46                hourPlusBtnLabel: "",
47               
48                // hourPlusBtnLabelRef: String
49                //              (Accessibility) Reference to a node id containing text label for the hour plus button
50                hourPlusBtnLabelRef: "",
51               
52                // minutePlusBtnLabel: String
53                //              (Accessibility) Label for minute plus button
54                minutePlusBtnLabel: "",
55               
56                // minutePlusBtnLabelRef: String
57                //              (Accessibility) Reference to a node id containing text label for the minute plus button
58                minutePlusBtnLabelRef: "",
59               
60                // hourMinusBtnLabel: String
61                //              (Accessibility) Label for hour minus button
62                hourMinusBtnLabel: "",
63               
64                // hourMinusBtnLabelRef: String
65                //              (Accessibility) Reference to a node id containing text label for the hour minus button
66                hourMinusBtnLabelRef: "",
67               
68                // minuteMinusBtnLabel: String
69                //              (Accessibility) Label for minute minus button
70                minuteMinusBtnLabel: "",
71               
72                // minuteMinusBtnLabelRef: String
73                //              (Accessibility) Reference to a node id containing text label for the minute minus button
74                minuteMinusBtnLabelRef: "",
75
76                slotClasses: [
77                        ValuePickerSlot,
78                        ValuePickerSlot
79                ],
80
81                slotProps: [
82                        {labelFrom:0, labelTo:23, style:{width:"72px"}},
83                        {labelFrom:0, labelTo:59, zeroPad:2, style:{width:"72px"}}
84                ],
85
86                buildRendering: function(){
87                        var p = this.slotProps;
88                        p[0].readOnly = p[1].readOnly = this.readOnly;
89                        this._setBtnLabels(p);
90                        this.inherited(arguments);
91                        var items = this.slots[0].items;
92                        this._zero = items.slice(0, 1);
93                        this._pm = items.slice(13);
94
95                        domClass.add(this.domNode, "mblValuePickerTimePicker");
96                        domClass.add(this.slots[0].domNode, "mblValuePickerTimePickerHourSlot");
97                        domClass.add(this.slots[1].domNode, "mblValuePickerTimePickerMinuteSlot");
98
99                        this.ampmButton = new ToolBarButton();
100                        this.addChild(this.ampmButton);
101                        this._conn = [
102                                this.connect(this.ampmButton, "onClick", "onBtnClick")
103                        ];
104                        this.set("is24h", this.is24h);
105                },
106
107                to12h: function(a){
108                        // summary:
109                        //              Converts a 24h time to a 12h time.
110                        // a: Array
111                        //              [hour24, minute] (ex. ["22","06"])
112                        // returns: Array
113                        //              [hour12, minute, ampm] (ex. ["10","06","PM"])
114                        // tags:
115                        //              private
116                        var h = a[0] - 0;
117                        var ampm = h < 12 ? "AM" : "PM";
118                        if(h == 0){
119                                h = 12;
120                        }else if(h > 12){
121                                h = h - 12;
122                        }
123                        return [h + "", a[1], ampm]; // [hour12, minute, ampm]
124                },
125
126                to24h: function(a){
127                        // summary:
128                        //              Converts a 12h time to a 24h time.
129                        // a: Array
130                        //              [hour12, minute, ampm] (ex. ["10","06","PM"])
131                        // returns: Array
132                        //              [hour24, minute] (ex. ["22","06"])
133                        // tags:
134                        //              private
135                        var h = a[0] - 0;
136                        if(a[2] == "AM"){
137                                h = h == 12 ? 0 : h; // 12AM is 0h
138                        }else{
139                                h = h == 12 ? h : h + 12; // 12PM is 12h
140                        }
141                        return [h + "", a[1]]; // [hour24, minute]
142                },
143
144                onBtnClick: function(){
145                        // summary:
146                        //              The handler for the AM/PM button.
147                        var ampm = this.ampmButton.get("label") == "AM" ? "PM" : "AM";
148                        var v = this.get("values12");
149                        v[2] = ampm;
150                        this.set("values12", v);
151                        if(this.onValueChanged){
152                                this.onValueChanged(this.slots[0]);
153                        }
154                },
155
156                _setIs24hAttr: function(/*Boolean*/is24h){
157                        // summary:
158                        //              Changes the time display mode, 24h or 12h.
159                        var items = this.slots[0].items;
160                        if(is24h && items.length != 24){ // 24h: 0 - 23
161                                this.slots[0].items = this._zero.concat(items).concat(this._pm);
162                        }else if(!is24h && items.length != 12){ // 12h: 1 - 12
163                                items.splice(0, 1);
164                                items.splice(12);
165                        }
166                        var v = this.get("values");
167                        this._set("is24h", is24h);
168                        this.ampmButton.domNode.style.display = is24h ? "none" : "";
169                        this.set("values", v);
170                },
171
172                _getValuesAttr: function(){
173                        // summary:
174                        //              Returns an array of hour and minute in 24h format.
175                        var v = this.inherited(arguments); // [hour, minute]
176                        return this.is24h ? v : this.to24h([v[0], v[1], this.ampmButton.get("label")]);
177                },
178
179                _setValuesAttr: function(/*Array*/values){
180                        // summary:
181                        //              Sets an array of hour and minute in 24h format.
182                        // values:
183                        //              [hour24, minute] (ex. ["22","06"])
184                        if(this.is24h){
185                                this.inherited(arguments);
186                        }else{
187                                values = this.to12h(values);
188                                this.ampmButton.set("label", values[2]);
189                                this.inherited(arguments);
190                        }
191                },
192
193                _getValues12Attr: function(){
194                        // summary:
195                        //              Returns an array of hour and minute in 12h format.
196                        return this.to12h(this._getValuesAttr());
197                },
198
199                _setValues12Attr: function(/*Array*/values){
200                        // summary:
201                        //              Sets an array of hour and minute in 12h format.
202                        // values:
203                        //              [hour12, minute, ampm] (ex. ["10","06","PM"])
204                        this.set("values", this.to24h(values));
205                },
206               
207                _setBtnLabels: function(slotProps){
208                    slotProps[0].plusBtnLabel = this.hourPlusBtnLabel;
209                        slotProps[0].plusBtnLabelRef = this.hourPlusBtnLabelRef;
210                        slotProps[0].minusBtnLabel = this.hourMinusBtnLabel;
211                        slotProps[0].minusBtnLabelRef = this.hourMinusBtnLabelRef;
212                        slotProps[1].plusBtnLabel = this.minutePlusBtnLabel;
213                        slotProps[1].plusBtnLabelRef = this.minutePlusBtnLabelRef;
214                        slotProps[1].minusBtnLabel = this.minuteMinusBtnLabel;
215                        slotProps[1].minusBtnLabelRef = this.minuteMinusBtnLabelRef;
216                }
217        });
218});
Note: See TracBrowser for help on using the repository browser.