dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
219 lines (190 loc) • 6.62 kB
JavaScript
define([
"dojo/_base/declare",
"dojo/dom-class",
"./_TimePickerMixin",
"./ToolBarButton",
"./ValuePicker",
"./ValuePickerSlot"
], function(declare, domClass, TimePickerMixin, ToolBarButton, ValuePicker, ValuePickerSlot){
// module:
// dojox/mobile/ValuePickerTimePicker
return declare("dojox.mobile.ValuePickerTimePicker", [ValuePicker, TimePickerMixin], {
// summary:
// A ValuePicker-based time picker widget.
// description:
// ValuePickerTimePicker is a time picker widget. It is a subclass of
// dojox.mobile.ValuePicker. It has two slots: hour and minute.
// readOnly: [const] Boolean
// If true, slot input fields are read-only. Only the plus and
// minus buttons can be used to change the values.
// Note that changing the value of the property after the widget
// creation has no effect.
readOnly: false,
// is24h: Boolean
// If true, the time is displayed in 24h format.
// Otherwise, displayed in AM/PM mode.
is24h: false,
/*=====
// values: Array
// The time value, as an array in 24h format: [hour24, minute] (ex. ["22","06"]).
// Warning: Do not use this property directly, make sure to call set() or get() methods.
values: null,
// values12: Array
// The time value, as an array in 12h format: [hour12, minute, ampm] (ex. ["10","06","PM"]).
// Warning: Do not use this property directly, make sure to call set() or get() methods.
values12: null,
=====*/
// hourPlusBtnLabel: String
// (Accessibility) Label for hour plus button
hourPlusBtnLabel: "",
// hourPlusBtnLabelRef: String
// (Accessibility) Reference to a node id containing text label for the hour plus button
hourPlusBtnLabelRef: "",
// minutePlusBtnLabel: String
// (Accessibility) Label for minute plus button
minutePlusBtnLabel: "",
// minutePlusBtnLabelRef: String
// (Accessibility) Reference to a node id containing text label for the minute plus button
minutePlusBtnLabelRef: "",
// hourMinusBtnLabel: String
// (Accessibility) Label for hour minus button
hourMinusBtnLabel: "",
// hourMinusBtnLabelRef: String
// (Accessibility) Reference to a node id containing text label for the hour minus button
hourMinusBtnLabelRef: "",
// minuteMinusBtnLabel: String
// (Accessibility) Label for minute minus button
minuteMinusBtnLabel: "",
// minuteMinusBtnLabelRef: String
// (Accessibility) Reference to a node id containing text label for the minute minus button
minuteMinusBtnLabelRef: "",
slotClasses: [
ValuePickerSlot,
ValuePickerSlot
],
slotProps: [
{labelFrom:0, labelTo:23, style:{width:"72px"}},
{labelFrom:0, labelTo:59, zeroPad:2, style:{width:"72px"}}
],
buildRendering: function(){
var p = this.slotProps;
p[0].readOnly = p[1].readOnly = this.readOnly;
this._setBtnLabels(p);
this.inherited(arguments);
var items = this.slots[0].items;
this._zero = items.slice(0, 1);
this._pm = items.slice(13);
domClass.add(this.domNode, "mblValuePickerTimePicker");
domClass.add(this.slots[0].domNode, "mblValuePickerTimePickerHourSlot");
domClass.add(this.slots[1].domNode, "mblValuePickerTimePickerMinuteSlot");
this.ampmButton = new ToolBarButton();
this.addChild(this.ampmButton);
this._conn = [
this.connect(this.ampmButton, "onClick", "onBtnClick")
];
this.set("is24h", this.is24h);
},
to12h: function(a){
// summary:
// Converts a 24h time to a 12h time.
// a: Array
// [hour24, minute] (ex. ["22","06"])
// returns: Array
// [hour12, minute, ampm] (ex. ["10","06","PM"])
// tags:
// private
var h = a[0] - 0;
var ampm = h < 12 ? "AM" : "PM";
if(h == 0){
h = 12;
}else if(h > 12){
h = h - 12;
}
return [h + "", a[1], ampm]; // [hour12, minute, ampm]
},
to24h: function(a){
// summary:
// Converts a 12h time to a 24h time.
// a: Array
// [hour12, minute, ampm] (ex. ["10","06","PM"])
// returns: Array
// [hour24, minute] (ex. ["22","06"])
// tags:
// private
var h = a[0] - 0;
if(a[2] == "AM"){
h = h == 12 ? 0 : h; // 12AM is 0h
}else{
h = h == 12 ? h : h + 12; // 12PM is 12h
}
return [h + "", a[1]]; // [hour24, minute]
},
onBtnClick: function(){
// summary:
// The handler for the AM/PM button.
var ampm = this.ampmButton.get("label") == "AM" ? "PM" : "AM";
var v = this.get("values12");
v[2] = ampm;
this.set("values12", v);
if(this.onValueChanged){
this.onValueChanged(this.slots[0]);
}
},
_setIs24hAttr: function(/*Boolean*/is24h){
// summary:
// Changes the time display mode, 24h or 12h.
var items = this.slots[0].items;
if(is24h && items.length != 24){ // 24h: 0 - 23
this.slots[0].items = this._zero.concat(items).concat(this._pm);
}else if(!is24h && items.length != 12){ // 12h: 1 - 12
items.splice(0, 1);
items.splice(12);
}
var v = this.get("values");
this._set("is24h", is24h);
this.ampmButton.domNode.style.display = is24h ? "none" : "";
this.set("values", v);
},
_getValuesAttr: function(){
// summary:
// Returns an array of hour and minute in 24h format.
var v = this.inherited(arguments); // [hour, minute]
return this.is24h ? v : this.to24h([v[0], v[1], this.ampmButton.get("label")]);
},
_setValuesAttr: function(/*Array*/values){
// summary:
// Sets an array of hour and minute in 24h format.
// values:
// [hour24, minute] (ex. ["22","06"])
if(this.is24h){
this.inherited(arguments);
}else{
values = this.to12h(values);
this.ampmButton.set("label", values[2]);
this.inherited(arguments);
}
},
_getValues12Attr: function(){
// summary:
// Returns an array of hour and minute in 12h format.
return this.to12h(this._getValuesAttr());
},
_setValues12Attr: function(/*Array*/values){
// summary:
// Sets an array of hour and minute in 12h format.
// values:
// [hour12, minute, ampm] (ex. ["10","06","PM"])
this.set("values", this.to24h(values));
},
_setBtnLabels: function(slotProps){
slotProps[0].plusBtnLabel = this.hourPlusBtnLabel;
slotProps[0].plusBtnLabelRef = this.hourPlusBtnLabelRef;
slotProps[0].minusBtnLabel = this.hourMinusBtnLabel;
slotProps[0].minusBtnLabelRef = this.hourMinusBtnLabelRef;
slotProps[1].plusBtnLabel = this.minutePlusBtnLabel;
slotProps[1].plusBtnLabelRef = this.minutePlusBtnLabelRef;
slotProps[1].minusBtnLabel = this.minuteMinusBtnLabel;
slotProps[1].minusBtnLabelRef = this.minuteMinusBtnLabelRef;
}
});
});