DateTimePicker.js

Ext.ns('Ext.ux.touch');
Ext.ux.touch.DateTimePicker = Ext.extend(Ext.Picker, {

	/**
	 * @cfg {Number} minuteScale
	 * The distance between minute's timestamps the date time picker.  Defaults to 5
	 */
	minuteScale: 5,
    /**
     * @cfg {Number} yearFrom
     * The start year for the date picker.  Defaults to 1980
     */
    yearFrom: 2011,

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

    /**
     * @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',

	showYears: false,
	
	useShortMonthNames: true,
    /**
     * @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.ux.touch.DateTimePicker} 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: [], //this.showYears ? [, 'year', 'hour', 'minute', 'daynight'] : ['month', 'day', 'hour', 'minute', 'daynight'],

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

        this.slotOrder = [];
		this.slotOrder.push('month', 'day');
		if (this.showYears) {
			this.slotOrder.push('year');
		}

		this.slotOrder.push('hour', 'minute', 'daynight');

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

		if ( this.showYears ) {
        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: this.useShortMonthNames ? Date.monthNames[i].substring(0, 3) : Date.monthNames[i],
                value: i + 1
            });
        }

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

        for (i = 0; i < 60; i += this.minuteScale) {
            minutes.push({
                text: i < 10 ? '0' + i : 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.touch.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: this.showYears ? 4 : 3
            };
        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: this.showYears ? 2 : 3
            };
        }
    },

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

        Ext.ux.touch.DateTimePicker.superclass.onSlotPick.call(this, slot, value);
    },

    /**
     * Gets the current value as a Date object
     * @return {Date} value
     */
    getValue: function() {
        var value = Ext.ux.touch.DateTimePicker.superclass.getValue.call(this),
            daysInMonth = this.getDaysInMonth(value.month, value.year),
            day = Math.min(value.day, daysInMonth),
            hours = value.hour;

        if (hours === 12) {
            hours = 0;
        }
        if (value.daynight === 'PM') {
            hours += 12;
		}
        return new Date(this.showYears ? value.year: new Date().getFullYear(), value.month - 1, day, hours, 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)));
    },

	setToDate: function(now_date) {
		var now_values = {};
        var minutes = now_date.getMinutes();
        var hours = now_date.getHours();
        var day = now_date.getDate();
        var month = now_date.getMonth();
        var year = now_date.getFullYear();

        if ( minutes % this.minuteScale > 0 ) {
            minutes = minutes + ( this.minuteScale - (minutes % this.minuteScale) );
        }
        if ( minutes > 59 ) {
            minutes = 0;
            hours += 1;
        }
        if (hours > 23) {
            hours = 0;
            day += 1;
		}
        if (day > this.getDaysInMonth(month + 1, year)) {
            day = 1;
            month +=1;
        }
        if (month > 11) {
            month = 0;
            year += 1;
        }

        Ext.apply(now_values,{
            minute: minutes,
            hour: hours,
            day: day,
            month: month + 1,
            year: year
        });

		this.setValue(now_values);
	},
	
    setValue: function(values, animated) {
        var slot, items = this.items.items,
            ln = items.length,
            daynightVal = 'AM';

        // Value is an object with keys mapping to slot names
        if (!values) {
            for (var i = 0; i < ln; i++) {
                items[i].setValue(0);
            }
            return this;
        } else if (Ext.isDate(values)){
            this.setToDate(values, animated);
            return;
        }

        var me = this;
        Ext.iterate (values, function(key, value) {
            slot = me.child('[name=' + key + ']');
            if (slot) {
                if (key === 'hour') {
                    if (value >= 12){
                    daynightVal = 'PM';
                }
                    if (value === 0) {
                        value = 12; // 12 AM
                    } else if (value > 12){
                        value -= 12;
            }
        }
                slot.setValue(value, animated);
            }
        });
        slot = this.child('[name=daynight]');
        slot.setValue(daynightVal, animated);
        return this;
    }
});

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

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

	display_format: 'd/m/Y h:i a',
	
    destroyPickerOnHide: false,
    
	init_to_now: true,
	
    initComponent: function() {
        this.addEvents(
            
            'change'
        );

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

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

    
    getDatePicker: function() {
        if (!this.dateTimePicker) {
            if (this.picker instanceof Ext.ux.touch.DateTimePicker) {
                this.dateTimePicker = this.picker;
            } else {
                this.dateTimePicker = new Ext.ux.touch.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.getDatePicker().show();
        if ( this.init_to_now && !this.inited) {
            this.getDatePicker().setToDate(new Date());
            this.inited = true;
		}
    },
    
    
    onPickerChange : function(picker, value) {
        this.setValue(value);
        this.fireEvent('change', this, this.getValue());
    },
    
    
    onPickerHide: function() {
        if (this.destroyPickerOnHide && this.dateTimePicker) {
            this.dateTimePicker.destroy();
        }
    },

    
    setValue: function(value, animated) {
        if (this.dateTimePicker) {
			if ( Ext.isDate(value) ) {
            	this.dateTimePicker.setToDate(value);
			} else {
            	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(!!this.display_format);
        }
        
        return this;
    },
    
    
    getValue: function(format) {
        var value = this.value || null;
        return (format && Ext.isDate(value)) ? value.format(this.display_format) : value;
    },
    
    
    onDestroy: function() {
        if (this.dateTimePicker) {
            this.dateTimePicker.destroy();
        }
        
        Ext.form.DateTimePicker.superclass.onDestroy.call(this);
    }
});

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