Time2.html
6.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-picker-Time'>/**
</span> * A time picker which provides a list of times from which to choose. This is used by the Ext.form.field.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.
*
* @example
* Ext.create('Ext.picker.Time', {
* width: 60,
* minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
* maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
* renderTo: Ext.getBody()
* });
*/
Ext.define('Ext.picker.Time', {
extend: 'Ext.view.BoundList',
alias: 'widget.timepicker',
requires: ['Ext.data.Store', 'Ext.Date'],
<span id='Ext-picker-Time-cfg-minValue'> /**
</span> * @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.
*/
<span id='Ext-picker-Time-cfg-maxValue'> /**
</span> * @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.
*/
<span id='Ext-picker-Time-cfg-increment'> /**
</span> * @cfg {Number} increment
* The number of minutes between each time value in the list.
*/
increment: 15,
//<locale>
<span id='Ext-picker-Time-cfg-format'> /**
</span> * @cfg {String} [format=undefined]
* The default time format string which can be overriden for localization support. The format must be valid
* according to {@link Ext.Date#parse}.
*
* Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
*/
format : "g:i A",
//</locale>
<span id='Ext-picker-Time-property-displayField'> /**
</span> * @private
* 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',
<span id='Ext-picker-Time-property-initDate'> /**
</span> * @private
* Year, month, and day that all times will be normalized into internally.
*/
initDate: [2008,0,1],
componentCls: Ext.baseCSSPrefix + 'timepicker',
<span id='Ext-picker-Time-cfg-loadMask'> /**
</span> * @cfg
* @private
*/
loadMask: false,
initComponent: function() {
var me = this,
dateUtil = Ext.Date,
clearTime = dateUtil.clearTime,
initDate = me.initDate;
// Set up absolute min and max for the entire day
me.absMin = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
me.absMax = dateUtil.add(clearTime(new Date(initDate[0], initDate[1], initDate[2])), 'mi', (24 * 60) - 1);
me.store = me.createStore();
me.updateList();
me.callParent();
},
<span id='Ext-picker-Time-method-setMinValue'> /**
</span> * 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();
},
<span id='Ext-picker-Time-method-setMaxValue'> /**
</span> * 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();
},
<span id='Ext-picker-Time-method-normalizeDate'> /**
</span> * @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], initDate[2]);
return date;
},
<span id='Ext-picker-Time-method-updateList'> /**
</span> * 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;
});
},
<span id='Ext-picker-Time-method-createStore'> /**
</span> * @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
});
}
});
</pre>
</body>
</html>