PDA

View Full Version : DateTimePicker(field) feedback



thomvl
3 Dec 2010, 6:30 AM
Hello Sencha users =)

I came across the custom made DateTimePicker on this forum, but now i spend some time trying to make a DateTimePickerField, but i cant seem to do it.. I am new to Sencha, but i tried to spit trough the sencha sourcecode, saying that the normal DatePickerField is deprecated? why is that? its so useful >_>

Could anyone help me with this problem? i need it for a school assignment before thursday T_T

Oh and Kudo's for the DateTimePicker to Blessan =)

Fixed it myself =) Look further down for solution =D
Feedback on the code anyone?

thomvl
3 Dec 2010, 10:17 AM
Managed to get it working by tweaking Sencha's main source code..
Added Time fields to the DatePicker object and tweaked DatePickerField with a custom format =)

Will clean stuff up a bit, remove all the alerts and then copy it to a seperate file and post it here.. But i guess i will do that tomorrow as i will be elsewhere this eve! =)

thomvl
4 Dec 2010, 9:55 PM
As promised my version of DateTimePicker with compatible Field

http://www.megaupload.com/?d=M4GDAOLZ

or


Ext.DateTimePicker = Ext.extend(Ext.Picker, {
yearFrom: 1980,
yearTo: new Date().getFullYear(),
monthText: 'Month',
dayText: 'Day',
yearText: 'Year',
hourText: 'Hour',
minuteText: 'Minutes',

slotOrder: ['day', 'month', 'year', 'hour', 'minutes'],

initComponent: function() {
var yearsFrom = this.yearFrom,
yearsTo = this.yearTo,
years = [],
days = [],
months = [],
hours = [],
minutes = [],
ln, tmp, i,
daysInMonth;


if (yearsFrom > yearsTo) {
tmp = yearsFrom;
yearsFrom = yearsTo;
yearsTo = tmp;
}

for (i = yearsFrom; i <= yearsTo; i++) {
years.push({
text: i,
value: i
});
}

daysInMonth = this.getDaysInMonth(1, new Date().getFullYear());

for (i = 0; i < daysInMonth; i++) {
days.push({
text: i + 1,
value: i + 1
});
}

for (i = 0, ln = Date.monthNames.length; i < ln; i++) {
months.push({
text: Date.monthNames[i],
value: i + 1
});
}

for (i = 0; i < 24; i++) {
hours.push({
text: i,
value: i
});
}

for (i = 00; i < 60; i++) {
minutes.push({
text: i,
value: i
});
}

this.slots = [];

this.slotOrder.forEach(function(item){
this.slots.push(this.createSlot(item, days, months, years, hours, minutes));
}, this);

Ext.DateTimePicker.superclass.initComponent.call(this);
},

afterRender: function() {
Ext.DateTimePicker.superclass.afterRender.apply(this, arguments);

this.setValue(this.value);
},

createSlot: function(name, days, months, years, hours, minutes){
switch (name) {
case 'year':
return {
name: 'year',
align: 'center',
data: years,
title: this.useTitles ? this.yearText : false,
flex: 3
};
case 'month':
return {
name: name,
align: 'right',
data: months,
title: this.useTitles ? this.monthText : false,
flex: 4
};
case 'day':
return {
name: 'day',
align: 'center',
data: days,
title: this.useTitles ? this.dayText : false,
flex: 2
};
case 'hour':
return {
name: 'hours',
align: 'center',
data: hours,
title: this.useTitles ? this.hourText : false,
flex: 2
};
case 'minutes':
return {
name: 'minutes',
align: 'center',
data: minutes,
title: this.useTitles ? this.minuteText : false,
flex: 2
};
}
},


onSlotPick: function(slot, value) {
var name = slot.name,
date, daysInMonth, daySlot;

if (name === "month" || name === "year") {
daySlot = this.child('[name=day]');
date = this.getValue();
daysInMonth = this.getDaysInMonth(date.getMonth()+1, date.getFullYear());
daySlot.store.clearFilter();
daySlot.store.filter({
fn: function(r) {
return r.get('extra') === true || r.get('value') <= daysInMonth;
}
});
daySlot.scroller.updateBoundary(true);
}

Ext.DateTimePicker.superclass.onSlotPick.apply(this, arguments);
},


getValue: function() {
var value = Ext.DateTimePicker.superclass.getValue.call(this),
daysInMonth = this.getDaysInMonth(value.month, value.year),
day = Math.min(value.day, daysInMonth);
return new Date(value.year, value.month-1, day, value.hours, value.minutes);
},


setValue: function(value, animated) {
if (!Ext.isDate(value) && !Ext.isObject(value)) {
value = null;
}

if (Ext.isDate(value)) {
this.value = {
day : value.getDate(),
year: value.getFullYear(),
month: value.getMonth() + 1,
hour: value.getHours(),
minutes: value.getMinutes(),
};
} else {
this.value = value;
}

return Ext.DateTimePicker.superclass.setValue.call(this, this.value, animated);
},


getDaysInMonth: function(month, year) {
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
return month == 2 && this.isLeapYear(year) ? 29 : daysInMonth[month-1];
},


isLeapYear: function(year) {
return !!((year & 3) === 0 && (year % 100 || (year % 400 === 0 && year)));
}
});

Ext.reg('datetimepicker', Ext.DateTimePicker);

Ext.form.DateTimePicker = Ext.extend(Ext.form.Field, {
ui: 'select',
picker: null,
destroyPickerOnHide: false,

initComponent: function() {
this.addEvents(

'select'
);

this.tabIndex = -1;
this.useMask = true;

Ext.form.Text.superclass.initComponent.apply(this, arguments);
},


getDateTimePicker: function() {
if (!this.dateTimePicker) {
if (this.picker instanceof Ext.DateTimePicker) {
this.dateTimePicker = this.picker;
} else {
this.dateTimePicker = new Ext.DateTimePicker(Ext.apply(this.picker || {}));
}
this.dateTimePicker.setValue(this.value || null);

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

return this.dateTimePicker;
},


onMaskTap: function() {
if (Ext.form.DateTimePicker.superclass.onMaskTap.apply(this, arguments) !== true) {
return false;
}

this.getDateTimePicker().show();
},


onPickerChange : function(picker, value) {
this.setValue(value);
this.fireEvent('select', this, this.getValue());
},


onPickerHide: function() {
if (this.destroyPickerOnHide && this.dateTimePicker) {
this.dateTimePicker.destroy();
}
},


setValue: function(value, animated) {
if (this.dateTimePicker) {
this.dateTimePicker.setValue(value, animated);
this.value = (value != null) ? this.dateTimePicker.getValue() : null;
} else {
if (!Ext.isDate(value) && !Ext.isObject(value)) {
value = null;
}

if (Ext.isObject(value)) {
this.value = new Date(value.year, value.month-1, value.day, value.hours, value.minutes);
} else {
this.value = value;
}
}

if (this.rendered) {
this.fieldEl.dom.value = this.getValue(true);
}

return this;
},


getValue: function(format) {
var value = this.value || null;
return (format && Ext.isDate(value)) ? value.format('d/m/Y H:i') : value;
},


onDestroy: function() {
if (this.dateTimePicker) {
this.dateTimePicker.destroy();
}

Ext.form.DateTimePicker.superclass.onDestroy.call(this);
}
});

Ext.reg('datetimepickerfield', Ext.form.DateTimePicker);


Ext.form.DateTimePickerField = Ext.extend(Ext.form.DateTimePicker, {

constructor: function() {
console.warn("Ext.form.DateTimePickerField has been deprecated and will be removed in Sencha Touch 1.0. Please use Ext.form.DateTimePicker instead");
Ext.form.DateTimePickerField.superclass.constructor.apply(this, arguments);
}
});



Please let me know if you find any bugs