ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
109 lines • 3.92 kB
JavaScript
enyo.kind({
name: "onyx.sample.DatePickerSample",
kind: "FittableRows",
classes: "onyx",
handlers: {
onSelect: "updateDateValues"
},
components: [
{kind: "onyx.Toolbar", content:$L("Dates")},
{kind: "FittableColumns", style: "padding: 10px", components:[
{components: [
{content:$L("Choose Locale:"), classes:"onyx-sample-divider"},
{kind: "onyx.PickerDecorator", style:"padding:10px;", onSelect: "pickerHandler", components: [
{content: "Pick One...", style: "width: 200px"},
{kind: "onyx.Picker", components: [
{content: 'en_us', active:true},
{content: 'en_ca'},
{content: 'en_ie'},
{content: 'en_gb'},
{content: 'en_mx'},
{content: 'de_de'},
{content: 'fr_fr'},
{content: 'fr_ca'},
{content: 'it_it'},
{content: 'es_es'},
{content: 'es_mx'},
{content: 'es_us'}
]}
]}
]}
]},
{kind:"onyx.Button",content:"Get Dates", style:"margin:10px;", ontap:"getDates"},
{kind:"onyx.Button",content:"Reset Dates", ontap:"resetDates"},
{style:"width:100%;height:5px;background-color:black;margin-bottom:5px;"},
{caption: "Dates", style: "padding: 10px", components: [
{content:"DATE",classes:"onyx-sample-divider"},
{classes: "onyx-toolbar-inline", components: [
{name:"datePicker1", kind:"onyx.DatePicker"}
]},
{kind: "onyx.Groupbox", style:"padding:5px;", components: [
{kind: "onyx.GroupboxHeader", content: "Value"},
{name:"datePicker1Value", style:"padding:15px;"}
]},
{content:"DATE W/MIN & MAX YEARS",classes:"onyx-sample-divider"},
{classes: "onyx-toolbar-inline", components: [
{name:"datePicker2", kind:"onyx.DatePicker", minYear:2010, maxYear:2020}
]},
{kind: "onyx.Groupbox", style:"padding:5px;", components: [
{kind: "onyx.GroupboxHeader", content: "Value"},
{name:"datePicker2Value", style:"padding:15px;"}
]},
{content:"DATE W/DAYS HIDDEN",classes:"onyx-sample-divider"},
{classes: "onyx-toolbar-inline", components: [
{name:"datePicker3", kind:"onyx.DatePicker", dayHidden:true}
]},
{kind: "onyx.Groupbox", style:"padding:5px;", components: [
{kind: "onyx.GroupboxHeader", content: "Value"},
{name:"datePicker3Value", style:"padding:15px;"}
]},
{content:"DISABLED",classes:"onyx-sample-divider"},
{classes: "onyx-toolbar-inline", components: [
{name:"datePicker4", kind:"onyx.DatePicker", disabled: true}
]}
]}
],
initComponents: function() {
this.inherited(arguments);
this.locale = enyo.g11n.currentLocale().getLocale();
},
pickerHandler: function(inSender, inEvent){
this.locale = inEvent.selected.content;
this.formatDate();
return true;
},
formatDate: function(){
this.$.datePicker1.setLocale(this.locale);
this.$.datePicker2.setLocale(this.locale);
this.$.datePicker3.setLocale(this.locale);
this.$.datePicker4.setLocale(this.locale);
},
resetDates: function(date) {
var d = new Date();
this.$.datePicker1.setValue(d);
this.$.datePicker2.setValue(d);
this.$.datePicker3.setValue(d);
this.$.datePicker4.setValue(d);
this.getDates();
},
getDates: function(){
var fmt = this.format();
this.$.datePicker1Value.setContent(fmt.format(this.$.datePicker1.getValue()));
this.$.datePicker2Value.setContent(fmt.format(this.$.datePicker2.getValue()));
// reformat the formatter to display the Date wiht only Month and year
fmt = this.format('my');
this.$.datePicker3Value.setContent(fmt.format(this.$.datePicker3.getValue()));
},
updateDateValues: function(inSender, inEvent){
var fmt = inEvent.name != "datePicker3" ? this.format() : this.format('my');
this.$[inEvent.name + "Value"].setContent(fmt.format(inEvent.value));
},
format: function(dateComponents) {
var fmt = new enyo.g11n.DateFmt({
dateComponents: dateComponents || undefined,
date: 'short',
locale: new enyo.g11n.Locale(this.locale)
});
return fmt;
}
});