/** * @class Ext.picker.Time * @extends Ext.view.BoundList *

A time picker which provides a list of times from which to choose. This is used by the * {@link Ext.form.Time} class to allow browsing and selection of valid times, but could also be used * with other components.

*

By default, all times starting at midnight and incrementing every 15 minutes will be presented. * This list of available times can be controlled using the {@link #minValue}, {@link #maxValue}, and * {@link #increment} configuration properties. The format of the times presented in the list can be * customized with the {@link #format} config.

*

To handle when the user selects a time from the list, you can subscribe to the {@link #selectionchange} * event.

* * @constructor * Create a new TimePicker * @param {Object} config The config object * * @xtype timepicker */ Ext.define('Ext.picker.Time', { extend: 'Ext.view.BoundList', alias: 'widget.timepicker', requires: ['Ext.data.Store', 'Ext.util.Date'],
/** * @cfg {Date} minValue * The minimum time to be shown in the list of times. This must be a Date object (only the time fields * will be used); no parsing of String values will be done. Defaults to undefined. */
/** * @cfg {Date} maxValue * The maximum time to be shown in the list of times. This must be a Date object (only the time fields * will be used); no parsing of String values will be done. Defaults to undefined. */
/** * @cfg {Number} increment * The number of minutes between each time value in the list (defaults to 15). */ increment: 15,
/** * @cfg {String} format * The default time format string which can be overriden for localization support. The format must be * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time * format try 'H:i' instead. */ format : "g:i A",
/** * @hide * The field in the implicitly-generated Model objects that gets displayed in the list. This is * an internal field name only and is not useful to change via config. */ displayField: 'disp', /** * @private * Year, month, and day that all times will be normalized into internally. */ initDate: [2008,1,1], componentCls: Ext.baseCSSPrefix + 'timepicker',
/** * @hide */ loadingText: '', initComponent: function() { var me = this, dateUtil = Ext.Date, clearTime = dateUtil.clearTime, initDate = me.initDate.join('/'); // Set up absolute min and max for the entire day me.absMin = clearTime(new Date(initDate)); me.absMax = dateUtil.add(clearTime(new Date(initDate)), 'mi', (24 * 60) - 1); me.store = me.createStore(); me.updateList(); Ext.picker.Time.superclass.initComponent.call(me); },
/** * Set the {@link #minValue} and update the list of available times. This must be a Date * object (only the time fields will be used); no parsing of String values will be done. * @param {Date} value */ setMinValue: function(value) { this.minValue = value; this.updateList(); },
/** * Set the {@link #maxValue} and update the list of available times. This must be a Date * object (only the time fields will be used); no parsing of String values will be done. * @param {Date} value */ setMaxValue: function(value) { this.maxValue = value; this.updateList(); }, /** * @private * Sets the year/month/day of the given Date object to the {@link #initDate}, so that only * the time fields are significant. This makes values suitable for time comparison. * @param {Date} date */ normalizeDate: function(date) { var initDate = this.initDate; date.setFullYear(initDate[0], initDate[1] - 1, initDate[2]); return date; },
/** * Update the list of available times in the list to be constrained within the * {@link #minValue} and {@link #maxValue}. */ updateList: function() { var me = this, min = me.normalizeDate(me.minValue || me.absMin), max = me.normalizeDate(me.maxValue || me.absMax); me.store.filterBy(function(record) { var date = record.get('date'); return date >= min && date <= max; }); }, /** * @private * Creates the internal {@link Ext.data.Store} that contains the available times. The store * is loaded with all possible times, and it is later filtered to hide those times outside * the minValue/maxValue. */ createStore: function() { var me = this, utilDate = Ext.Date, times = [], min = me.absMin, max = me.absMax; while(min <= max){ times.push({ disp: utilDate.dateFormat(min, me.format), date: min }); min = utilDate.add(min, 'mi', me.increment); } return new Ext.data.Store({ fields: ['disp', 'date'], data: times }); } });