style/ui/widget-datetime.js.u8

function WidgetDateTime (c) {
  if (!WidgetDateTime.supported) return;
  this.container = c;
  this.name = c.getAttribute ('data-widget-name') || '';
  this.timezone = c.getAttribute ('data-widget-timezone') || '';
  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;
      } else if (fieldName == 'month') {
        this.initialMonth = control.value || 1;
        this.defaultMonth = control.defaultValue || this.initialMonth;
      } else if (fieldName == 'day') {
        this.initialDay = control.value || 1;
        this.defaultDay = control.defaultValue || this.initialDay;
      } else if (fieldName == 'hour') {
        this.initialHour = control.value || 0;
        this.defaultHour = control.defaultValue || this.initialHour;
      } else if (fieldName == 'minute') {
        this.initialMinute = control.value || 1;
        this.defaultMinute = control.defaultValue || this.initialMinute;
      } else if (fieldName == 'second') {
        this.initialSecond = control.value || 1;
        this.defaultSecond = control.defaultValue || this.initialSecond;
      }
    }
  }

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

  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');
  this.container.innerHTML = '';
  this.container.appendChild (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. */

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