3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">Ext.namespace('Ext.ux.form');
\r
10 <div id="cls-Ext.ux.form.DateTime"></div>/**
\r
11 * Ext.ux.form.DateTime Extension Class for Ext 2.x Library
\r
13 * @author Ing. Jozef Sakalos
\r
14 * @copyright (c) 2008, Ing. Jozef Sakalos
\r
15 * @version $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $
\r
17 * @class Ext.ux.form.DateTime
\r
18 * @extends Ext.form.Field
\r
21 * 2008-1-31 Jack Slocum
\r
22 * Updated for reformatting and code edits
\r
24 Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
\r
25 defaultAutoCreate: {
\r
32 hiddenFormat: 'Y-m-d H:i:s',
\r
34 timePosition: 'right',
\r
36 initComponent: function(){
\r
37 // call parent initComponent
\r
38 Ext.ux.form.DateTime.superclass.initComponent.call(this);
\r
41 var dateConfig = Ext.apply({}, {
\r
42 id: this.id + '-date',
\r
43 format: this.dateFormat,
\r
44 width: this.dateWidth,
\r
55 }, this.dateConfig);
\r
56 this.df = new Ext.form.DateField(dateConfig);
\r
57 delete (this.dateFormat);
\r
60 var timeConfig = Ext.apply({}, {
\r
61 id: this.id + '-time',
\r
62 format: this.timeFormat,
\r
63 width: this.timeWidth,
\r
74 }, this.timeConfig);
\r
75 this.tf = new Ext.form.TimeField(timeConfig);
\r
76 delete (this.timeFormat);
\r
79 this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
\r
80 this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);
\r
83 onRender: function(ct, position){
\r
84 if (this.isRendered) {
\r
88 // render underlying field
\r
89 Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);
\r
91 // render DateField and TimeField
\r
92 // create bounding table
\r
93 if ('below' === this.timePosition) {
\r
94 var t = Ext.DomHelper.append(ct, {
\r
96 style: 'border-collapse:collapse',
\r
101 style: 'padding-bottom:1px',
\r
102 cls: 'ux-datetime-date'
\r
108 cls: 'ux-datetime-time'
\r
114 var t = Ext.DomHelper.append(ct, {
\r
116 style: 'border-collapse:collapse',
\r
121 style: 'padding-right:4px',
\r
122 cls: 'ux-datetime-date'
\r
125 cls: 'ux-datetime-time'
\r
132 this.wrap = t.wrap({
\r
133 cls: 'x-form-field-wrap'
\r
135 this.wrap.on("mousedown", this.onMouseDown, this, {
\r
139 // render DateField & TimeField
\r
140 this.df.render(t.child('td.ux-datetime-date'));
\r
141 this.tf.render(t.child('td.ux-datetime-time'));
\r
143 if (Ext.isIE && Ext.isStrict) {
\r
144 t.select('input').applyStyles({
\r
149 this.on('specialkey', this.onSpecialKey, this);
\r
151 this.df.el.swallowEvent(['keydown', 'keypress']);
\r
152 this.tf.el.swallowEvent(['keydown', 'keypress']);
\r
154 // create errorIcon for side invalid
\r
155 if ('side' === this.msgTarget) {
\r
156 var elp = this.el.findParent('.x-form-element', 10, true);
\r
157 this.errorIcon = elp.createChild({
\r
158 cls: 'x-form-invalid-icon'
\r
161 this.df.errorIcon = this.errorIcon;
\r
162 this.tf.errorIcon = this.errorIcon;
\r
165 this.isRendered = true;
\r
168 getPositionEl: function(){
\r
171 getResizeEl: function(){
\r
175 adjustSize: Ext.BoxComponent.prototype.adjustSize,
\r
177 alignErrorIcon: function(){
\r
178 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
\r
181 onSpecialKey: function(t, e){
\r
182 if (e.getKey() == e.TAB) {
\r
183 if (t === this.df && !e.shiftKey) {
\r
187 if (t === this.tf && e.shiftKey) {
\r
194 setSize: function(w, h){
\r
198 if ('below' == this.timePosition) {
\r
199 this.df.setSize(w, h);
\r
200 this.tf.setSize(w, h)
\r
202 this.df.el.up('td').setWidth(w);
\r
203 this.tf.el.up('td').setWidth(w);
\r
207 this.df.setSize(w - this.timeWidth - 4, h);
\r
208 this.tf.setSize(this.timeWidth, h);
\r
211 this.df.el.up('td').setWidth(w - this.timeWidth - 4);
\r
212 this.tf.el.up('td').setWidth(this.timeWidth);
\r
218 setValue: function(val){
\r
222 this.updateValue();
\r
225 // clear cross frame AIR nonsense
\r
226 val = new Date(val.getTime());
\r
228 if (Ext.isDate(val)) {
\r
231 this.dateValue = new Date(val);
\r
234 da = val.split(this.dtSeparator);
\r
235 this.setDate(da[0]);
\r
237 this.setTime(da[1]);
\r
240 this.updateValue();
\r
243 getValue: function(){
\r
244 // create new instance of date
\r
245 return this.dateValue ? new Date(this.dateValue) : '';
\r
248 onMouseDown: function(e){
\r
249 // just to prevent blur event when clicked in the middle of fields
\r
250 this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
\r
253 onFocus: function(){
\r
254 if (!this.hasFocus) {
\r
255 this.hasFocus = true;
\r
256 this.startValue = this.getValue();
\r
257 this.fireEvent("focus", this);
\r
261 onBlur: function(f){
\r
262 // called by both DateField and TimeField blur events
\r
264 // revert focus to previous field if clicked in between
\r
265 if (this.wrapClick) {
\r
267 this.wrapClick = false;
\r
270 // update underlying value
\r
271 if (f === this.df) {
\r
277 this.updateHidden();
\r
279 // fire events later
\r
281 if (!this.df.hasFocus && !this.tf.hasFocus) {
\r
282 var v = this.getValue();
\r
283 if (String(v) !== String(this.startValue)) {
\r
284 this.fireEvent("change", this, v, this.startValue);
\r
286 this.hasFocus = false;
\r
287 this.fireEvent('blur', this);
\r
289 }).defer(100, this);
\r
292 updateDate: function(){
\r
294 var d = this.df.getValue();
\r
296 if (!Ext.isDate(this.dateValue)) {
\r
297 this.initDateValue();
\r
298 if (!this.tf.getValue()) {
\r
299 this.setTime(this.dateValue);
\r
302 this.dateValue.setFullYear(d.getFullYear());
\r
303 this.dateValue.setMonth(d.getMonth());
\r
304 this.dateValue.setDate(d.getDate());
\r
307 this.dateValue = '';
\r
311 updateTime: function(){
\r
312 var t = this.tf.getValue();
\r
313 if (t && !Ext.isDate(t)) {
\r
314 t = Date.parseDate(t, this.tf.format);
\r
316 if (t && !this.df.getValue()) {
\r
317 this.initDateValue();
\r
318 this.setDate(this.dateValue);
\r
320 if (Ext.isDate(this.dateValue)) {
\r
322 this.dateValue.setHours(t.getHours());
\r
323 this.dateValue.setMinutes(t.getMinutes());
\r
324 this.dateValue.setSeconds(t.getSeconds());
\r
327 this.dateValue.setHours(0);
\r
328 this.dateValue.setMinutes(0);
\r
329 this.dateValue.setSeconds(0);
\r
333 initDateValue: function(){
\r
334 this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
\r
336 updateHidden: function(){
\r
337 if (this.isRendered) {
\r
338 var value = Ext.isDate(this.dateValue) ? this.dateValue.format(this.hiddenFormat) : '';
\r
339 this.el.dom.value = value;
\r
342 updateValue: function(){
\r
346 this.updateHidden();
\r
351 setDate: function(date){
\r
352 this.df.setValue(date);
\r
354 setTime: function(date){
\r
355 this.tf.setValue(date);
\r
357 isValid: function(){
\r
358 return this.df.isValid() && this.tf.isValid();
\r
360 validate: function(){
\r
361 return this.df.validate() && this.tf.validate();
\r
367 onDisable : function(){
\r
374 onEnable : function(){
\r
383 Ext.reg('xdatetime', Ext.ux.form.DateTime);</pre>
\r