Bug #33629 ยป tceforms_date_datetime_4.5.patch

Benni Mack, 2012-03-15 14:16

View differences:

t3lib/class.t3lib_tceforms.php
5553 5553
			);
5554 5554
			$pageRenderer->addInlineSettingArray('', $typo3Settings);
5555 5555

  
5556
			$this->loadJavascriptLib('../t3lib/js/extjs/ux/Ext.ux.DateTimePicker.js');
5556 5557
			$this->loadJavascriptLib('../t3lib/js/extjs/tceforms.js');
5557 5558

  
5558 5559
				// if IRRE fields were processed, add the JavaScript functions:
t3lib/js/extjs/tceforms.js
1 1
/***************************************************************
2 2
 * extJS for TCEforms
3 3
 *
4
 * $Id$
5
 *
6 4
 * Copyright notice
7 5
 *
8 6
 * (c) 2009-2011 Steffen Kamper <info@sk-typo3.de>
......
33 31
	init: function() {
34 32
		Ext.QuickTips.init();
35 33

  
36
		this.update();
37
	},
38

  
39
	update: function() {
40 34
		this.convertDateFieldsToDatePicker();
41 35
		this.convertTextareasResizable();
42 36
	},
......
46 40
		dateFields.each(function(element) {
47 41
			var index = element.dom.id.match(/tceforms-datefield-/) ? 0 : 1;
48 42
			var format = TYPO3.settings.datePickerUSmode ? TYPO3.settings.dateFormatUS : TYPO3.settings.dateFormat;
49

  
50
			var datepicker = element.next('span');
51
			var oldValue = Date.parseDate(element.dom.value, format[index]);
43
			var datepicker = element.next('span'), menu;
52 44

  
53 45
			// check for daterange
54 46
			var lowerMatch = element.dom.className.match(/lower-(\d+)\b/);
......
56 48
			var upperMatch = element.dom.className.match(/upper-(\d+)\b/);
57 49
			maxDate = Ext.isArray(upperMatch) ? new Date(upperMatch[1] * 1000) : null;
58 50

  
59
			var menu = new Ext.menu.DateMenu({
60
				id:			'p' + element.dom.id,
61
				format:		format[index],
62
				value:		oldValue,
63
				minDate:	minDate,
64
				maxDate:	maxDate,
65
				handler: 	function(picker, date){
66
					var relElement = Ext.getDom(picker.ownerCt.id.substring(1));
67
					if (index === 1 && oldValue !== undefined) {
68
							//datetimefield, preserve time information
69
						date.setHours(oldValue.getHours());
70
						date.setMinutes(oldValue.getMinutes());
71
					}
72
					relElement.value = date.format(format[index]);
73
					if (Ext.isFunction(relElement.onchange)) {
74
						relElement.onchange.call(relElement);
51
			if (index === 0) {
52
				menu = new Ext.menu.DateMenu({
53
					id: 'p' + element.dom.id,
54
					format: format[index],
55
					value: Date.parseDate(element.dom.value, format[index]),
56
					minDate: minDate,
57
					maxDate: maxDate,
58
					handler: function(picker, date){
59
						var relElement = Ext.getDom(picker.ownerCt.id.substring(1));
60
						relElement.value = date.format(format[index]);
61
						if (Ext.isFunction(relElement.onchange)) {
62
							relElement.onchange.call(relElement);
63
						}
64
					},
65
					listeners: {
66
						beforeshow: function(obj) {
67
							var relElement = Ext.getDom(obj.picker.ownerCt.id.substring(1));
68
							if (relElement.value) {
69
								obj.picker.setValue(Date.parseDate(relElement.value, format[index]));
70
							}
71
						}
75 72
					}
76
				},
77
				listeners:	{
78
					beforeshow:	function(obj) {
79
						var relElement = Ext.getDom(obj.picker.ownerCt.id.substring(1));
80
						if (relElement.value) {
81
							obj.picker.setValue(Date.parseDate(relElement.value, format[index]));
73
				});
74
			} else {
75
				menu = new Ext.ux.menu.DateTimeMenu({
76
					id: 'p' + element.dom.id,
77
					format: format[index],
78
					value: Date.parseDate(element.dom.value, format[index]),
79
					minDate: minDate,
80
					maxDate: maxDate,
81
					listeners: {
82
						beforeshow: function(obj) {
83
							var relElement = Ext.getDom(obj.picker.ownerCt.id.substring(1));
84
							if (relElement.value) {
85
								obj.picker.setValue(Date.parseDate(relElement.value, format[index]));
86
							}
87
						},
88
						select: function(picker) {
89
							var relElement = Ext.getDom(picker.ownerCt.id.substring(1));
90
							relElement.value = picker.getValue().format(format[index]);
91
							if (Ext.isFunction(relElement.onchange)) {
92
								relElement.onchange.call(relElement);
93
							}
82 94
						}
83 95
					}
84
				}
85
			});
96
				});
97
			}
86 98

  
87
			datepicker.removeAllListeners();
88 99
			datepicker.on('click', function(){
89 100
				menu.show(datepicker);
90 101
			});
t3lib/js/extjs/ux/Ext.ux.DateTimePicker.js
1
Ext.ns('Ext.ux', 'Ext.ux.menu', 'Ext.ux.form');
2

  
3
Ext.ux.DateTimePicker = Ext.extend(Ext.DatePicker, {
4

  
5
	timeFormat: 'H:i',
6

  
7
	initComponent: function() {
8
		var t = this.timeFormat.split(':');
9
		this.hourFormat = t[0];
10
		this.minuteFormat = t[1];
11

  
12
		Ext.ux.DateTimePicker.superclass.initComponent.call(this);
13
	},
14

  
15
	/**
16
	 * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
17
	 * @param {Date} value The minimum date that can be selected
18
	 */
19
	setMinTime: function(dt) {
20
		this.minTime = dt;
21
		this.update(this.value, true);
22
	},
23

  
24
	/**
25
	 * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
26
	 * @param {Date} value The maximum date that can be selected
27
	 */
28
	setMaxTime: function(dt) {
29
		this.maxTime = dt;
30
		this.update(this.value, true);
31
	},
32

  
33
	/**
34
	 * Returns the value of the date/time field
35
	 */
36
	getValue: function() {
37
		return this.addTimeToValue(this.value);
38
	},
39

  
40
	/**
41
	 * Sets the value of the date/time field
42
	 * @param {Date} value The date to set
43
	 */
44
	setValue: function(value) {
45
		var old = this.value;
46
		this.value = value.clearTime(true);
47
		if (this.el) {
48
			this.update(this.value);
49
		}
50
		this.hourField.setValue(value.format(this.hourFormat));
51
		this.minuteField.setValue(value.format(this.minuteFormat));
52
	},
53

  
54
	/**
55
	 * Sets the value of the time field
56
	 * @param {Date} value The date to set
57
	 */
58
	setTime: function(value) {
59
		this.hourField.setValue(value.format(this.hourFormat));
60
		this.minuteField.setValue(value.format(this.minuteFormat));
61
	},
62

  
63
	/**
64
	 * Updates the date value with the time entered
65
	 * @param {Date} value The date to which time should be added
66
	 */
67
	addTimeToValue: function(date) {
68
		return date.clearTime().add(Date.HOUR, this.hourField.getValue()).add(Date.MINUTE, this.minuteField.getValue());
69
	},
70

  
71
	onRender: function(container, position) {
72
		var m = [
73
			'<table cellspacing="0">',
74
			'<tr><td class="x-date-left"><a href="#" title="',
75
			this.prevText ,
76
			'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="',
77
			this.nextText ,
78
			'">&#160;</a></td></tr>',
79
			'<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'
80
		];
81
		var dn = this.dayNames;
82
		for (var i = 0; i < 7; i++) {
83
			var d = this.startDay + i;
84
			if (d > 6) {
85
				d = d - 7;
86
			}
87
			m.push('<th><span>', dn[d].substr(0, 1), '</span></th>');
88
		}
89
		m[m.length] = "</tr></thead><tbody><tr>";
90
		for (var i = 0; i < 42; i++) {
91
			if (i % 7 == 0 && i != 0) {
92
				m[m.length] = "</tr><tr>";
93
			}
94
			m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
95
		}
96
		m.push('</tr></tbody></table></td></tr>',
97
			this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
98
			'</table><div class="x-date-mp"></div>'
99
		);
100

  
101
		var el = document.createElement("div");
102
		el.className = "x-date-picker";
103
		el.innerHTML = m.join("");
104

  
105
		container.dom.insertBefore(el, position);
106

  
107
		this.el = Ext.get(el);
108
		this.eventEl = Ext.get(el.firstChild);
109

  
110
		new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {
111
			handler: this.showPrevMonth,
112
			scope: this,
113
			preventDefault:true,
114
			stopDefault:true
115
		});
116

  
117
		new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {
118
			handler: this.showNextMonth,
119
			scope: this,
120
			preventDefault:true,
121
			stopDefault:true
122
		});
123

  
124
		this.mon(this.eventEl, "mousewheel", this.handleMouseWheel, this);
125

  
126
		this.monthPicker = this.el.down('div.x-date-mp');
127
		this.monthPicker.enableDisplayMode('block');
128

  
129
		var kn = new Ext.KeyNav(this.eventEl, {
130
			"left": function(e) {
131
				e.ctrlKey ?
132
					this.showPrevMonth() :
133
					this.update(this.activeDate.add("d", -1));
134
			},
135

  
136
			"right": function(e) {
137
				e.ctrlKey ?
138
					this.showNextMonth() :
139
					this.update(this.activeDate.add("d", 1));
140
			},
141

  
142
			"up": function(e) {
143
				e.ctrlKey ?
144
					this.showNextYear() :
145
					this.update(this.activeDate.add("d", -7));
146
			},
147

  
148
			"down": function(e) {
149
				e.ctrlKey ?
150
					this.showPrevYear() :
151
					this.update(this.activeDate.add("d", 7));
152
			},
153

  
154
			"pageUp": function(e) {
155
				this.showNextMonth();
156
			},
157

  
158
			"pageDown": function(e) {
159
				this.showPrevMonth();
160
			},
161

  
162
			"enter": function(e) {
163
				e.stopPropagation();
164
				this.fireEvent("select", this, this.value);
165
				return true;
166
			},
167

  
168
			scope : this
169
		});
170

  
171
		this.mon(this.eventEl, "click", this.handleDateClick, this, {delegate: "a.x-date-date"});
172

  
173
		this.el.select("table.x-date-inner").unselectable();
174
		this.cells = this.el.select("table.x-date-inner tbody td");
175
		this.textNodes = this.el.query("table.x-date-inner tbody span");
176

  
177
		this.mbtn = new Ext.Button({
178
			text: "&#160;",
179
			tooltip: this.monthYearText,
180
			renderTo: this.el.child("td.x-date-middle", true)
181
		});
182

  
183
		this.mon(this.mbtn, 'click', this.showMonthPicker, this);
184
		this.mbtn.el.child('em').addClass("x-btn-arrow");
185

  
186
		if (this.showToday) {
187
			this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this);
188
			var today = (new Date()).dateFormat(this.format);
189
			this.todayBtn = new Ext.Button({
190
				text: String.format(this.todayText, today),
191
				tooltip: String.format(this.todayTip, today),
192
				handler: this.selectToday,
193
				scope: this
194
			});
195
		}
196

  
197
		this.formPanel = new Ext.form.FormPanel({
198
			layout: 'column',
199
			renderTo: this.el.child("td.x-date-bottom", true),
200
			baseCls: 'x-plain',
201
			hideBorders: true,
202
			labelAlign: 'left',
203
			labelWidth: 10,
204
			forceLayout: true,
205
			items: [
206
				{
207
					columnWidth: .4,
208
					layout: 'form',
209
					baseCls: 'x-plain',
210
					items: [
211
						{
212
							xtype: 'textfield',
213
							id: this.getId() + '_hour',
214
							maxLength: 2,
215
							fieldLabel: '',
216
							labelWidth: 30,
217
							width: 30,
218
							minValue: 0,
219
							maxValue: 24,
220
							allowBlank: false,
221
							labelSeparator: '',
222
							tabIndex: 1,
223
							maskRe: /[0-9]/
224
						}
225
					]
226
				},
227
				{
228
					columnWidth: .3,
229
					layout: 'form',
230
					baseCls: 'x-plain',
231
					items: [
232
						{
233
							xtype: 'textfield',
234
							id:	this.getId() + '_minute',
235
							maxLength: 2,
236
							fieldLabel: ':',
237
							labelWidth: 10,
238
							width: 30,
239
							minValue: 0,
240
							maxValue: 59,
241
							allowBlank: false,
242
							labelSeparator: '',
243
							tabIndex: 2,
244
							maskRe: /[0-9]/
245
						}
246
					]
247
				},
248
				{
249
					columnWidth: .3,
250
					layout: 'form',
251
					baseCls: 'x-plain',
252
					items: [this.todayBtn]
253
				}
254
			]
255
		});
256

  
257
		this.hourField = Ext.getCmp(this.getId() + '_hour');
258
		this.minuteField = Ext.getCmp(this.getId() + '_minute');
259

  
260
		this.hourField.on('blur', function(field) {
261
			var old = field.value;
262
			var h = parseInt(field.getValue());
263
			if (h > 23) {
264
				field.setValue(old);
265
			}
266
		});
267

  
268
		this.minuteField.on('blur', function(field) {
269
			var old = field.value;
270
			var h = parseInt(field.getValue());
271
			if (h > 59) {
272
				field.setValue(old);
273
			}
274
		});
275

  
276
		if (Ext.isIE) {
277
			this.el.repaint();
278
		}
279
		this.update(this.value);
280
	},
281

  
282
	// private
283
	handleDateClick : function(e, t) {
284
		e.stopEvent();
285
		if (t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")) {
286
			this.setValue(this.addTimeToValue(new Date(t.dateValue)));
287
			this.fireEvent("select", this, this.value);
288
		}
289
	},
290

  
291
	selectToday : function() {
292
		if (this.todayBtn && !this.todayBtn.disabled) {
293
			this.setValue(new Date());
294
			this.fireEvent("select", this, this.value);
295
		}
296
	},
297

  
298
	update : function(date, forceRefresh) {
299
		Ext.ux.DateTimePicker.superclass.update.call(this, date, forceRefresh);
300

  
301
		if (this.showToday) {
302
			this.setTime(new Date());
303
		}
304
	}
305
});
306
Ext.reg('datetimepicker', Ext.ux.DateTimePicker);
307

  
308

  
309
Ext.ux.menu.DateTimeMenu = Ext.extend(Ext.menu.Menu, {
310
	enableScrolling : false,
311
	hideOnClick : true,
312
	cls: 'x-date-menu x-datetime-menu',
313
	initComponent : function() {
314

  
315
		Ext.apply(this, {
316
			plain: true,
317
			showSeparator: false,
318
			items: this.picker = new Ext.ux.DateTimePicker(Ext.apply({
319
				internalRender: this.strict || !Ext.isIE,
320
				ctCls: 'x-menu-datetime-item x-menu-date-item'
321
			}, this.initialConfig))
322
		});
323
		this.picker.purgeListeners();
324

  
325
		Ext.ux.menu.DateTimeMenu.superclass.initComponent.call(this);
326
		this.relayEvents(this.picker, ['select']);
327
		this.on('select', this.menuHide, this);
328
		if (this.handler) {
329
			this.on('select', this.handler, this.scope || this)
330
		}
331
	},
332
	menuHide: function() {
333
		if (this.hideOnClick) {
334
			this.hide(true);
335
		}
336
	}
337
});
338
Ext.reg('datetimemenu', Ext.ux.menu.DateTimeMenu);
    (1-1/1)