src/picker/Time.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.picker.Time
  17  * @extends Ext.view.BoundList
  18  * <p>A time picker which provides a list of times from which to choose. This is used by the
  19  * {@link Ext.form.field.Time} class to allow browsing and selection of valid times, but could also be used
  20  * with other components.</p>
  21  * <p>By default, all times starting at midnight and incrementing every 15 minutes will be presented.
  22  * This list of available times can be controlled using the {@link #minValue}, {@link #maxValue}, and
  23  * {@link #increment} configuration properties. The format of the times presented in the list can be
  24  * customized with the {@link #format} config.</p>
  25  * <p>To handle when the user selects a time from the list, you can subscribe to the {@link #selectionchange}
  26  * event.</p>
  27  *
  28  * {@img Ext.picker.Time/Ext.picker.Time.png Ext.picker.Time component}
  29  *
  30  * ## Code
  31      new Ext.create('Ext.picker.Time', {
  32         width: 60,
  33         minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
  34         maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
  35         renderTo: Ext.getBody()
  36     });
  37  *
  38  */
  39 Ext.define('Ext.picker.Time', {
  40     extend: 'Ext.view.BoundList',
  41     alias: 'widget.timepicker',
  42     requires: ['Ext.data.Store', 'Ext.Date'],
  43
  44     /**
  45      * @cfg {Date} minValue
  46      * The minimum time to be shown in the list of times. This must be a Date object (only the time fields
  47      * will be used); no parsing of String values will be done. Defaults to undefined.
  48      */
  49
  50     /**
  51      * @cfg {Date} maxValue
  52      * The maximum time to be shown in the list of times. This must be a Date object (only the time fields
  53      * will be used); no parsing of String values will be done. Defaults to undefined.
  54      */
  55
  56     /**
  57      * @cfg {Number} increment
  58      * The number of minutes between each time value in the list (defaults to 15).
  59      */
  60     increment: 15,
  61
  62     /**
  63      * @cfg {String} format
  64      * The default time format string which can be overriden for localization support. The format must be
  65      * valid according to {@link Ext.Date#parse} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
  66      * format try 'H:i' instead.
  67      */
  68     format : "g:i A",
  69
  70     /**
  71      * @hide
  72      * The field in the implicitly-generated Model objects that gets displayed in the list. This is
  73      * an internal field name only and is not useful to change via config.
  74      */
  75     displayField: 'disp',
  76
  77     /**
  78      * @private
  79      * Year, month, and day that all times will be normalized into internally.
  80      */
  81     initDate: [2008,1,1],
  82
  83     componentCls: Ext.baseCSSPrefix + 'timepicker',
  84
  85     /**
  86      * @hide
  87      */
  88     loadMask: false,
  89
  90     initComponent: function() {
  91         var me = this,
  92             dateUtil = Ext.Date,
  93             clearTime = dateUtil.clearTime,
  94             initDate = me.initDate.join('/');
  95
  96         // Set up absolute min and max for the entire day
  97         me.absMin = clearTime(new Date(initDate));
  98         me.absMax = dateUtil.add(clearTime(new Date(initDate)), 'mi', (24 * 60) - 1);
  99
 100         me.store = me.createStore();
 101         me.updateList();
 102
 103         this.callParent();
 104     },
 105
 106     /**
 107      * Set the {@link #minValue} and update the list of available times. This must be a Date
 108      * object (only the time fields will be used); no parsing of String values will be done.
 109      * @param {Date} value
 110      */
 111     setMinValue: function(value) {
 112         this.minValue = value;
 113         this.updateList();
 114     },
 115
 116     /**
 117      * Set the {@link #maxValue} and update the list of available times. This must be a Date
 118      * object (only the time fields will be used); no parsing of String values will be done.
 119      * @param {Date} value
 120      */
 121     setMaxValue: function(value) {
 122         this.maxValue = value;
 123         this.updateList();
 124     },
 125
 126     /**
 127      * @private
 128      * Sets the year/month/day of the given Date object to the {@link #initDate}, so that only
 129      * the time fields are significant. This makes values suitable for time comparison.
 130      * @param {Date} date
 131      */
 132     normalizeDate: function(date) {
 133         var initDate = this.initDate;
 134         date.setFullYear(initDate[0], initDate[1] - 1, initDate[2]);
 135         return date;
 136     },
 137
 138     /**
 139      * Update the list of available times in the list to be constrained within the
 140      * {@link #minValue} and {@link #maxValue}.
 141      */
 142     updateList: function() {
 143         var me = this,
 144             min = me.normalizeDate(me.minValue || me.absMin),
 145             max = me.normalizeDate(me.maxValue || me.absMax);
 146
 147         me.store.filterBy(function(record) {
 148             var date = record.get('date');
 149             return date >= min && date <= max;
 150         });
 151     },
 152
 153     /**
 154      * @private
 155      * Creates the internal {@link Ext.data.Store} that contains the available times. The store
 156      * is loaded with all possible times, and it is later filtered to hide those times outside
 157      * the minValue/maxValue.
 158      */
 159     createStore: function() {
 160         var me = this,
 161             utilDate = Ext.Date,
 162             times = [],
 163             min = me.absMin,
 164             max = me.absMax;
 165
 166         while(min <= max){
 167             times.push({
 168                 disp: utilDate.dateFormat(min, me.format),
 169                 date: min
 170             });
 171             min = utilDate.add(min, 'mi', me.increment);
 172         }
 173
 174         return Ext.create('Ext.data.Store', {
 175             fields: ['disp', 'date'],
 176             data: times
 177         });
 178     }
 179
 180 });
 181