style/ui/widget-datetime.js.u8

function WidgetDateTime (c) {
  c.widgetDateTime = this;
  this.container = c;
  this.name = c.getAttribute ('data-widget-name') || '';
  this.timezone = c.getAttribute ('data-widget-timezone') || '';
  this.required = c.getAttribute ('data-widget-required') != null;
  this._initialize ();
} // WidgetDateTime

WidgetDateTime.prototype._initialize = function () {
  var controls = this.container.getElementsByTagName ('*');
  var controlsL = controls.length;
  for (var i = 0; i < controlsL; i++) {
    var control = controls[i];
    var controlName = control.name;
    if (!controlName) continue;
    if (controlName.substring (0, this.name.length + 1) == this.name + '-') {
      var fieldName = controlName.substring (this.name.length + 1);
      if (fieldName == 'year') {
        this.initialYear = control.value || 1970;
        this.defaultYear = control.defaultValue || this.initialYear;
        this.yearInput = control;
      } else if (fieldName == 'month') {
        this.initialMonth = control.value || 1;
        this.defaultMonth = control.defaultValue || this.initialMonth;
        this.monthInput = control;
      } else if (fieldName == 'day') {
        this.initialDay = control.value || 1;
        this.defaultDay = control.defaultValue || this.initialDay;
        this.dayInput = control;
      } else if (fieldName == 'hour') {
        this.initialHour = control.value || 0;
        this.defaultHour = control.defaultValue || this.initialHour;
        this.hourInput = control;
      } else if (fieldName == 'minute') {
        this.initialMinute = control.value || 1;
        this.defaultMinute = control.defaultValue || this.initialMinute;
        this.minuteInput = control;
      } else if (fieldName == 'second') {
        this.initialSecond = control.value || 1;
        this.defaultSecond = control.defaultValue || this.initialSecond;
        this.secondInput = control;
      }
    }
  }

  if (!WidgetDateTime.supported) return;

  var def = this._localDateAndTimeString
      (this.defaultYear, this.defaultMonth, this.defaultDay,
       this.defaultHour, this.defaultMinute, this.defaultSecond);
  var initial = this._localDateAndTimeString
      (this.initialYear, this.initialMonth, this.initialDay,
       this.initialHour, this.initialMinute, this.initialSecond);

  if (this.timezone && this.timezone != 'Z') {
    /* Opera 9.61 (and WF2) does not support non-Z timezones. */

    var offset = 0;
    var m;
    if (m = this.timezone.match (/^([+-])([0-9][0-9]):([0-9][0-9])$/)) {
      offset = parseInt (m[2]) * 60 + parseInt (m[3]);
      if (m[1] == '-') offset = -offset;
      offset *= 60 * 1000;
    }

    var input = document.createElement ('input');
    input.type = 'datetime';

    input.value = def + 'Z';
    input.setAttribute ('value', def);
    def = this._dateToLocalDateAndTimeString
        (new Date (input.valueAsNumber - offset));

    input.value = initial + 'Z';
    initial = this._dateToLocalDateAndTimeString
        (new Date (input.valueAsNumber - offset));
  }

  var input = document.createElement ('input');
  input.type = this.timezone == '' ? 'datetime-local' : 'datetime';
  input.name = this.name;
  input.defaultValue = def + (this.timezone == '' ? '' : 'Z');
  input.value = initial + (this.timezone == '' ? '' : 'Z');
  if (this.required) input.setAttribute ('required', '');
  this.container.innerHTML = '';
  this.container.appendChild (input);
  this.dateTimeInput = input;
}; // _initialize

WidgetDateTime.prototype._localDateAndTimeString
    = function (y, m, d, h, mi, s) {
  var r = (y || 1970);
  if (r.length < 4) {
    r = ("0000" + r).slice (-4);
  }
  r += '-' + ("0" + (m || 1)).slice (-2);
  r += '-' + ("0" + (d || 1)).slice (-2);
  r += 'T' + ("0" + (h || 0)).slice (-2);
  r += ':' + ("0" + (mi || 0)).slice (-2);
  r += ':' + ("0" + (s || 0)).slice (-2);
  return r;
}; // _localDateAndTimeString

WidgetDateTime.prototype._dateToLocalDateAndTimeString = function (date) {
  /* Opera 9.61 does not reflect <input type=datetime>.valueAsDate to
     value, so it cannot be used to obtain global date and time string. */
  var r = '';
  r = date.getUTCFullYear (); // JS does not support years 0001-0999
  r += '-' + ('0' + (date.getUTCMonth () + 1)).slice (-2);
  r += '-' + ('0' + date.getUTCDate ()).slice (-2);
  r += 'T' + ('0' + date.getUTCHours ()).slice (-2);
  r += ':' + ('0' + date.getUTCMinutes ()).slice (-2);
  r += ':' + ('0' + date.getUTCSeconds ()).slice (-2);
  r += '.' + (date.getUTCMilliseconds () + '00').slice (2);
  return r;
}; // _dateToLocalDateAndTimeString

/* NOTE: Opera 9.61 shows <input type=datetime> as UTC whatever the user's
   timezone is. */

WidgetDateTime.prototype.setDate = function (date) {
  if (this.dateTimeInput) {
    this.dateTimeInput.value = this._dateToLocalDateAndTimeString (date);
  } else {
    if (this.yearInput) this.yearInput.value = date.getFullYear();
    if (this.monthInput) this.monthInput.value = date.getMonth() + 1;
    if (this.dayInput) this.dayInput.value = date.getDate();
    if (this.hourInput) this.hourInput.value = date.getHours();
    if (this.minuteInput) this.minuteInput.value = date.getMinutes();
    if (this.secondInput) this.secondInput.value = date.getSeconds();
  }
}; // setDate

(function () {
  var input = document.createElement ('input');
  input.setAttribute ('type', 'datetime');
  WidgetDateTime.supported = input.type == 'datetime';
})();

if (window.WidgetDateTimeOnLoad) WidgetDateTimeOnLoad ();


/*

Usage:

  <script src="http://suika.fam.cx/www/style/ui/widget-datetime.js.u8" charset=utf-8></script>
  <script>
    window.onload = function () {
      new WidgetDateTime (document.getElementById ('c'));
    }; // onload
  </script>

  <p><span id=c data-widget-name=test>
  <input type=text name=test-year value=2000 size=4> /
  <input type=text name=test-month value=10 size=2> /
  <input type=text name=test-day value=10 size=2>
  <input type=text name=test-hour value=6 size=2> :
  <input type=text name=test-minute value=5 size=2> :
  <input type=text name=test-second value=4 size=2>
  </span>

The content of the container element (i.e. span#c in this example) is
used when <input type=datetime[-local]> control is not supported.  The
content is replaced by a <input type=datetime[-local]> control if it
is supported.

You can use any form control and any other content, in any order, as
long as control's name ends with suffix such as "-year", "-month",
..., or "-second" and whose DOM interface has |value| DOM attribute.
You can omit some of controls (e.g. "-second") if desired.

The |data-widget-name| attribute of the container element represents
the control name.  This attribute is REQUIRED.  It must be used as
prefix of controls in the content.  The value of this attribute is
used as the |name| attribute of the <input type=datetime[-local]>
element.

The |data-widget-timezone| attribute of the container element
represents the timezone of the values used by controls in the content.
The value must be "Z" or a string that matches
/^[+-]([0-1][0-9]|2[0-3]):[0-5][0-9]$/.  If this attribute is
specified, an <input type=datetime> control is used.  Otherwise, an
<input type=datetime-local> control is used.

Latest version of this script is available at
<http://suika.fam.cx/www/style/ui/widget-datetime.js.u8>.  Old
versions of this script are available from
<http://suika.fam.cx/www/style/ui/widget-datetime.js.u8,cvslog>.

*/

/* ***** BEGIN LICENSE BLOCK *****
 * Copyright 2008 Wakaba <[email protected]>.  All rights reserved.
 *
 * This program is free software; you can redistribute it and/or 
 * modify it under the same terms as Perl itself.
 *
 * Alternatively, the contents of this file may be used 
 * under the following terms (the "MPL/GPL/LGPL"), 
 * in which case the provisions of the MPL/GPL/LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of the MPL/GPL/LGPL, and not to allow others to
 * use your version of this file under the terms of the Perl, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the MPL/GPL/LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the Perl or the MPL/GPL/LGPL.
 *
 * "MPL/GPL/LGPL":
 *
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * <http://www.mozilla.org/MPL/>
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is WidgetDateTime code.
 *
 * The Initial Developer of the Original Code is Wakaba.
 * Portions created by the Initial Developer are Copyright (C) 2008
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *   Wakaba <[email protected]>
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the LGPL or the GPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */
1	function WidgetDateTime (c) {
2	c.widgetDateTime = this;
3	this.container = c;
4	this.name = c.getAttribute ('data-widget-name') \|\| '';
5	this.timezone = c.getAttribute ('data-widget-timezone') \|\| '';
6	this.required = c.getAttribute ('data-widget-required') != null;
7	this._initialize ();
8	} // WidgetDateTime
9
10	WidgetDateTime.prototype._initialize = function () {
11	var controls = this.container.getElementsByTagName ('*');
12	var controlsL = controls.length;
13	for (var i = 0; i < controlsL; i++) {
14	var control = controls[i];
15	var controlName = control.name;
16	if (!controlName) continue;
17	if (controlName.substring (0, this.name.length + 1) == this.name + '-') {
18	var fieldName = controlName.substring (this.name.length + 1);
19	if (fieldName == 'year') {
20	this.initialYear = control.value \|\| 1970;
21	this.defaultYear = control.defaultValue \|\| this.initialYear;
22	this.yearInput = control;
23	} else if (fieldName == 'month') {
24	this.initialMonth = control.value \|\| 1;
25	this.defaultMonth = control.defaultValue \|\| this.initialMonth;
26	this.monthInput = control;
27	} else if (fieldName == 'day') {
28	this.initialDay = control.value \|\| 1;
29	this.defaultDay = control.defaultValue \|\| this.initialDay;
30	this.dayInput = control;
31	} else if (fieldName == 'hour') {
32	this.initialHour = control.value \|\| 0;
33	this.defaultHour = control.defaultValue \|\| this.initialHour;
34	this.hourInput = control;
35	} else if (fieldName == 'minute') {
36	this.initialMinute = control.value \|\| 1;
37	this.defaultMinute = control.defaultValue \|\| this.initialMinute;
38	this.minuteInput = control;
39	} else if (fieldName == 'second') {
40	this.initialSecond = control.value \|\| 1;
41	this.defaultSecond = control.defaultValue \|\| this.initialSecond;
42	this.secondInput = control;
43	}
44	}
45	}
46
47	if (!WidgetDateTime.supported) return;
48
49	var def = this._localDateAndTimeString
50	(this.defaultYear, this.defaultMonth, this.defaultDay,
51	this.defaultHour, this.defaultMinute, this.defaultSecond);
52	var initial = this._localDateAndTimeString
53	(this.initialYear, this.initialMonth, this.initialDay,
54	this.initialHour, this.initialMinute, this.initialSecond);
55
56	if (this.timezone && this.timezone != 'Z') {
57	/* Opera 9.61 (and WF2) does not support non-Z timezones. */
58
59	var offset = 0;
60	var m;
61	if (m = this.timezone.match (/^([+-])([0-9][0-9]):([0-9][0-9])$/)) {
62	offset = parseInt (m[2]) * 60 + parseInt (m[3]);
63	if (m[1] == '-') offset = -offset;
64	offset = 60 1000;
65	}
66
67	var input = document.createElement ('input');
68	input.type = 'datetime';
69
70	input.value = def + 'Z';
71	input.setAttribute ('value', def);
72	def = this._dateToLocalDateAndTimeString
73	(new Date (input.valueAsNumber - offset));
74
75	input.value = initial + 'Z';
76	initial = this._dateToLocalDateAndTimeString
77	(new Date (input.valueAsNumber - offset));
78	}
79
80	var input = document.createElement ('input');
81	input.type = this.timezone == '' ? 'datetime-local' : 'datetime';
82	input.name = this.name;
83	input.defaultValue = def + (this.timezone == '' ? '' : 'Z');
84	input.value = initial + (this.timezone == '' ? '' : 'Z');
85	if (this.required) input.setAttribute ('required', '');
86	this.container.innerHTML = '';
87	this.container.appendChild (input);
88	this.dateTimeInput = input;
89	}; // _initialize
90
91	WidgetDateTime.prototype._localDateAndTimeString
92	= function (y, m, d, h, mi, s) {
93	var r = (y \|\| 1970);
94	if (r.length < 4) {
95	r = ("0000" + r).slice (-4);
96	}
97	r += '-' + ("0" + (m \|\| 1)).slice (-2);
98	r += '-' + ("0" + (d \|\| 1)).slice (-2);
99	r += 'T' + ("0" + (h \|\| 0)).slice (-2);
100	r += ':' + ("0" + (mi \|\| 0)).slice (-2);
101	r += ':' + ("0" + (s \|\| 0)).slice (-2);
102	return r;
103	}; // _localDateAndTimeString
104
105	WidgetDateTime.prototype._dateToLocalDateAndTimeString = function (date) {
106	/* Opera 9.61 does not reflect <input type=datetime>.valueAsDate to
107	value, so it cannot be used to obtain global date and time string. */
108	var r = '';
109	r = date.getUTCFullYear (); // JS does not support years 0001-0999
110	r += '-' + ('0' + (date.getUTCMonth () + 1)).slice (-2);
111	r += '-' + ('0' + date.getUTCDate ()).slice (-2);
112	r += 'T' + ('0' + date.getUTCHours ()).slice (-2);
113	r += ':' + ('0' + date.getUTCMinutes ()).slice (-2);
114	r += ':' + ('0' + date.getUTCSeconds ()).slice (-2);
115	r += '.' + (date.getUTCMilliseconds () + '00').slice (2);
116	return r;
117	}; // _dateToLocalDateAndTimeString
118
119	/* NOTE: Opera 9.61 shows <input type=datetime> as UTC whatever the user's
120	timezone is. */
121
122	WidgetDateTime.prototype.setDate = function (date) {
123	if (this.dateTimeInput) {
124	this.dateTimeInput.value = this._dateToLocalDateAndTimeString (date);
125	} else {
126	if (this.yearInput) this.yearInput.value = date.getFullYear();
127	if (this.monthInput) this.monthInput.value = date.getMonth() + 1;
128	if (this.dayInput) this.dayInput.value = date.getDate();
129	if (this.hourInput) this.hourInput.value = date.getHours();
130	if (this.minuteInput) this.minuteInput.value = date.getMinutes();
131	if (this.secondInput) this.secondInput.value = date.getSeconds();
132	}
133	}; // setDate
134
135	(function () {
136	var input = document.createElement ('input');
137	input.setAttribute ('type', 'datetime');
138	WidgetDateTime.supported = input.type == 'datetime';
139	})();
140
141	if (window.WidgetDateTimeOnLoad) WidgetDateTimeOnLoad ();
142
143
144	/*
145
146	Usage:
147
148	<script src="http://suika.fam.cx/www/style/ui/widget-datetime.js.u8" charset=utf-8></script>
149	<script>
150	window.onload = function () {
151	new WidgetDateTime (document.getElementById ('c'));
152	}; // onload
153	</script>
154
155	<p><span id=c data-widget-name=test>
156	<input type=text name=test-year value=2000 size=4> /
157	<input type=text name=test-month value=10 size=2> /
158	<input type=text name=test-day value=10 size=2>
159	<input type=text name=test-hour value=6 size=2> :
160	<input type=text name=test-minute value=5 size=2> :
161	<input type=text name=test-second value=4 size=2>
162	</span>
163
164	The content of the container element (i.e. span#c in this example) is
165	used when <input type=datetime[-local]> control is not supported. The
166	content is replaced by a <input type=datetime[-local]> control if it
167	is supported.
168
169	You can use any form control and any other content, in any order, as
170	long as control's name ends with suffix such as "-year", "-month",
171	..., or "-second" and whose DOM interface has \|value\| DOM attribute.
172	You can omit some of controls (e.g. "-second") if desired.
173
174	The \|data-widget-name\| attribute of the container element represents
175	the control name. This attribute is REQUIRED. It must be used as
176	prefix of controls in the content. The value of this attribute is
177	used as the \|name\| attribute of the <input type=datetime[-local]>
178	element.
179
180	The \|data-widget-timezone\| attribute of the container element
181	represents the timezone of the values used by controls in the content.
182	The value must be "Z" or a string that matches
183	/^[+-]([0-1][0-9]\|2[0-3]):[0-5][0-9]$/. If this attribute is
184	specified, an <input type=datetime> control is used. Otherwise, an
185	<input type=datetime-local> control is used.
186
187	Latest version of this script is available at
188	<http://suika.fam.cx/www/style/ui/widget-datetime.js.u8>. Old
189	versions of this script are available from
190	<http://suika.fam.cx/www/style/ui/widget-datetime.js.u8,cvslog>.
191
192	*/
193
194	/* *** BEGIN LICENSE BLOCK ***
195	* Copyright 2008 Wakaba <[email protected]>. All rights reserved.
196	*
197	* This program is free software; you can redistribute it and/or
198	* modify it under the same terms as Perl itself.
199	*
200	* Alternatively, the contents of this file may be used
201	* under the following terms (the "MPL/GPL/LGPL"),
202	* in which case the provisions of the MPL/GPL/LGPL are applicable instead
203	* of those above. If you wish to allow use of your version of this file only
204	* under the terms of the MPL/GPL/LGPL, and not to allow others to
205	* use your version of this file under the terms of the Perl, indicate your
206	* decision by deleting the provisions above and replace them with the notice
207	* and other provisions required by the MPL/GPL/LGPL. If you do not delete
208	* the provisions above, a recipient may use your version of this file under
209	* the terms of any one of the Perl or the MPL/GPL/LGPL.
210	*
211	* "MPL/GPL/LGPL":
212	*
213	* Version: MPL 1.1/GPL 2.0/LGPL 2.1
214	*
215	* The contents of this file are subject to the Mozilla Public License Version
216	* 1.1 (the "License"); you may not use this file except in compliance with
217	* the License. You may obtain a copy of the License at
218	* <http://www.mozilla.org/MPL/>
219	*
220	* Software distributed under the License is distributed on an "AS IS" basis,
221	* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
222	* for the specific language governing rights and limitations under the
223	* License.
224	*
225	* The Original Code is WidgetDateTime code.
226	*
227	* The Initial Developer of the Original Code is Wakaba.
228	* Portions created by the Initial Developer are Copyright (C) 2008
229	* the Initial Developer. All Rights Reserved.
230	*
231	* Contributor(s):
232	* Wakaba <[email protected]>
233	*
234	* Alternatively, the contents of this file may be used under the terms of
235	* either the GNU General Public License Version 2 or later (the "GPL"), or
236	* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
237	* in which case the provisions of the GPL or the LGPL are applicable instead
238	* of those above. If you wish to allow use of your version of this file only
239	* under the terms of either the GPL or the LGPL, and not to allow others to
240	* use your version of this file under the terms of the MPL, indicate your
241	* decision by deleting the provisions above and replace them with the notice
242	* and other provisions required by the LGPL or the GPL. If you do not delete
243	* the provisions above, a recipient may use your version of this file under
244	* the terms of any one of the MPL, the GPL or the LGPL.
245	*
246	* *** END LICENSE BLOCK *** */