PDA

View Full Version : mm/yyyy DatePicker?



estesbubba
17 Dec 2010, 1:24 PM
I'm working on a DatePicker for a credit card expiration date. I got the picker to display how I want but when selected I get NaN/NaN/NaN. I've looked through both DatePicker classes twice and can't find how to set the display value to mm/yyyy. Maybe it's just Friday afternoon and my brain has shut down.



xtype: 'datepickerfield',
name: 'd',
label: 'Transit/Routing Number',
value: new Date(),
picker: {
slotOrder: ['month', 'year']
}

sgrodzicki
18 Nov 2011, 10:00 AM
I've been looking for a solution for a couple of days now and came across this topic over and over again. Finally I did it myself, so here is my solution for future reading:


Ext.MonthPicker = Ext.extend(Ext.DatePicker, {
onSlotPick: function(slot, value) {
Ext.DatePicker.superclass.onSlotPick.apply(this, arguments);
},
getValue: function() {
var value = Ext.DatePicker.superclass.getValue.call(this);

return new Date(value.year, value.month-1, 1);
},
});

Ext.form.MonthPicker = Ext.extend(Ext.form.DatePicker, {
getDatePicker: function() {
if (!this.datePicker) {
if (this.picker instanceof Ext.MonthPicker) {
this.datePicker = this.picker;
} else {
this.datePicker = new Ext.MonthPicker(Ext.apply(this.picker || {}));
}

this.datePicker.setValue(this.value || null);

this.datePicker.on({
scope : this,
change: this.onPickerChange,
hide : this.onPickerHide
});
}

return this.datePicker;
},
});
Ext.reg('monthpickerfield', Ext.form.MonthPicker);

Usage:


{
xtype : 'monthpickerfield',
name : 'date',
label : 'Date',
slotOrder : [ 'month', 'year'],
format : 'F Y',
}

ÉdgarPaz
18 Jul 2012, 4:39 AM
...

THANK YOU! I was looking for exactly the same thing!