Mercurial > lada > lada-client
comparison resources/lib/datetime/UX_DateTimePicker.js @ 550:b6875e900e3a
Added datetime library.
author | Raimund Renkert <raimund.renkert@intevation.de> |
---|---|
date | Fri, 06 Mar 2015 12:44:44 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
549:3aa74630d403 | 550:b6875e900e3a |
---|---|
1 Ext.define('Ext.ux.DateTimePicker', { | |
2 extend: 'Ext.picker.Date', | |
3 alias: 'widget.datetimepicker', | |
4 todayText: "Now", | |
5 timeLabel: 'Time', | |
6 requires: ['Ext.ux.form.TimePickerField'], | |
7 | |
8 initComponent: function() { | |
9 // keep time part for value | |
10 var value = this.value || new Date(); | |
11 this.callParent(); | |
12 this.value = value; | |
13 }, | |
14 onRender: function(container, position) { | |
15 if(!this.timefield) { | |
16 this.timefield = Ext.create('Ext.ux.form.TimePickerField', { | |
17 fieldLabel: this.timeLabel, | |
18 labelWidth: 40, | |
19 value: Ext.Date.format(this.value, 'H:i:s') | |
20 }); | |
21 } | |
22 this.timefield.ownerCt = this; | |
23 this.timefield.on('change', this.timeChange, this); | |
24 this.callParent(arguments); | |
25 | |
26 var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom)); | |
27 var tfEl = Ext.core.DomHelper.insertAfter(table, { | |
28 tag: 'div', | |
29 style: 'border:0px;', | |
30 children: [{ | |
31 tag: 'div', | |
32 cls: 'x-datepicker-footer ux-timefield' | |
33 }] | |
34 }, true); | |
35 this.timefield.render(this.el.child('div div.ux-timefield')); | |
36 | |
37 var p = this.getEl().parent('div.x-layer'); | |
38 if(p) { | |
39 p.setStyle("height", p.getHeight() + 31); | |
40 } | |
41 }, | |
42 // listener 时间域修改, timefield change | |
43 timeChange: function(tf, time, rawtime) { | |
44 // if(!this.todayKeyListener) { // before render | |
45 this.value = this.fillDateTime(this.value); | |
46 // } else { | |
47 // this.setValue(this.value); | |
48 // } | |
49 }, | |
50 // @private | |
51 fillDateTime: function(value) { | |
52 if(this.timefield) { | |
53 var rawtime = this.timefield.getRawValue(); | |
54 value.setHours(rawtime.h); | |
55 value.setMinutes(rawtime.m); | |
56 value.setSeconds(rawtime.s); | |
57 } | |
58 return value; | |
59 }, | |
60 // @private | |
61 changeTimeFiledValue: function(value) { | |
62 this.timefield.un('change', this.timeChange, this); | |
63 this.timefield.setValue(this.value); | |
64 this.timefield.on('change', this.timeChange, this); | |
65 }, | |
66 | |
67 /* TODO 时间值与输入框绑定, 考虑: 创建this.timeValue 将日期和时间分开保存. */ | |
68 // overwrite | |
69 setValue: function(value) { | |
70 this.value = value; | |
71 this.changeTimeFiledValue(value); | |
72 return this.update(this.value); | |
73 }, | |
74 // overwrite | |
75 getValue: function() { | |
76 return this.fillDateTime(this.value); | |
77 }, | |
78 | |
79 // overwrite : fill time before setValue | |
80 handleDateClick: function(e, t) { | |
81 var me = this, | |
82 handler = me.handler; | |
83 | |
84 e.stopEvent(); | |
85 if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) { | |
86 me.doCancelFocus = me.focusOnSelect === false; | |
87 me.setValue(this.fillDateTime(new Date(t.dateValue))); // overwrite: fill time before setValue | |
88 delete me.doCancelFocus; | |
89 me.fireEvent('select', me, me.value); | |
90 if(handler) { | |
91 handler.call(me.scope || me, me, me.value); | |
92 } | |
93 me.onSelect(); | |
94 } | |
95 }, | |
96 | |
97 // overwrite : fill time before setValue | |
98 selectToday: function() { | |
99 var me = this, | |
100 btn = me.todayBtn, | |
101 handler = me.handler; | |
102 | |
103 if(btn && !btn.disabled) { | |
104 // me.setValue(Ext.Date.clearTime(new Date())); //src | |
105 me.setValue(new Date());// overwrite: fill time before setValue | |
106 me.fireEvent('select', me, me.value); | |
107 if(handler) { | |
108 handler.call(me.scope || me, me, me.value); | |
109 } | |
110 me.onSelect(); | |
111 } | |
112 return me; | |
113 } | |
114 }); |