DateTimePicker example out there?

[profunctional]

I used to have a datetimepicker but after upgrading to .97 everything broke. Anyone have a working example?

Here is what USED to work.


custom.controls.DateTimePicker = Ext.extend(Ext.DatePicker, {
initComponent: function() {
var yearsFrom = this.yearFrom;
var yearsTo = this.yearTo;
var years = [];

// swap values if user mixes them up.
if (yearsFrom > yearsTo) {
var tmp = yearsFrom;
yearsFrom = yearsTo;
yearsTo = tmp;
}

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

var daysInMonth;
if (this.value) {
daysInMonth = this.getDaysInMonth(this.value.month, this.value.year);
} else {
daysInMonth = this.getDaysInMonth(0, new Date().getFullYear());
}

var days = [];
for (i = 0; i < daysInMonth; i++) {
days.push({
key: i+1,
value: i+1
});
}

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

var hours = [
{key: '1am', value: 1},
{key: '2am', value: 2},
{key: '3am', value: 3},
{key: '4am', value: 4},
{key: '5am', value: 5},
{key: '6am', value: 6},
{key: '7am', value: 7},
{key: '8am', value: 8},
{key: '9am', value: 9},
{key: '10am', value: 10},
{key: '11am', value: 11},
{key: '12pm', value: 12},
{key: '1pm', value: 13},
{key: '2pm', value: 14},
{key: '3pm', value: 15},
{key: '4pm', value: 16},
{key: '5pm', value: 17},
{key: '6pm', value: 18},
{key: '7pm', value: 19},
{key: '8pm', value: 20},
{key: '9pm', value: 21},
{key: '10pm', value: 22},
{key: '11pm', value: 23},
{key: '12am', value: 0}
];
var minutes = [
{key: '00', value: 00},
{key: '05', value: 05},
{key: '10', value: 10},
{key: '15', value: 15},
{key: '20', value: 20},
{key: '25', value: 25},
{key: '30', value: 30},
{key: '35', value: 35},
{key: '40', value: 40},
{key: '45', value: 45},
{key: '50', value: 50},
{key: '55', value: 55}
];


this.slots = [{
text: 'Month',
name: 'month',
align: 'left',
items: months
},{
text: 'Day',
name: 'day',
align: 'center',
items: days
},{
text: 'Year',
name: 'year',
align: 'right',
items: years
},{
text: 'Hour',
name: 'hour',
align: 'left',
items: hours
}, {
text: 'Minute',
name: 'minute',
align: 'left',
items: minutes
}

];

Ext.DatePicker.superclass.initComponent.call(this);
this.on('pick', this.onPick, this);
},

getValue: function() {
var v = Ext.DatePicker.superclass.getValue.call(this),
day,
daysInMonth = this.getDaysInMonth(v.month, v.year);

if (v.day !== "") {
day = Math.min(v.day, daysInMonth);
} else {
day = daysInMonth;
var dv = this.items.itemAt(1),
idx = dv.store.find(this.valueField, daysInMonth),
r = dv.store.getAt(idx),
n = dv.getNode(r);
this.scrollToNode(dv, n);
}
return new Date(v.year, v.month, day, v.hour, v.minute);
}
});

[blessan]

Heres one i made. I extended from the Picker. I just cant get it to work by extending from Datepicker. Well here my extension.



Ext.ux.DateTimePicker = Ext.extend(Ext.Picker, {
/**
* @cfg {Number} yearFrom
* The start year for the date picker. Defaults to 1980
*/
yearFrom: 1980,

/**
* @cfg {Number} yearTo
* The last year for the date picker. Defaults to the current year.
*/
yearTo: new Date().getFullYear(),

/**
* @cfg {String} monthText
* The label to show for the month column. Defaults to 'Month'.
*/
monthText: 'Month',

/**
* @cfg {String} dayText
* The label to show for the day column. Defaults to 'Day'.
*/
dayText: 'Day',

/**
* @cfg {String} yearText
* The label to show for the year column. Defaults to 'Year'.
*/
yearText: 'Year',

/**
* @cfg {String} hourText
* The label to show for the hour column. Defaults to 'Hour'.
*/
hourText: 'Hour',

/**
* @cfg {String} minuteText
* The label to show for the minute column. Defaults to 'Minute'.
*/
minuteText: 'Minute',

/**
* @cfg {String} daynightText
* The label to show for the daynight column. Defaults to 'AM/PM'.
*/
daynightText: 'AM/PM',

/**
* @cfg {Object/Date} value
* Default value for the field and the internal {@link Ext.DatePicker} component. Accepts an object of 'year',
* 'month' and 'day' values, all of which should be numbers, or a {@link Date}.
*
* Examples:
* {year: 1989, day: 1, month: 5} = 1st May 1989.
* new Date() = current date
*/

/**
* @cfg {Array} slotOrder
* An array of strings that specifies the order of the slots. Defaults to <tt>['month', 'day', 'year']</tt>.
*/
slotOrder: ['month', 'day', 'year','hour','minute','daynight'],

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

// swap values if user mixes them up.
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=1;i<=12;i++){
hours.push({
text: i,
value: i
});
}

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

daynight.push({
text: 'AM',
value: 'AM'
},{
text: 'PM',
value: 'PM'
});

this.slots = [];
Ext.each(this.slotOrder, function(item){
this.slots.push(this.createSlot(item, days, months, years,hours,minutes,daynight));
}, this);

// We need to check if the value is a Date or an object
// TODO add support for a string?
if (this.value) {
var value = this.value;

if (Ext.isDate(value)) {
this.value = {
day : value.getDay(),
year: value.getFullYear(),
month: value.getMonth() + 1
};
} else if (Ext.isObject(value)) {
this.value = value;
};
}
Ext.ux.DateTimePicker.superclass.initComponent.call(this);
},

createSlot: function(name, days, months, years,hours,minutes,daynight){
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: 'hour',
align: 'center',
data: hours,
title: this.useTitles ? this.hourText : false,
flex: 2
};
case 'minute':
return {
name: 'minute',
align: 'center',
data: minutes,
title: this.useTitles ? this.minuteText : false,
flex: 2
};
case 'daynight':
return {
name: 'daynight',
align: 'center',
data: daynight,
title: this.useTitles ? this.daynightText : false,
flex: 2
};
}
},

// @private
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.updateBounds(true);
}

Ext.DatePicker.superclass.onSlotPick.call(this, slot, value);
},

/**
* Gets the current value as a Date object
* @return {Date} value
*/
getValue: function() {
var value = Ext.DatePicker.superclass.getValue.call(this),
daysInMonth = this.getDaysInMonth(value.month, value.year),
day = Math.min(value.day, daysInMonth);
if(value.daynight === 'PM'){
value.hour+=12;
}
return new Date(value.year, value.month-1, day,value.hour,value.minute);
},

// @private
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];
},

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

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