timePicker in same style as datePicker or a flag telling datePicker to also have hour/minutes.

Submitted by Terje Pedersen on 26 April 2011 at 08:43

Here is my version modified from the datePicker with onchange:

import mobl
import mobl::ui::generic

style narrowNumFieldStyle {
-webkit-appearance: none;
-webkit-box-flex: 100;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-text-size-adjust: 140%;
-moz-text-size-adjust: 140%;
-webkit-appearance: textarea;
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(white),
to(white) );
border: 0;
font-size: 1em;
height: 1em;
padding: 0;
text-align: center;
width: 3em;
}

control narrowNumField(n : Num, onchange : Callback = null) {
<input type=“text” databind=n onkeyup={
if(!Math.isNaN(n)) {
onchange(null);
}
} class=narrowNumFieldStyle/>
}

control timePicker(d : DateTime, onchange : Callback = null) {
script {
if(d==null) { d=now(); }
}

var visible = false
var hours = d.getHours()
var minutes = d.getMinutes()

label((hours.toString().length==1?“0”:““)+hours.toString()+”:”+(minutes.toString().length==1?“0”:““)+minutes.toString(), onclick={
visible = visible ? false : true;
})

when(visible) {

button(”+”, onclick={
d.setHours(d.getHours() + 1);
hours = d.getHours();
d = d;
onchange(d);
})

narrowNumField(hours, onchange={ d.setHours(hours); d=d; onchange(d); })

button(“-”, onclick={
d.setHours(d.getHours() - 1);
hours = d.getHours();
d = d;
onchange(d);
})

button(“+”, onclick={
d.setMinutes(d.getMinutes() + 1);
minutes = d.getMinutes();
d = d;
onchange(d);
})

narrowNumField(minutes, onchange={ d.setMinutes(minutes); d=d; onchange(d);})

button(“-”, onclick={
d.setMinutes(d.getMinutes() - 1);
minutes = d.getMinutes();
d = d;
onchange(d);
})

}

}

Excellent. I’ll add a slightly modified version of this to mobl::ui::generic::datepicker ok?

Thats ok. I updated it to the latest version earlier today.

Haven’t looked at your modifed version but both mine and the mobl included one doesn’t update when changing the DateTime parameter variable from code. It works with the datePicker.

Moved the toTimeString string concat to a function and used that instead for the label, and it worked :) But it should have been added DateTime.toTimeString

function toTimeString(d : DateTime) : String {
var hours = d.getHours();
var minutes = d.getMinutes();

return (hours.toString().length==1?"0":"")+hours.toString()+":"+(minutes.toString().length==1?"0":"")+minutes.toString();

}