add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / calendar / src / form / field / DateRange.js

/**\r
 * @class Ext.form.field.DateRange\r
 * @extends Ext.form.Field\r
 * <p>A combination field that includes start and end dates and times, as well as an optional all-day checkbox.</p>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.form.field.DateRange', {\r
    extend: 'Ext.form.FieldContainer',\r
    alias: 'widget.daterangefield',\r
    \r
    requires: [\r
        'Ext.form.field.Date',\r
        'Ext.form.field.Time',\r
        'Ext.form.Label',\r
        'Ext.form.field.Checkbox',\r
        'Ext.layout.container.Column'\r
    ],\r
    \r
    /**\r
     * @cfg {String} toText\r
     * The text to display in between the date/time fields (defaults to 'to')\r
     */\r
    toText: 'to',\r
    /**\r
     * @cfg {String} allDayText\r
     * The text to display as the label for the all day checkbox (defaults to 'All day')\r
     */\r
    allDayText: 'All day',\r
    /**\r
     * @cfg {String/Boolean} singleLine\r
     * `true` to render the fields all on one line, `false` to break the start date/time and end date/time\r
     * into two stacked rows of fields to preserve horizontal space (defaults to `true`).\r
     */\r
    singleLine: true,\r
    /**\r
     * @cfg {String} dateFormat\r
     * The date display format used by the date fields (defaults to 'n/j/Y') \r
     */\r
    dateFormat: 'n/j/Y',\r
    /**\r
     * @cfg {String} timeFormat\r
     * The time display format used by the time fields. By default the DateRange uses the\r
     * {@link Ext.Date.use24HourTime} setting and sets the format to 'g:i A' for 12-hour time (e.g., 1:30 PM) \r
     * or 'G:i' for 24-hour time (e.g., 13:30). This can also be overridden by a static format string if desired.\r
     */\r
    timeFormat: Ext.Date.use24HourTime ? 'G:i' : 'g:i A',\r
    \r
    // private\r
    fieldLayout: 'hbox',\r
\r
    defaults: {\r
        margin: '0 5 0 0'\r
    },\r
\r
    // private\r
    initComponent: function() {\r
        var me = this;\r
        \r
        me.addCls('ext-dt-range');\r
        \r
        if (me.singleLine) {\r
            me.layout = me.fieldLayout;\r
            me.items = me.getFieldConfigs();\r
        }\r
        else {\r
            me.items = [{\r
                xtype: 'container',\r
                layout: me.fieldLayout,\r
                items: [\r
                    me.getStartDateConfig(),\r
                    me.getStartTimeConfig(),\r
                    me.getDateSeparatorConfig()\r
                ]\r
            },{\r
                xtype: 'container',\r
                layout: me.fieldLayout,\r
                items: [\r
                    me.getEndDateConfig(),\r
                    me.getEndTimeConfig(),\r
                    me.getAllDayConfig()\r
                ]\r
            }];\r
        }\r
        \r
        me.callParent(arguments);\r
        me.initRefs();\r
    },\r
    \r
    initRefs: function() {\r
        var me = this;\r
        me.startDate = me.down('#' + me.id + '-start-date');\r
        me.startTime = me.down('#' + me.id + '-start-time');\r
        me.endTime = me.down('#' + me.id + '-end-time');\r
        me.endDate = me.down('#' + me.id + '-end-date');\r
        me.allDay = me.down('#' + me.id + '-allday');\r
        me.toLabel = me.down('#' + me.id + '-to-label');\r
\r
        me.startDate.validateOnChange = me.endDate.validateOnChange = false;\r
\r
        me.startDate.isValid = me.endDate.isValid = function() {\r
                                    var me = this,\r
                                        valid = Ext.isDate(me.getValue());\r
                                    if (!valid) {\r
                                        me.focus();\r
                                    }\r
                                    return valid;\r
                                 };\r
    },\r
\r
    getFieldConfigs: function() {\r
        var me = this;\r
        return [\r
            me.getStartDateConfig(),\r
            me.getStartTimeConfig(),\r
            me.getDateSeparatorConfig(),\r
            me.getEndTimeConfig(),\r
            me.getEndDateConfig(),\r
            me.getAllDayConfig()\r
        ];\r
    },\r
    \r
    getStartDateConfig: function() {\r
        return {\r
            xtype: 'datefield',\r
            itemId: this.id + '-start-date',\r
            format: this.dateFormat,\r
            width: 100,\r
            listeners: {\r
                'blur': {\r
                    fn: function(){\r
                        this.onFieldChange('date', 'start');\r
                    },\r
                    scope: this\r
                }\r
            }\r
        };\r
    },\r
    \r
    getStartTimeConfig: function() {\r
        return {\r
            xtype: 'timefield',\r
            itemId: this.id + '-start-time',\r
            hidden: this.showTimes === false,\r
            labelWidth: 0,\r
            hideLabel: true,\r
            width: 90,\r
            format: this.timeFormat,\r
            listeners: {\r
                'select': {\r
                    fn: function(){\r
                        this.onFieldChange('time', 'start');\r
                    },\r
                    scope: this\r
                }\r
            }\r
        };\r
    },\r
    \r
    getEndDateConfig: function() {\r
        return {\r
            xtype: 'datefield',\r
            itemId: this.id + '-end-date',\r
            format: this.dateFormat,\r
            hideLabel: true,\r
            width: 100,\r
            listeners: {\r
                'blur': {\r
                    fn: function(){\r
                        this.onFieldChange('date', 'end');\r
                    },\r
                    scope: this\r
                }\r
            }\r
        };\r
    },\r
    \r
    getEndTimeConfig: function() {\r
        return {\r
            xtype: 'timefield',\r
            itemId: this.id + '-end-time',\r
            hidden: this.showTimes === false,\r
            labelWidth: 0,\r
            hideLabel: true,\r
            width: 90,\r
            format: this.timeFormat,\r
            listeners: {\r
                'select': {\r
                    fn: function(){\r
                        this.onFieldChange('time', 'end');\r
                    },\r
                    scope: this\r
                }\r
            }\r
        };\r
    },\r
\r
    getDuration: function() {\r
        var me = this,\r
            start = me.getDT('start'),\r
            end = me.getDT('end');\r
\r
        return end.getTime() - start.getTime();\r
    },\r
    \r
    getAllDayConfig: function() {\r
        return {\r
            xtype: 'checkbox',\r
            itemId: this.id + '-allday',\r
            hidden: this.showTimes === false || this.showAllDay === false,\r
            boxLabel: this.allDayText,\r
            margin: '2 5 0 0',\r
            handler: this.onAllDayChange,\r
            scope: this\r
        };\r
    },\r
    \r
    onAllDayChange: function(chk, checked) {\r
        Ext.suspendLayouts();\r
        this.startTime.setDisabled(checked).setVisible(!checked);\r
        this.endTime.setDisabled(checked).setVisible(!checked);\r
        Ext.resumeLayouts(true);\r
    },\r
    \r
    getDateSeparatorConfig: function() {\r
        return {\r
            xtype: 'label',\r
            itemId: this.id + '-to-label',\r
            text: this.toText,\r
            margin: '4 5 0 0'\r
        };\r
    },\r
    \r
    isSingleLine: function() {\r
        var me = this;\r
        \r
        if (me.calculatedSingleLine === undefined) {\r
            if(me.singleLine == 'auto'){\r
                var ownerCtEl = me.ownerCt.getEl(),\r
                    w = me.ownerCt.getWidth() - ownerCtEl.getPadding('lr'),\r
                    el = ownerCtEl.down('.x-panel-body');\r
                    \r
                if(el){\r
                    w -= el.getPadding('lr');\r
                }\r
                \r
                el = ownerCtEl.down('.x-form-item-label');\r
                if(el){\r
                    w -= el.getWidth() - el.getPadding('lr');\r
                }\r
                me.calculatedSingleLine = w <= me.singleLineMinWidth ? false : true;\r
            }\r
            else {\r
                me.calculatedSingleLine = me.singleLine !== undefined ? me.singleLine : true;\r
            }\r
        }\r
        return me.calculatedSingleLine;\r
    },\r
\r
    // private\r
    onFieldChange: function(type, startend){\r
        this.checkDates(type, startend);\r
        this.fireEvent('change', this, this.getValue());\r
    },\r
        \r
    // private\r
    checkDates: function(type, startend){\r
        var me = this,\r
            startField = me.down('#' + me.id + '-start-' + type),\r
            endField = me.down('#' + me.id + '-end-' + type),\r
            startValue = me.getDT('start'),\r
            endValue = me.getDT('end');\r
\r
        if (!startValue || !endValue) {\r
            return;\r
        }\r
\r
        if(startValue > endValue){\r
            if(startend=='start'){\r
                endField.setValue(startValue);\r
            }else{\r
                startField.setValue(endValue);\r
                me.checkDates(type, 'start');\r
            }\r
        }\r
        if(type=='date'){\r
            me.checkDates('time', startend);\r
        }\r
    },\r
    \r
    /**\r
     * Returns an array containing the following values in order:<div class="mdetail-params"><ul>\r
     * <li><b><code>DateTime</code></b> : <div class="sub-desc">The start date/time</div></li>\r
     * <li><b><code>DateTime</code></b> : <div class="sub-desc">The end date/time</div></li>\r
     * <li><b><code>Boolean</code></b> : <div class="sub-desc">True if the dates are all-day, false \r
     * if the time values should be used</div></li><ul></div>\r
     * @return {Array} The array of return values\r
     */\r
    getValue: function(){\r
        var eDate = Ext.calendar.util.Date,\r
            start = this.getDT('start'),\r
            end = this.getDT('end'),\r
            allDay = this.allDay.getValue();\r
        \r
        if (Ext.isDate(start) && Ext.isDate(end) && start.getTime() !== end.getTime()) {\r
            if (!allDay && eDate.isMidnight(start) && eDate.isMidnight(end)) {\r
                // 12:00am -> 12:00am over n days, all day event\r
                allDay = true;\r
                end = eDate.add(end, {\r
                    days: -1\r
                });\r
            }\r
        }\r
        \r
        return [\r
            start, \r
            end,\r
            allDay\r
        ];\r
    },\r
    \r
    // private getValue helper\r
    getDT: function(startend){\r
        var time = this[startend+'Time'].getValue(),\r
            dt = this[startend+'Date'].getValue();\r
            \r
        if(Ext.isDate(dt)){\r
            dt = Ext.Date.format(dt, this[startend + 'Date'].format);\r
        }\r
        else{\r
            return null;\r
        }\r
        if(time && time !== ''){\r
            time = Ext.Date.format(time, this[startend+'Time'].format);\r
            var val = Ext.Date.parseDate(dt + ' ' + time, this[startend+'Date'].format + ' ' + this[startend+'Time'].format);\r
            return val;\r
            //return Ext.Date.parseDate(dt+' '+time, this[startend+'Date'].format+' '+this[startend+'Time'].format);\r
        }\r
        return Ext.Date.parseDate(dt, this[startend+'Date'].format);\r
        \r
    },\r
    \r
    /**\r
     * Sets the values to use in the date range.\r
     * @param {Array/Date/Object} v The value(s) to set into the field. Valid types are as follows:<div class="mdetail-params"><ul>\r
     * <li><b><code>Array</code></b> : <div class="sub-desc">An array containing, in order, a start date, end date and all-day flag.\r
     * This array should exactly match the return type as specified by {@link #getValue}.</div></li>\r
     * <li><b><code>DateTime</code></b> : <div class="sub-desc">A single Date object, which will be used for both the start and\r
     * end dates in the range.  The all-day flag will be defaulted to false.</div></li>\r
     * <li><b><code>Object</code></b> : <div class="sub-desc">An object containing properties for StartDate, EndDate and IsAllDay\r
     * as defined in {@link Ext.calendar.data.EventMappings}.</div></li><ul></div>\r
     */\r
    setValue: function(v){\r
        if(!v) {\r
            return;\r
        }\r
        if(Ext.isArray(v)){\r
            this.setDT(v[0], 'start');\r
            this.setDT(v[1], 'end');\r
            this.allDay.setValue(!!v[2]);\r
        }\r
        else if(Ext.isDate(v)){\r
            this.setDT(v, 'start');\r
            this.setDT(v, 'end');\r
            this.allDay.setValue(false);\r
        }\r
        else if(v[Ext.calendar.data.EventMappings.StartDate.name]){ //object\r
            this.setDT(v[Ext.calendar.data.EventMappings.StartDate.name], 'start');\r
            if(!this.setDT(v[Ext.calendar.data.EventMappings.EndDate.name], 'end')){\r
                this.setDT(v[Ext.calendar.data.EventMappings.StartDate.name], 'end');\r
            }\r
            this.allDay.setValue(!!v[Ext.calendar.data.EventMappings.IsAllDay.name]);\r
        }\r
    },\r
    \r
    // private setValue helper\r
    setDT: function(dt, startend){\r
        if(dt && Ext.isDate(dt)){\r
            this[startend + 'Date'].setValue(dt);\r
            this[startend + 'Time'].setValue(Ext.Date.format(dt, this[startend + 'Time'].format));\r
            return true;\r
        }\r
    },\r
    \r
    // inherited docs\r
    isDirty: function(){\r
        var dirty = false;\r
        if(this.rendered && !this.disabled) {\r
            this.items.each(function(item){\r
                if (item.isDirty()) {\r
                    dirty = true;\r
                    return false;\r
                }\r
            });\r
        }\r
        return dirty;\r
    },\r
    \r
    // private\r
    onDisable : function(){\r
        this.delegateFn('disable');\r
    },\r
    \r
    // private\r
    onEnable : function(){\r
        this.delegateFn('enable');\r
    },\r
    \r
    // inherited docs\r
    reset : function(){\r
        this.delegateFn('reset');\r
    },\r
    \r
    // private\r
    delegateFn : function(fn){\r
        this.items.each(function(item){\r
            if (item[fn]) {\r
                item[fn]();\r
            }\r
        });\r
    },\r
    \r
    // private\r
    beforeDestroy: function(){\r
        Ext.destroy(this.fieldCt);\r
        this.callParent(arguments);\r
    },\r
    \r
    /**\r
     * @method getRawValue\r
     * @hide\r
     */\r
    getRawValue : Ext.emptyFn,\r
    /**\r
     * @method setRawValue\r
     * @hide\r
     */\r
    setRawValue : Ext.emptyFn\r
});