Simple date/time, still needs to know user format

etemplate/js/et2_date.js

@@ -0,0 +1,158 @@
+/**
+ * eGroupWare eTemplate2 - JS Date object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	jquery.jquery;
+	et2_inputWidget;
+	et2_valueWidget;
+*/
+
+/**
+ * Class which implements the "date" XET-Tag
+ */ 
+var et2_date = et2_inputWidget.extend({
+
+	attributes: {
+		"value": {
+			"type": "any"
+		},
+		"type": {
+			"ignore": false
+		}
+	},
+
+	/**
+	 * Internal container for working easily with dates
+	 */
+	date: new Date(),
+
+	init: function(_parent) {
+		this._super.apply(this, arguments);
+
+		this.input = null;
+
+		this.createInputWidget();
+	},
+
+	createInputWidget: function() {
+		this.input = $j(document.createElement("input"));
+
+		var type="text";
+		switch(this.type) {
+			case "date":
+				type = "date";
+				break;
+			case "date-timeonly":
+				type = "time";
+				break;
+			case "date-time":
+				type = "datetime-local";
+				break;
+		}
+		this.input.attr("type", type).addClass("et2_date");
+
+		this.setDOMNode(this.input[0]);
+	},
+
+	set_type: function(_type) {
+		this.type = _type;
+		this.createInputWidget();
+	},
+
+	set_value: function(_value) {
+		if(typeof _value == 'string' && isNaN(_value)) {
+			_value = Date.parse(_value);
+		}
+		this.value = _value;
+
+		// JS dates use milliseconds
+		this.date.setTime(parseInt(_value)*1000);
+		var display = this.date.toString();
+
+		// TODO: Use user's preference, not browser's locale
+		switch(this.type) {
+			case "date":
+				display = this.date.toLocaleDateString();
+				break;
+			case "date-timeonly":
+				display = this.date.toLocaleTimeString();
+				break;
+			case "date-time":
+				display = this.date.toLocaleString();
+				break;
+		}
+		this._super.apply(this, [display]);
+	}
+});
+
+et2_register_widget(et2_date, ["date", "date-time", "date-timeonly"]);
+
+/**
+ * et2_date_ro is the dummy readonly implementation of the date widget.
+ */
+var et2_date_ro = et2_valueWidget.extend({
+
+	/**
+	 * Ignore all more advanced attributes.
+	 */
+	attributes: {
+		"value": {
+			"type": "integer"
+		},
+		"type": {
+			"ignore": false
+		}
+	},
+
+	/**
+	 * Internal container for working easily with dates
+	 */
+	date: new Date(),
+
+	init: function() {
+		this._super.apply(this, arguments);
+
+		this.value = "";
+		this.span = $j(document.createElement("time"))
+			.addClass("et2_date_ro");
+
+		this.setDOMNode(this.span[0]);
+	},
+
+	set_value: function(_value) {
+		this.value = _value;
+
+		// JS dates use milliseconds
+		this.date.setTime(parseInt(_value)*1000);
+		var display = this.date.toString();
+
+		// TODO: Use user's preference, not browser's locale
+		switch(this.type) {
+			case "date":
+				display = this.date.toLocaleDateString();
+				break;
+			case "time":
+				display = this.date.toLocaleTimeString();
+				break;
+			case "date-time":
+				display = this.date.toLocaleString();
+				break;
+		}
+		this.span.attr("datetime", this.date.toUTCString()).text(display);
+	}
+
+});
+
+et2_register_widget(et2_date_ro, ["date_ro", "date-time_ro"]);
+

etemplate/js/et2_selectbox.js

@@ -151,7 +151,7 @@ var et2_selectbox = et2_inputWidget.extend({
 et2_register_widget(et2_selectbox, ["menupopup", "listbox", "select-cat",
 	"select-account", "select-percent", 'select-priority', 'select-access',
 	'select-country', 'select-state', 'select-year', 'select-month',
-	'select-day', 'select-dow', 'select-hour', 'select-number', 'select-app',
+	'select-day', 'select-dow', 'select-hour', 'date-houronly', 'select-number', 'select-app',
 	'select-lang', 'select-bool', 'select-timezone' ]);
 
 /**

etemplate/js/etemplate2.js

@@ -23,6 +23,7 @@
 	et2_selectbox;
 	et2_checkbox;
 	et2_radiobox;
+	et2_date;
 	et2_styles;
 	et2_html;
 	et2_tabs;

etemplate/js/test/et2_test_date.xet

@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!-- $Id$ -->
+<overlay>
+	<template id="test.date_time" template="" lang="" group="0" version="">
+		<vbox cols="1" label="Date / Time widgets" rows="1">
+			<date blur="blur" label="Plain date" id="date"/>
+			<date-time label="Date+Time" id="date_time"/>
+			<date-timeonly label="Time" id="time"/>
+			<date-houronly label="Hour" id="hour"/>
+			<date-duration label="Duration" id="duration"/>
+			<date-since label="Time since" id="time_since"/>
+			<date label="Read only date" id="ro_date" readonly="true"/>
+			<date-time label="Read only date+time" id="ro_date_time" readonly="true"/>
+		</vbox>
+	</template>
+</overlay>

etemplate/js/test/et2_test_dates.json

@@ -0,0 +1,11 @@
+var d = new Date();
+var date = Math.round(d.valueOf() / 1000);
+var date_test_data = {
+	content: {
+		"date":	date,
+		"date_time":date,
+		"time":date,
+		"ro_date": date,
+		"ro_date_time": date
+	}
+}

etemplate/js/test/test_xml.html

@@ -26,6 +26,7 @@
 		<script src="../et2_styles.js"></script>
 		<script src="../et2_html.js"></script>
 		<script src="../et2_hrule.js"></script>
+		<script src="../et2_date.js"></script>
 
 		<script src="../etemplate2.js"></script>
 
@@ -37,6 +38,7 @@
 
 		<script src="et2_test_timesheet_edit.json"></script>
 		<script src="et2_test_expressions.json"></script>
+		<script src="et2_test_dates.json"></script>
 		<link rel="StyleSheet" type="text/css" href="./test.css" />
 
 		<style>
@@ -61,6 +63,7 @@
 			<a href="#" onclick="open_xet('et2_test_textbox.xet');">Textbox test</a>
 			<a href="#" onclick="open_xet('et2_test_description.xet');">Description test</a>
 			<a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
+			<a href="#" onclick="open_xet('et2_test_date.xet',date_test_data);">Date/Time widgits</a>
 			<a href="#" onclick="open_xet('et2_test_expressions.xet', expression_test_data);">Expression test</a>
 			<a href="#" onclick="open_xet('et2_test_hbox.xet');">HBox test</a>
 			<a href="#" onclick="open_xet('et2_test_label.xet');">Label test</a>