2 * Ext JS Library 0.30
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.namespace('Ext.ux.form');
\r
12 * Ext.ux.form.DateTime Extension Class for Ext 2.x Library
\r
14 * @author Ing. Jozef Sakalos
\r
15 * @copyright (c) 2008, Ing. Jozef Sakalos
\r
16 * @version $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $
\r
18 * @class Ext.ux.form.DateTime
\r
19 * @extends Ext.form.Field
\r
22 * 2008-1-31 Jack Slocum
\r
23 * Updated for reformatting and code edits
\r
25 Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
\r
26 defaultAutoCreate: {
\r
33 hiddenFormat: 'Y-m-d H:i:s',
\r
35 timePosition: 'right',
\r
37 initComponent: function(){
\r
38 // call parent initComponent
\r
39 Ext.ux.form.DateTime.superclass.initComponent.call(this);
\r
42 var dateConfig = Ext.apply({}, {
\r
43 id: this.id + '-date',
\r
44 format: this.dateFormat,
\r
45 width: this.dateWidth,
\r
56 }, this.dateConfig);
\r
57 this.df = new Ext.form.DateField(dateConfig);
\r
58 delete (this.dateFormat);
\r
61 var timeConfig = Ext.apply({}, {
\r
62 id: this.id + '-time',
\r
63 format: this.timeFormat,
\r
64 width: this.timeWidth,
\r
75 }, this.timeConfig);
\r
76 this.tf = new Ext.form.TimeField(timeConfig);
\r
77 delete (this.timeFormat);
\r
80 this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
\r
81 this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);
\r
84 onRender: function(ct, position){
\r
85 if (this.isRendered) {
\r
89 // render underlying field
\r
90 Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);
\r
92 // render DateField and TimeField
\r
93 // create bounding table
\r
94 if ('below' === this.timePosition) {
\r
95 var t = Ext.DomHelper.append(ct, {
\r
97 style: 'border-collapse:collapse',
\r
102 style: 'padding-bottom:1px',
\r
103 cls: 'ux-datetime-date'
\r
109 cls: 'ux-datetime-time'
\r
115 var t = Ext.DomHelper.append(ct, {
\r
117 style: 'border-collapse:collapse',
\r
122 style: 'padding-right:4px',
\r
123 cls: 'ux-datetime-date'
\r
126 cls: 'ux-datetime-time'
\r
133 this.wrap = t.wrap({
\r
134 cls: 'x-form-field-wrap'
\r
136 this.wrap.on("mousedown", this.onMouseDown, this, {
\r
140 // render DateField & TimeField
\r
141 this.df.render(t.child('td.ux-datetime-date'));
\r
142 this.tf.render(t.child('td.ux-datetime-time'));
\r
144 if (Ext.isIE && Ext.isStrict) {
\r
145 t.select('input').applyStyles({
\r
150 this.on('specialkey', this.onSpecialKey, this);
\r
152 this.df.el.swallowEvent(['keydown', 'keypress']);
\r
153 this.tf.el.swallowEvent(['keydown', 'keypress']);
\r
155 // create errorIcon for side invalid
\r
156 if ('side' === this.msgTarget) {
\r
157 var elp = this.el.findParent('.x-form-element', 10, true);
\r
158 this.errorIcon = elp.createChild({
\r
159 cls: 'x-form-invalid-icon'
\r
162 this.df.errorIcon = this.errorIcon;
\r
163 this.tf.errorIcon = this.errorIcon;
\r
166 this.isRendered = true;
\r
169 getPositionEl: function(){
\r
172 getResizeEl: function(){
\r
176 adjustSize: Ext.BoxComponent.prototype.adjustSize,
\r
178 alignErrorIcon: function(){
\r
179 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
\r
182 onSpecialKey: function(t, e){
\r
183 if (e.getKey() == e.TAB) {
\r
184 if (t === this.df && !e.shiftKey) {
\r
188 if (t === this.tf && e.shiftKey) {
\r
195 setSize: function(w, h){
\r
199 if ('below' == this.timePosition) {
\r
200 this.df.setSize(w, h);
\r
201 this.tf.setSize(w, h)
\r
203 this.df.el.up('td').setWidth(w);
\r
204 this.tf.el.up('td').setWidth(w);
\r
208 this.df.setSize(w - this.timeWidth - 4, h);
\r
209 this.tf.setSize(this.timeWidth, h);
\r
212 this.df.el.up('td').setWidth(w - this.timeWidth - 4);
\r
213 this.tf.el.up('td').setWidth(this.timeWidth);
\r
219 setValue: function(val){
\r
223 this.updateValue();
\r
226 // clear cross frame AIR nonsense
\r
227 val = new Date(val.getTime());
\r
229 if (Ext.isDate(val)) {
\r
232 this.dateValue = new Date(val);
\r
235 da = val.split(this.dtSeparator);
\r
236 this.setDate(da[0]);
\r
238 this.setTime(da[1]);
\r
241 this.updateValue();
\r
244 getValue: function(){
\r
245 // create new instance of date
\r
246 return this.dateValue ? new Date(this.dateValue) : '';
\r
249 onMouseDown: function(e){
\r
250 // just to prevent blur event when clicked in the middle of fields
\r
251 this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
\r
254 onFocus: function(){
\r
255 if (!this.hasFocus) {
\r
256 this.hasFocus = true;
\r
257 this.startValue = this.getValue();
\r
258 this.fireEvent("focus", this);
\r
262 onBlur: function(f){
\r
263 // called by both DateField and TimeField blur events
\r
265 // revert focus to previous field if clicked in between
\r
266 if (this.wrapClick) {
\r
268 this.wrapClick = false;
\r
271 // update underlying value
\r
272 if (f === this.df) {
\r
278 this.updateHidden();
\r
280 // fire events later
\r
282 if (!this.df.hasFocus && !this.tf.hasFocus) {
\r
283 var v = this.getValue();
\r
284 if (String(v) !== String(this.startValue)) {
\r
285 this.fireEvent("change", this, v, this.startValue);
\r
287 this.hasFocus = false;
\r
288 this.fireEvent('blur', this);
\r
290 }).defer(100, this);
\r
293 updateDate: function(){
\r
295 var d = this.df.getValue();
\r
297 if (!Ext.isDate(this.dateValue)) {
\r
298 this.initDateValue();
\r
299 if (!this.tf.getValue()) {
\r
300 this.setTime(this.dateValue);
\r
303 this.dateValue.setFullYear(d.getFullYear());
\r
304 this.dateValue.setMonth(d.getMonth());
\r
305 this.dateValue.setDate(d.getDate());
\r
308 this.dateValue = '';
\r
312 updateTime: function(){
\r
313 var t = this.tf.getValue();
\r
314 if (t && !Ext.isDate(t)) {
\r
315 t = Date.parseDate(t, this.tf.format);
\r
317 if (t && !this.df.getValue()) {
\r
318 this.initDateValue();
\r
319 this.setDate(this.dateValue);
\r
321 if (Ext.isDate(this.dateValue)) {
\r
323 this.dateValue.setHours(t.getHours());
\r
324 this.dateValue.setMinutes(t.getMinutes());
\r
325 this.dateValue.setSeconds(t.getSeconds());
\r
328 this.dateValue.setHours(0);
\r
329 this.dateValue.setMinutes(0);
\r
330 this.dateValue.setSeconds(0);
\r
334 initDateValue: function(){
\r
335 this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
\r
337 updateHidden: function(){
\r
338 if (this.isRendered) {
\r
339 var value = Ext.isDate(this.dateValue) ? this.dateValue.format(this.hiddenFormat) : '';
\r
340 this.el.dom.value = value;
\r
343 updateValue: function(){
\r
347 this.updateHidden();
\r
352 setDate: function(date){
\r
353 this.df.setValue(date);
\r
355 setTime: function(date){
\r
356 this.tf.setValue(date);
\r
358 isValid: function(){
\r
359 return this.df.isValid() && this.tf.isValid();
\r
361 validate: function(){
\r
362 return this.df.validate() && this.tf.validate();
\r
368 onDisable : function(){
\r
375 onEnable : function(){
\r
384 Ext.reg('xdatetime', Ext.ux.form.DateTime);