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