add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / field / DatePicker.js

/**\r
 * This is a specialized field which shows a {@link Ext.picker.Date} when tapped. If it has a predefined value,\r
 * or a value is selected in the {@link Ext.picker.Date}, it will be displayed like a normal {@link Ext.field.Text}\r
 * (but not selectable/changable).\r
 *\r
 *     Ext.create('Ext.field.DatePicker', {\r
 *         label: 'Birthday',\r
 *         value: new Date()\r
 *     });\r
 *\r
 * {@link Ext.field.DatePicker} fields are very simple to implement, and have no required configurations.\r
 *\r
 * ## Examples\r
 *\r
 * It can be very useful to set a default {@link #value} configuration on {@link Ext.field.DatePicker} fields. In\r
 * this example, we set the {@link #value} to be the current date. You can also use the {@link #setValue} method to\r
 * update the value at any time.\r
 *\r
 *     @example miniphone preview\r
 *     Ext.create('Ext.form.Panel', {\r
 *         fullscreen: true,\r
 *         items: [\r
 *             {\r
 *                 xtype: 'fieldset',\r
 *                 items: [\r
 *                     {\r
 *                         xtype: 'datepickerfield',\r
 *                         label: 'Birthday',\r
 *                         name: 'birthday',\r
 *                         value: new Date()\r
 *                     }\r
 *                 ]\r
 *             },\r
 *             {\r
 *                 xtype: 'toolbar',\r
 *                 docked: 'bottom',\r
 *                 items: [\r
 *                     { xtype: 'spacer' },\r
 *                     {\r
 *                         text: 'setValue',\r
 *                         handler: function() {\r
 *                             var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0];\r
 *\r
 *                             var randomNumber = function(from, to) {\r
 *                                 return Math.floor(Math.random() * (to - from + 1) + from);\r
 *                             };\r
 *\r
 *                             datePickerField.setValue({\r
 *                                 month: randomNumber(0, 11),\r
 *                                 day  : randomNumber(0, 28),\r
 *                                 year : randomNumber(1980, 2011)\r
 *                             });\r
 *                         }\r
 *                     },\r
 *                     { xtype: 'spacer' }\r
 *                 ]\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 * When you need to retrieve the date from the {@link Ext.field.DatePicker}, you can either use the {@link #getValue} or\r
 * {@link #getFormattedValue} methods:\r
 *\r
 *     @example preview\r
 *     Ext.create('Ext.form.Panel', {\r
 *         fullscreen: true,\r
 *         items: [\r
 *             {\r
 *                 xtype: 'fieldset',\r
 *                 items: [\r
 *                     {\r
 *                         xtype: 'datepickerfield',\r
 *                         label: 'Birthday',\r
 *                         name: 'birthday',\r
 *                         value: new Date()\r
 *                     }\r
 *                 ]\r
 *             },\r
 *             {\r
 *                 xtype: 'toolbar',\r
 *                 docked: 'bottom',\r
 *                 items: [\r
 *                     {\r
 *                         text: 'getValue',\r
 *                         handler: function() {\r
 *                             var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0];\r
 *                             Ext.Msg.alert(null, datePickerField.getValue());\r
 *                         }\r
 *                     },\r
 *                     { xtype: 'spacer' },\r
 *                     {\r
 *                         text: 'getFormattedValue',\r
 *                         handler: function() {\r
 *                             var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0];\r
 *                             Ext.Msg.alert(null, datePickerField.getFormattedValue());\r
 *                         }\r
 *                     }\r
 *                 ]\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 *\r
 */\r
Ext.define('Ext.field.DatePicker', {\r
    extend: 'Ext.field.Picker',\r
    alternateClassName: 'Ext.form.DatePicker',\r
    xtype: 'datepickerfield',\r
    requires: [\r
        'Ext.picker.Date'\r
    ],\r
\r
    /**\r
     * @event change\r
     * Fires when a date is selected\r
     * @param {Ext.field.DatePicker} this\r
     * @param {Date} newDate The new date\r
     * @param {Date} oldDate The old date\r
     */\r
\r
    config: {\r
        ui: 'select',\r
\r
        /**\r
         * @cfg {Object/Ext.picker.Date} picker\r
         * An object that is used when creating the internal {@link Ext.picker.Date} component or a direct instance of {@link Ext.picker.Date}.\r
         * @accessor\r
         */\r
        picker: true,\r
\r
\r
        /**\r
         * @cfg {Object/Date} value\r
         * Default value for the field and the internal {@link Ext.picker.Date} component. Accepts an object of 'year',\r
         * 'month' and 'day' values, all of which should be numbers, or a {@link Date}.\r
         *\r
         * Example: {year: 1989, day: 1, month: 5} = 1st May 1989 or new Date()\r
         * @accessor\r
         */\r
\r
        /**\r
         * @cfg {Boolean} destroyPickerOnHide\r
         * Whether or not to destroy the picker widget on hide. This save memory if it's not used frequently,\r
         * but increase delay time on the next show due to re-instantiation.\r
         * @accessor\r
         */\r
        destroyPickerOnHide: false,\r
\r
        /**\r
         * @cfg {String} [dateFormat=Ext.util.Format.defaultDateFormat] The format to be used when displaying the date in this field.\r
         * Accepts any valid date format. You can view formats over in the {@link Ext.Date} documentation.\r
         */\r
        dateFormat: ''\r
    },\r
\r
    applyValue: function(value, oldValue) {\r
        if (!Ext.isDate(value)) {\r
            if (value) {\r
                value = Ext.Date.parse(value, this.getDateFormat());\r
            } else {\r
                value = null;\r
            }\r
        }\r
\r
        // The same date value may not be the same reference, so compare them by time.\r
        // If we have dates for both, then compare the time. If they're the same we\r
        // don't need to do anything.\r
        if (value && oldValue && value.getTime() === oldValue.getTime()) {\r
            value = undefined;\r
        }\r
\r
        return value;\r
    },\r
\r
    updateValue: function(value, oldValue) {\r
        var me     = this,\r
            picker = me._picker;\r
\r
        if (picker && picker.isPicker) {\r
            picker.setValue(value);\r
        }\r
\r
        // Ext.Date.format expects a Date\r
        if (value !== null) {\r
            me.getComponent().setValue(Ext.Date.format(value, me.getDateFormat()));\r
        } else {\r
            me.getComponent().setValue('');\r
        }\r
\r
        me.fireEvent('change', me, value, oldValue);\r
    },\r
\r
    applyDateFormat: function(dateFormat) {\r
        return dateFormat || Ext.util.Format.defaultDateFormat;\r
    },\r
\r
    /**\r
     * Updates the date format in the field.\r
     * @private\r
     */\r
    updateDateFormat: function(newDateFormat) {\r
        var value = this.getValue();\r
        if (Ext.isDate(value)) {\r
            this.getComponent().setValue(Ext.Date.format(value, newDateFormat));\r
        }\r
    },\r
\r
    /**\r
     * Returns the {@link Date} value of this field.\r
     * If you wanted a formatted date use the {@link #getFormattedValue} method.\r
     * @return {Date} The date selected\r
     *\r
     * @method getValue\r
     */\r
\r
    /**\r
     * Returns the value of the field formatted using the specified format. If it is not specified, it will default to\r
     * {@link #dateFormat} and then {@link Ext.util.Format#defaultDateFormat}.\r
     * @param {String} format The format to be returned.\r
     * @return {String} The formatted date.\r
     */\r
    getFormattedValue: function(format) {\r
        var value = this.getValue();\r
        return Ext.isDate(value) ? Ext.Date.format(value, format || this.getDateFormat()) : '';\r
    },\r
\r
    applyPicker: function(picker, pickerInstance) {\r
        if (pickerInstance && pickerInstance.isPicker) {\r
            picker = pickerInstance.setConfig(picker);\r
        }\r
\r
        return picker;\r
    },\r
\r
    getPicker: function() {\r
        var picker = this._picker,\r
            value = this.getValue();\r
\r
        if (picker && !picker.isPicker) {\r
            picker = Ext.factory(picker, Ext.picker.Date);\r
            if (value !== null) {\r
                picker.setValue(value);\r
            }\r
        }\r
\r
        picker.on({\r
            scope: this,\r
            change: 'onPickerChange',\r
            hide  : 'onPickerHide'\r
        });\r
\r
        this._picker = picker;\r
\r
        return picker;\r
    },\r
\r
    /**\r
     * Called when the picker changes its value.\r
     * @param {Ext.picker.Date} picker The date picker.\r
     * @param {Object} value The new value from the date picker.\r
     * @private\r
     */\r
    onPickerChange: function(picker, value) {\r
        var me = this,\r
            oldValue = me.getValue();\r
\r
        me.setValue(value);\r
        me.fireEvent('select', me, value);\r
    },\r
\r
    /**\r
     * Destroys the picker when it is hidden, if\r
     * {@link Ext.field.DatePicker#destroyPickerOnHide destroyPickerOnHide} is set to `true`.\r
     * @private\r
     */\r
    onPickerHide: function() {\r
        var me     = this,\r
            picker = me.getPicker();\r
\r
        if (me.getDestroyPickerOnHide() && picker) {\r
            picker.destroy();\r
            me._picker = me.getInitialConfig().picker || true;\r
        }\r
    },\r
\r
    reset: function() {\r
        this.setValue(this.originalValue);\r
    },\r
\r
    onFocus: function(e) {\r
        var component = this.getComponent();\r
        this.fireEvent('focus', this, e);\r
\r
        if (Ext.os.is.Android4) {\r
            component.input.dom.focus();\r
        }\r
        component.input.dom.blur();\r
\r
        if (this.getReadOnly()) {\r
            return false;\r
        }\r
\r
        this.isFocused = true;\r
\r
        this.getPicker().show();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    destroy: function() {\r
        var picker = this._picker;\r
\r
        if (picker && picker.isPicker) {\r
            picker.destroy();\r
        }\r
\r
        this.callParent();\r
    }\r
});\r