Now you get “month/day/year” I want to have it formated my way.

Submitted by Terje Pedersen on 15 April 2011 at 09:30

Here my modified version of the datapicker.
Now you can input a data-format, when you create a datepicker, i.e. datepicker(now(), DD.MM.YYYY).
You can use follow date-formats:
DD: Day
MM: Month as num
MON: Month as String
YYYY: Year with four digits
YY: Year with two digits

I also have write a function “setMonthName”, where you can write your on Month-Strings and i have corrected the year bug.

module mobl::ui::generic::datepicker

import mobl
import mobl::ui::generic

var months : Array = Array(“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”);

function setMonthName(names: Array){
if(names.length == 12)
{months = names;}
}

function getMonthName(m : Num) : String {
return months.get(m);
}

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) );/
background: transparent;
border: 0;
font-size: 17px;
height: 17px;
padding: 0;
margin: 0;
text-align: center;
width: 3em;
}

style monthStyle {
font-size: 17px;
height: 17px;
padding: 0;
margin: 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 datePicker(d : DateTime, form : String = “MM/DD/YYYY”) {
var visible = false
var f = form
var day = d.getDate()
var year = d.getFullYear()

label(formDate(d, form), onclick={
visible = !visible;
})

when(visible) {

button(“+”, onclick={
d.setDate(d.getDate() + 1);
day = d.getDate();
d = d;
})

narrowNumField(day, onchange={ d.setDate(day); d=d; })

button(“-”, onclick={
d.setDate(d.getDate() - 1);
day = d.getDate();
d = d;
})

button(“+”, onclick={
d.setMonth(d.getMonth() + 1);
d = d;
})

label(getMonthName(d.getMonth()), style=monthStyle)

button(“-”, onclick={
d.setMonth(d.getMonth() - 1);
d = d;
})

button(“+”, onclick={
d.setFullYear(d.getFullYear() + 1);
year = d.getFullYear();
d = d;
})

narrowNumField(d.getFullYear(), onchange={ d.setFullYear(year); d=d; })

button(“-”, onclick={
d.setFullYear(d.getFullYear() - 1);
year = d.getFullYear();
d = d;
})

}

}

function formDate(d : DateTime, format : String):String{
var f : String = format;
f = f.replace(/DD/,d.getDate().toString());
f = f.replace(/MM/, (d.getMonth()+1).toString());
f = f.replace(/YYYY/, d.getFullYear().toString());
f = f.replace(/YY/, d.getFullYear().toString().substr(3, 2));
f = f.replace(/MON/, getMonthName(d.getMonth()));

return f;

}