[控件]unigui移动端下Unidatepicker时间显示解决方案

[控件]unigui移动端下Unidatepicker时间显示解决方案

http://tz10000.com/kong-jian-unigui-yi-dong-duan-xia-unidatepicker-shi-jian-xian-shi-jie-jue-fang-an.html

2017-03-07 • Delphi • 评论关闭 • Aar0n

用unigui搞移动端，需求上需要采用日期，但是默认是不支持时间选择的，怎么办？

只能改造了@~@。

1.下载以下JS文件放到程序files目录下。

https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTime.js
https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTimePicker.js

2.在CustomFiles项目加入如下内容。

files/DateTime.js
files/DateTimePicker.js

3.调整时间格式，如下。

UnimDatePicker1.DateFormat := "dd/MM/yyyy H:i"

4.对控件添加以下事件。

1. UnimDatePicker1 -> ClientEvents -> UniEvents .. beforeInit fn:

function beforeInit(sender, config)
{
    config.picker = Ext.create('Ext.ux.picker.DateTime', {
                    useTitles: false,
                    doneButton: true,
                    cancelButton: true,
                    minuteInterval : 1,
                    //slotOrder: ['month', 'day', 'year','hour','minute'],
                    toolbar: {
                      //items : datetimepickettoolbaritems
                    }                        
                  });
    Ext.Date.patterns={CustomFormat: "d/m/Y H:i"};  // <------------
}

2. UnimDatePicker1 -> ClientEvents -> ExtEvents -> function change:

function change(sender, newDate, oldDate, eOpts)
{
    ajaxRequest(sender, '_dateChange', ['val='+Ext.Date.format(newDate, Ext.Date.patterns.CustomFormat)])
}

3. UnimDatePicker1 -> OnAjaxEvent:

procedure TMainmForm.UnimDatePicker1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
var
  newDateTime : TDateTime;
  Fmt: TFormatSettings;
begin
  if EventName = '_dateChange' then
  begin
    Fmt.ShortDateFormat:='dd/mm/yyyy';
    Fmt.DateSeparator  :='/';
    Fmt.LongTimeFormat :='hh:mm';
    Fmt.TimeSeparator  :=':';
   
    newDateTime := StrToDateTime(Params.Values['val'], Fmt);
    //ShowMessage(DateTimeToStr(newDateTime));
  end;
 
end;

https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTime.js

 
Ext.define('Ext.ux.picker.DateTime', {
    extend: 'Ext.picker.Picker',
    xtype: 'datetimepicker',
    alternateClassName: 'Ext.ux.DateTimePicker',
    requires: ['Ext.DateExtras'],
 
    config: {
        /**
         * @cfg {Number} yearFrom
         * The start year for the date picker.
         * @accessor
         */
        yearFrom: 1980,
 
        /**
         * @cfg {Number} yearTo
         * The last year for the date picker.
         * @default the current year (new Date().getFullYear())
         * @accessor
         */
        yearTo: new Date().getFullYear(),
 
        /**
         * @cfg {String} monthText
         * The label to show for the month column.
         * @accessor
         */
        monthText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'M' : 'Month',
 
        /**
         * @cfg {String} dayText
         * The label to show for the day column.
         * @accessor
         */
        dayText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'j' : 'Day',
 
        /**
         * @cfg {String} yearText
         * The label to show for the year column.
         * @accessor
         */
        yearText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'Y' : 'Year',
 
        /**
        * @cfg {String} hourText
        * The label to show for the hour column. Defaults to 'Hour'.
        */
        hourText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'H' : 'Hour',
 
        /**
         * @cfg {String} minuteText
         * The label to show for the minute column. Defaults to 'Minute'.
         */
        minuteText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'i' : 'Minute',
 
        /**
         * @cfg {String} ampmText
         * The label to show for the ampm column. Defaults to 'AM/PM'.
         */
        ampmText: (Ext.os.deviceType.toLowerCase() == "phone") ? 'A' : 'AM/PM',
 
        /**
         * @cfg {Array} slotOrder
         * An array of strings that specifies the order of the slots.
         * @accessor
         */
        slotOrder: ['month', 'day', 'year','hour','minute','ampm'],
 
        /**
         * @cfg {Int} minuteInterval
         * @accessor
         */
        minuteInterval : 15,
 
        /**
         * @cfg {Boolean} ampm
         * @accessor
         */
        ampm : false,
 
        /**
         * @cfg {Boolean} displayUTC
         * If set to true, displays UTC time in the DatePicker
         * @accessor
         */
        displayUTC: false
    },
 
    initialize: function() {
        this.callParent();
 
        this.on({
            scope: this,
            delegate: '> slot',
            slotpick: this.onSlotPick
        });
    },
 
    setValue: function(value, animated) {
        if (Ext.isDate(value)) {
 
            // See if we should display in UTC
            if (this.getDisplayUTC()) {
                ampm =  'AM';
                currentHours = hour =  value.getUTCHours();
                if(this.getAmpm()){
                    if (currentHours > 12) {
                        ampm = "PM";
                        hour -= 12;
                    } else if(currentHours == 12) {
                        ampm = "PM";
                    } else if(currentHours == 0) {
                        hour = 12;
                    }
                }
                value = {
                    day  : value.getUTCDate(),
                    month: value.getUTCMonth() + 1,
                    year : value.getUTCFullYear(),
                    hour : hour,
                    minute : value.getUTCMinutes(),
                    ampm : ampm
                };
            // Display in local timezone
            } else {
                ampm =  'AM';
                currentHours = hour =  value.getHours();
                if(this.getAmpm()){
                    if (currentHours > 12) {
                        ampm = "PM";
                        hour -= 12;
                    } else if(currentHours == 12) {
                        ampm = "PM";
                    } else if(currentHours == 0) {
                        hour = 12;
                    }
                }
                value = {
                    day  : value.getDate(),
                    month: value.getMonth() + 1,
                    year : value.getFullYear(),
                    hour : hour,
                    minute : value.getMinutes(),
                    ampm : ampm
                };
            }
        }
 
        this.callParent([value, animated]);
    },
 
    getValue: function() {
        var values = {},
            daysInMonth, day, hour, minute,
            items = this.getItems().items,
            ln = items.length,
            item, i;
 
        for (i = 0; i < ln; i++) {
            item = items[i];
            if (item instanceof Ext.picker.Slot) {
                values[item.getName()] = item.getValue(true);
            }
        }
        daysInMonth = this.getDaysInMonth(values.month, values.year);
        day = Math.min(values.day, daysInMonth),hour = values.hour,  minute = values.minute;
 
        var yearval = (isNaN(values.year)) ? new Date().getFullYear() : values.year,
            monthval = (isNaN(values.month)) ? (new Date().getMonth()) : (values.month - 1),
            dayval = (isNaN(day)) ? (new Date().getDate()) : day,
            hourval = (isNaN(hour)) ? new Date().getHours() : hour,
            minuteval = (isNaN(minute)) ? new Date().getMinutes() : minute;
            if(values.ampm && values.ampm == "PM" && hourval<12){
                hourval = hourval + 12;
            }
            if(values.ampm && values.ampm == "AM" && hourval == 12){
                hourval = 0;
            }
 
        // Return the proper values based upon UTC
        if (this.getDisplayUTC()) {
            return new Date(Date.UTC(yearval, monthval, dayval, hourval, minuteval));
        } else {
            return new Date(yearval, monthval, dayval, hourval, minuteval);
        }
    },
 
    /**
     * Updates the yearFrom configuration
     */
    updateYearFrom: function() {
        if (this.initialized) {
            this.createSlots();
        }
    },
 
    /**
     * Updates the yearTo configuration
     */
    updateYearTo: function() {
        if (this.initialized) {
            this.createSlots();
        }
    },
 
    /**
     * Updates the monthText configuration
     */
    updateMonthText: function(newMonthText, oldMonthText) {
        var innerItems = this.getInnerItems,
            ln = innerItems.length,
            item, i;
 
        //loop through each of the current items and set the title on the correct slice
        if (this.initialized) {
            for (i = 0; i < ln; i++) {
                item = innerItems[i];
 
                if ((typeof item.title == "string" && item.title == oldMonthText) || (item.title.html == oldMonthText)) {
                    item.setTitle(newMonthText);
                }
            }
        }
    },
 
    /**
     * Updates the dayText configuraton
     */
    updateDayText: function(newDayText, oldDayText) {
        var innerItems = this.getInnerItems,
            ln = innerItems.length,
            item, i;
 
        //loop through each of the current items and set the title on the correct slice
        if (this.initialized) {
            for (i = 0; i < ln; i++) {
                item = innerItems[i];
 
                if ((typeof item.title == "string" && item.title == oldDayText) || (item.title.html == oldDayText)) {
                    item.setTitle(newDayText);
                }
            }
        }
    },
 
    /**
     * Updates the yearText configuration
     */
    updateYearText: function(yearText) {
        var innerItems = this.getInnerItems,
            ln = innerItems.length,
            item, i;
 
        //loop through each of the current items and set the title on the correct slice
        if (this.initialized) {
            for (i = 0; i < ln; i++) {
                item = innerItems[i];
 
                if (item.title == this.yearText) {
                    item.setTitle(yearText);
                }
            }
        }
    },
 
    // @private
    constructor: function() {
        this.callParent(arguments);
        this.createSlots();
    },
 
    /**
     * Generates all slots for all years specified by this component, and then sets them on the component
     * @private
     */
    createSlots: function() {
        var me        = this,
            slotOrder = this.getSlotOrder(),
            yearsFrom = me.getYearFrom(),
            yearsTo   = me.getYearTo(),
            years     = [],
            days      = [],
            months    = [],
            hours = [],
            minutes = [],
            ampm= [],
            ln, tmp, i,
            daysInMonth;
 
        if(!this.getAmpm()){
            var index = slotOrder.indexOf('ampm');
            if(index >= 0){
                slotOrder.splice(index);
            }
        }
        // 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 = Ext.Date.monthNames.length; i < ln; i++) {
            months.push({
                text: (Ext.os.deviceType.toLowerCase() == "phone") ? Ext.Date.monthNames[i].substring(0,3) : Ext.Date.monthNames[i],
                value: i + 1
            });
        }
 
        var hourLimit =  (this.getAmpm()) ? 12 : 23;
        var hourStart =  (this.getAmpm()) ? 1 : 0;
        for(i=hourStart;i<=hourLimit;i++){
            hours.push({
                text: this.pad2(i),
                value: i
            });
        }
 
        for(i=0;i<60;i+=this.getMinuteInterval()){
            minutes.push({
                text: this.pad2(i),
                value: i
            });
        }
 
        ampm.push({
            text: 'AM',
            value: 'AM'
        },{
            text: 'PM',
            value: 'PM'
        });
 
        var slots = [];
 
        slotOrder.forEach(function(item) {
            slots.push(this.createSlot(item, days, months, years,hours,minutes,ampm));
        }, this);
 
        me.setSlots(slots);
    },
 
    /**
     * Returns a slot config for a specified date.
     * @private
     */
    createSlot: function(name, days, months, years,hours,minutes,ampm) {
        var isPhone = (Ext.os.deviceType.toLowerCase() == "phone"),
            align = (isPhone) ? 'left' : 'center';
 
        switch (name) {
            case 'year':
                return {
                    name: 'year',
                    align: align,
                    data: years,
                    title: this.getYearText(),
                    flex: isPhone ? 1.3 : 3
                };
            case 'month':
                return {
                    name: name,
                    align: isPhone ? 'left' : 'right',
                    data: months,
                    title: this.getMonthText(),
                    flex: isPhone ? 1.2 : 4
                };
            case 'day':
                return {
                    name: 'day',
                    align: align,
                    data: days,
                    title: this.getDayText(),
                    flex: isPhone ? 0.9 : 2
                };
            case 'hour':
                return {
                    name: 'hour',
                    align: align,
                    data: hours,
                    title: this.getHourText(),
                    flex: isPhone ? 0.9 : 2
                };
            case 'minute':
                return {
                    name: 'minute',
                    align: align,
                    data: minutes,
                    title: this.getMinuteText(),
                    flex: isPhone ? 0.9 : 2
                };
            case 'ampm':
                return {
                    name: 'ampm',
                    align: align,
                    data: ampm,
                    title: this.getAmpmText(),
                    flex: isPhone ? 1.1 : 2
                };
        }
    },
 
   onSlotPick: function(pickedSlot, oldValue, htmlNode, eOpts) {
 
        // We don't actually get passed the new value. I think this is an ST2 bug. Instead we get passed the slot,
        // the oldValue, the node in the slot which was moved to, and options for the event.
        //
        // However looking at the code that fires the slotpick event, the slot.selectedIndex is always set there
        // We can therefore use this to pull the underlying value that was picked out of the slot's store
        var pickedValue = pickedSlot.getStore().getAt(pickedSlot.selectedIndex).get(pickedSlot.getValueField());
 
        pickedSlot.setValue(pickedValue);
 
        if(pickedSlot.getName() === 'month' || pickedSlot.getName() === 'year') {
            this.repopulateDaySlot();
        }
    },
 
    repopulateDaySlot: function() {
        var slot = this.getDaySlot(),
            days = [],
            month = this.getSlotByName('month').getValue(),
            year = this.getSlotByName('year').getValue(),
            daysInMonth;
 
        // Get the new days of the month for this new date
        daysInMonth = this.getDaysInMonth(month, year);
 
        for (var i = 0; i < daysInMonth; i++) {
            days.push({
                text: i + 1,
                value: i + 1
            });
        }
 
        // We dont need to update the slot days unless it has changed
        if (slot.getData().length == days.length) {
            return;
        }
 
        slot.setData(days);
    },
 
    getSlotByName: function(name) {
        return this.down('pickerslot[name=' + name + ']');
    },
 
    getDaySlot: function() {
        return this.getSlotByName('day');
    },
 
    // @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)));
    },
    pad2 : function(number) {
     return (number < 10 ? '0' : '') + number ;
    }
});

https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTimePicker.js

/**
 * @aside guide forms
 *
 * This is a specialized field which shows a {@link Ext.ux.picker.DateTime} when tapped. If it has a predefined value,
 * or a value is selected in the {@link Ext.ux.picker.DateTime}, it will be displayed like a normal {@link Ext.field.Text}
 * (but not selectable/changable).
 *
 *     Ext.create('Ext.ux.field.DateTimePicker', {
 *         label: 'Birthday',
 *         value: new Date()
 *     });
 *
 * {@link Ext.ux.field.DateTimePicker} fields are very simple to implement, and have no required configurations.
 *
 * ## Examples
 *
 * It can be very useful to set a default {@link #value} configuration on {@link Ext.ux.field.DateTimePicker} fields. In
 * this example, we set the {@link #value} to be the current date. You can also use the {@link #setValue} method to
 * update the value at any time.
 *
 *     @example miniphone preview
 *     Ext.create('Ext.form.Panel', {
 *         fullscreen: true,
 *         items: [
 *             {
 *                 xtype: 'fieldset',
 *                 items: [
 *                     {
 *                         xtype: 'datetimepickerfield',
 *                         label: 'Birthday',
 *                         name: 'birthday',
 *                         value: new Date()
 *                     }
 *                 ]
 *             },
 *             {
 *                 xtype: 'toolbar',
 *                 docked: 'bottom',
 *                 items: [
 *                     { xtype: 'spacer' },
 *                     {
 *                         text: 'setValue',
 *                         handler: function() {
 *                             var datetimepickerfield = Ext.ComponentQuery.query('datetimepickerfield')[0];
 *
 *                             var randomNumber = function(from, to) {
 *                                 return Math.floor(Math.random() * (to - from + 1) + from);
 *                             };
 *
 *                             datetimepickerfield.setValue({
 *                                 month: randomNumber(0, 11),
 *                                 day  : randomNumber(0, 28),
 *                                 year : randomNumber(1980, 2011)
 *                             });
 *                         }
 *                     },
 *                     { xtype: 'spacer' }
 *                 ]
 *             }
 *         ]
 *     });
 *
 * When you need to retrieve the date from the {@link Ext.ux.field.DateTimePicker}, you can either use the {@link #getValue} or
 * {@link #getFormattedValue} methods:
 *
 *     @example preview
 *     Ext.create('Ext.form.Panel', {
 *         fullscreen: true,
 *         items: [
 *             {
 *                 xtype: 'fieldset',
 *                 items: [
 *                     {
 *                         xtype: 'datetimepickerfield',
 *                         label: 'Birthday',
 *                         name: 'birthday',
 *                         value: new Date()
 *                     }
 *                 ]
 *             },
 *             {
 *                 xtype: 'toolbar',
 *                 docked: 'bottom',
 *                 items: [
 *                     {
 *                         text: 'getValue',
 *                         handler: function() {
 *                             var datetimepickerfield = Ext.ComponentQuery.query('datetimepickerfield')[0];
 *                             Ext.Msg.alert(null, datetimepickerfield.getValue());
 *                         }
 *                     },
 *                     { xtype: 'spacer' },
 *                     {
 *                         text: 'getFormattedValue',
 *                         handler: function() {
 *                             var datetimepickerfield = Ext.ComponentQuery.query('datetimepickerfield')[0];
 *                             Ext.Msg.alert(null, datetimepickerfield.getFormattedValue());
 *                         }
 *                     }
 *                 ]
 *             }
 *         ]
 *     });
 *
 *
 */
 
Ext.define('Ext.ux.field.DateTimePicker', {
    extend: 'Ext.field.Text',
    alternateClassName: 'Ext.form.DateTimePicker',
    xtype: 'datetimepickerfield',
    requires: [
        'Ext.ux.picker.DateTime',
        'Ext.DateExtras'
    ],
 
    /**
     * @event change
     * Fires when a date is selected
     * @param {Ext.ux.field.DateTimePicker} this
     * @param {Date} date The new date
     */
 
    config: {
        ui: 'select',
 
        /**
         * @cfg {Object/Ext.ux.picker.DateTime} picker
         * An object that is used when creating the internal {@link Ext.ux.picker.DateTime} component or a direct instance of {@link Ext.ux.picker.DateTime}
         * Defaults to true
         * @accessor
         */
        picker: true,
 
        /**
         * @cfg {Boolean}
         * @hide
         * @accessor
         */
        clearIcon: false,
 
        /**
         * @cfg {Object/Date} value
         * Default value for the field and the internal {@link Ext.ux.picker.DateTime} component. Accepts an object of 'year',
         * 'month' and 'day' values, all of which should be numbers, or a {@link Date}.
         *
         * Example: {year: 1989, day: 1, month: 5} = 1st May 1989 or new Date()
         * @accessor
         */
 
        /**
         * @cfg {Boolean} destroyPickerOnHide
         * Whether or not to destroy the picker widget on hide. This save memory if it's not used frequently,
         * but increase delay time on the next show due to re-instantiation. Defaults to false
         * @accessor
         */
        destroyPickerOnHide: false,
 
        /**
         * @cfg {String} dateTimeFormat The format to be used when displaying the date in this field.
         * Accepts any valid datetime format. You can view formats over in the {@link Ext.Date} documentation.
         * Defaults to `Ext.util.Format.defaultDateFormat`.
         */
        dateTimeFormat: 'm/d/Y h:i:A',
        /**
         * @cfg {Object}
         * @hide
         */
        component: {
            useMask: true
        }
    },
 
    initialize: function() {
        this.callParent();
 
        this.getComponent().on({
            scope: this,
 
            masktap: 'onMaskTap'
        });
 
        this.getComponent().input.dom.disabled = true;
    },
 
    syncEmptyCls: Ext.emptyFn,
 
    applyValue: function(value) {
        if (!Ext.isDate(value) && !Ext.isObject(value)) {
            value = null;
        }
 
        if (Ext.isObject(value)) {
            value = new Date(value.year, value.month - 1, value.day,value.hour,value.minute);
        }
 
        return value;
    },
 
    updateValue: function(newValue) {
        var picker = this._picker;
        if (picker && picker.isPicker) {
            picker.setValue(newValue);
        }
 
        // Ext.Date.format expects a Date
        if (newValue !== null) {
            this.getComponent().setValue(Ext.Date.format(newValue, this.getDateTimeFormat() || Ext.util.Format.defaultDateFormat));
        } else {
            this.getComponent().setValue('');
        }
 
        if (this._picker && this._picker instanceof Ext.ux.picker.DateTime) {
            this._picker.setValue(newValue);
        }
    },
 
    /**
     * Updates the date format in the field.
     * @private
     */
    updateDateFormat: function(newDateFormat, oldDateFormat) {
        var value = this.getValue();
        if (newDateFormat != oldDateFormat && Ext.isDate(value) && this._picker && this._picker instanceof Ext.ux.picker.DateTime) {
            this.getComponent().setValue(Ext.Date.format(value, newDateFormat || Ext.util.Format.defaultDateFormat));
        }
    },
 
    /**
     * Returns the {@link Date} value of this field.
     * If you wanted a formated date
     * @return {Date} The date selected
     */
    getValue: function() {
        if (this._picker && this._picker instanceof Ext.ux.picker.DateTime) {
            return this._picker.getValue();
        }
 
        return this._value;
    },
 
    /**
     * Returns the value of the field formatted using the specified format. If it is not specified, it will default to
     * {@link #dateFormat} and then {@link Ext.util.Format#defaultDateFormat}.
     * @param {String} format The format to be returned
     * @return {String} The formatted date
     */
    getFormattedValue: function(format) {
        var value = this.getValue();
        console.log(this.getDateTimeFormat(),"format");
        return (Ext.isDate(value)) ? Ext.Date.format(value, format || this.getDateTimeFormat() || Ext.util.Format.defaultDateFormat) : value;
    },
 
    applyPicker: function(picker, pickerInstance) {
        if (pickerInstance && pickerInstance.isPicker) {
            picker = pickerInstance.setConfig(picker);
        }
 
        return picker;
    },
 
    getPicker: function() {
        var picker = this._picker,
            value = this.getValue();
 
        if (picker && !picker.isPicker) {
            picker = Ext.factory(picker, Ext.ux.picker.DateTime);
            picker.on({
                scope: this,
                cancel: 'onPickerCancel',
                change: 'onPickerChange',
                hide  : 'onPickerHide'
            });
 
            if (value !== null) {
                picker.setValue(value);
            }
 
            Ext.Viewport.add(picker);
            this._picker = picker;
        }
 
        return picker;
    },
 
    /**
     * @private
     * Listener to the tap event of the mask element. Shows the internal DatePicker component when the button has been tapped.
     */
    onMaskTap: function(e) {
        if (this.getDisabled()) {
            return false;
        }
 
        if (this.getReadOnly()) {
            return false;
        }
 
        // Make sure to fire the focus event
        this.fireEvent('focus', this, e);
 
        this.getPicker().show();
 
        return false;
    },
 
    /**
     * @private
     * Revert internal date so field won't appear changed
     */
    onPickerCancel: function(picker, options) {
        if (this.getDestroyPickerOnHide() && picker) {
            this._picker = this._picker.config;
            picker.destroy();
        }
        return true;
    },
 
    /**
     * Called when the picker changes its value
     * @param {Ext.ux.picker.DateTime} picker The date picker
     * @param {Object} value The new value from the date picker
     * @private
     */
    onPickerChange: function(picker, value) {
        var me = this;
 
        me.setValue(value);
        me.fireEvent('change', me, me.getValue());
    },
 
    /**
     * Destroys the picker when it is hidden, if
     * {@link Ext.ux.field.DateTimePicker#destroyPickerOnHide destroyPickerOnHide} is set to true
     * @private
     */
    onPickerHide: function() {
        var picker = this.getPicker();
        if (this.getDestroyPickerOnHide() && picker) {
            picker.destroy();
            this._picker = true;
        }
    },
 
    reset: function() {
        this.setValue(this.originalValue);
    },
 
    // @private
    destroy: function() {
        var picker = this.getPicker();
 
        if (picker && picker.isPicker) {
            picker.destroy();
        }
 
        this.callParent(arguments);
    }
    //<deprecated product=touch since=2.0>
}, function() {
    this.override({
        getValue: function(format) {
            if (format) {
                //<debug warn>
                Ext.Logger.deprecate("format argument of the getValue method is deprecated, please use getFormattedValue instead", this);
                //</debug>
                return this.getFormattedValue(format);
            }
            return this.callOverridden();
        }
    });
 
    /**
     * @method getDatePicker
     * @inheritdoc Ext.ux.field.DateTimePicker#getPicker
     * @deprecated 2.0.0 Please use #getPicker instead
     */
    Ext.deprecateMethod(this, 'getDatePicker', 'getPicker');
    //</deprecated>
});