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	wakaba	1.1	function WidgetDateTime (c) {
2	wakaba	1.2	c.widgetDateTime = this;
3	wakaba	1.1	this.container = c;
4			this.name = c.getAttribute ('data-widget-name') \|\| '';
5			this.timezone = c.getAttribute ('data-widget-timezone') \|\| '';
6	wakaba	1.2	this.required = c.getAttribute ('data-widget-required') != null;
7	wakaba	1.1	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	wakaba	1.2	this.yearInput = control;
23	wakaba	1.1	} else if (fieldName == 'month') {
24			this.initialMonth = control.value \|\| 1;
25			this.defaultMonth = control.defaultValue \|\| this.initialMonth;
26	wakaba	1.2	this.monthInput = control;
27	wakaba	1.1	} else if (fieldName == 'day') {
28			this.initialDay = control.value \|\| 1;
29			this.defaultDay = control.defaultValue \|\| this.initialDay;
30	wakaba	1.2	this.dayInput = control;
31	wakaba	1.1	} else if (fieldName == 'hour') {
32			this.initialHour = control.value \|\| 0;
33			this.defaultHour = control.defaultValue \|\| this.initialHour;
34	wakaba	1.2	this.hourInput = control;
35	wakaba	1.1	} else if (fieldName == 'minute') {
36			this.initialMinute = control.value \|\| 1;
37			this.defaultMinute = control.defaultValue \|\| this.initialMinute;
38	wakaba	1.2	this.minuteInput = control;
39	wakaba	1.1	} else if (fieldName == 'second') {
40			this.initialSecond = control.value \|\| 1;
41			this.defaultSecond = control.defaultValue \|\| this.initialSecond;
42	wakaba	1.2	this.secondInput = control;
43	wakaba	1.1	}
44			}
45			}
46
47	wakaba	1.2	if (!WidgetDateTime.supported) return;
48
49	wakaba	1.1	var def = this._localDateAndTimeString
50			(this.defaultYear, this.defaultMonth, this.defaultDay,
51	wakaba	1.2	this.defaultHour, this.defaultMinute, this.defaultSecond);
52	wakaba	1.1	var initial = this._localDateAndTimeString
53			(this.initialYear, this.initialMonth, this.initialDay,
54	wakaba	1.2	this.initialHour, this.initialMinute, this.initialSecond);
55	wakaba	1.1
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	wakaba	1.2	if (this.required) input.setAttribute ('required', '');
86	wakaba	1.1	this.container.innerHTML = '';
87			this.container.appendChild (input);
88	wakaba	1.2	this.dateTimeInput = input;
89	wakaba	1.1	}; // _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	wakaba	1.2
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	wakaba	1.1
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	wakaba	1.3	* 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	wakaba	1.1	* 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	wakaba	1.3	* The Initial Developer of the Original Code is Wakaba.
228	wakaba	1.1	* 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	wakaba	1.3	* and other provisions required by the LGPL or the GPL. If you do not delete
243	wakaba	1.1	* 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 *** */