/*! * Ext JS Library 3.3.1 * Copyright(c) 2006-2010 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ /** * @class Ext.calendar.DateRangeField * @extends Ext.form.Field *A combination field that includes start and end dates and times, as well as an optional all-day checkbox.
* @constructor * @param {Object} config The config object */ Ext.calendar.DateRangeField = Ext.extend(Ext.form.Field, { /** * @cfg {String} toText * The text to display in between the date/time fields (defaults to 'to') */ toText: 'to', /** * @cfg {String} toText * The text to display as the label for the all day checkbox (defaults to 'All day') */ allDayText: 'All day', // private onRender: function(ct, position) { if (!this.el) { this.startDate = new Ext.form.DateField({ id: this.id + '-start-date', format: 'n/j/Y', width: 100, listeners: { 'change': { fn: function() { this.checkDates('date', 'start'); }, scope: this } } }); this.startTime = new Ext.form.TimeField({ id: this.id + '-start-time', hidden: this.showTimes === false, labelWidth: 0, hideLabel: true, width: 90, listeners: { 'select': { fn: function() { this.checkDates('time', 'start'); }, scope: this } } }); this.endTime = new Ext.form.TimeField({ id: this.id + '-end-time', hidden: this.showTimes === false, labelWidth: 0, hideLabel: true, width: 90, listeners: { 'select': { fn: function() { this.checkDates('time', 'end'); }, scope: this } } }); this.endDate = new Ext.form.DateField({ id: this.id + '-end-date', format: 'n/j/Y', hideLabel: true, width: 100, listeners: { 'change': { fn: function() { this.checkDates('date', 'end'); }, scope: this } } }); this.allDay = new Ext.form.Checkbox({ id: this.id + '-allday', hidden: this.showTimes === false || this.showAllDay === false, boxLabel: this.allDayText, handler: function(chk, checked) { this.startTime.setVisible(!checked); this.endTime.setVisible(!checked); }, scope: this }); this.toLabel = new Ext.form.Label({ xtype: 'label', id: this.id + '-to-label', text: this.toText }); this.fieldCt = new Ext.Container({ autoEl: { id: this.id }, //make sure the container el has the field's id cls: 'ext-dt-range', renderTo: ct, layout: 'table', layoutConfig: { columns: 6 }, defaults: { hideParent: true }, items: [ this.startDate, this.startTime, this.toLabel, this.endTime, this.endDate, this.allDay ] }); this.fieldCt.ownerCt = this; this.el = this.fieldCt.getEl(); this.items = new Ext.util.MixedCollection(); this.items.addAll([this.startDate, this.endDate, this.toLabel, this.startTime, this.endTime, this.allDay]); } Ext.calendar.DateRangeField.superclass.onRender.call(this, ct, position); }, // private checkDates: function(type, startend) { var startField = Ext.getCmp(this.id + '-start-' + type), endField = Ext.getCmp(this.id + '-end-' + type), startValue = this.getDT('start'), endValue = this.getDT('end'); if (startValue > endValue) { if (startend == 'start') { endField.setValue(startValue); } else { startField.setValue(endValue); this.checkDates(type, 'start'); } } if (type == 'date') { this.checkDates('time', startend); } }, /** * Returns an array containing the following values in order:* @return {Array} The array of return values */ getValue: function() { return [ this.getDT('start'), this.getDT('end'), this.allDay.getValue() ]; }, // private getValue helper getDT: function(startend) { var time = this[startend + 'Time'].getValue(), dt = this[startend + 'Date'].getValue(); if (Ext.isDate(dt)) { dt = dt.format(this[startend + 'Date'].format); } else { return null; }; if (time != '' && this[startend + 'Time'].isVisible()) { return Date.parseDate(dt + ' ' + time, this[startend + 'Date'].format + ' ' + this[startend + 'Time'].format); } return Date.parseDate(dt, this[startend + 'Date'].format); }, /** * Sets the values to use in the date range. * @param {Array/Date/Object} v The value(s) to set into the field. Valid types are as follows:*
- *
DateTime:The start date/time- *
DateTime:The end date/timeBoolean:True if the dates are all-day, false * if the time values should be used*/ setValue: function(v) { if (Ext.isArray(v)) { this.setDT(v[0], 'start'); this.setDT(v[1], 'end'); this.allDay.setValue( !! v[2]); } else if (Ext.isDate(v)) { this.setDT(v, 'start'); this.setDT(v, 'end'); this.allDay.setValue(false); } else if (v[Ext.calendar.EventMappings.StartDate.name]) { //object this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'start'); if (!this.setDT(v[Ext.calendar.EventMappings.EndDate.name], 'end')) { this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'end'); } this.allDay.setValue( !! v[Ext.calendar.EventMappings.IsAllDay.name]); } }, // private setValue helper setDT: function(dt, startend) { if (dt && Ext.isDate(dt)) { this[startend + 'Date'].setValue(dt); this[startend + 'Time'].setValue(dt.format(this[startend + 'Time'].format)); return true; } }, // inherited docs isDirty: function() { var dirty = false; if (this.rendered && !this.disabled) { this.items.each(function(item) { if (item.isDirty()) { dirty = true; return false; } }); } return dirty; }, // private onDisable: function() { this.delegateFn('disable'); }, // private onEnable: function() { this.delegateFn('enable'); }, // inherited docs reset: function() { this.delegateFn('reset'); }, // private delegateFn: function(fn) { this.items.each(function(item) { if (item[fn]) { item[fn](); } }); }, // private beforeDestroy: function() { Ext.destroy(this.fieldCt); Ext.calendar.DateRangeField.superclass.beforeDestroy.call(this); }, /** * @method getRawValue * @hide */ getRawValue: Ext.emptyFn, /** * @method setRawValue * @hide */ setRawValue: Ext.emptyFn }); Ext.reg('daterangefield', Ext.calendar.DateRangeField);*
- *
Array:An array containing, in order, a start date, end date and all-day flag. * This array should exactly match the return type as specified by {@link #getValue}.- *
DateTime:A single Date object, which will be used for both the start and * end dates in the range. The all-day flag will be defaulted to false.Object:An object containing properties for StartDate, EndDate and IsAllDay * as defined in {@link Ext.calendar.EventMappings}.