-
Notifications
You must be signed in to change notification settings - Fork 64
/
dateTime.html
137 lines (95 loc) · 4.12 KB
/
dateTime.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content=
"text/html; utf-8">
<title>HTML5 date time examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- This CSS file is not necessary to use html5Widgets -->
<link type="text/css" rel="stylesheet" href="../../shared/css/useragentmanExample.css">
<link type="text/css" rel="stylesheet" href="css/form.css" />
<!-- Needed for Forms Feature Detection -->
<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
</script>
<!-- Needed for Validation -->
<script type="text/javascript" src="../../shared/js/html5Forms.js" data-webforms2-support="date" data-webforms2-force-js-validation="true" data-lang="qq">
</script>
</head>
<body id="myExample" class="html5Widgets-debug">
<div id="exampleBlurb">
<p>The following shows the various HTML5 date/time widgets in action.
Note that at the time of this writing, Opera and some Webkit browsers are the only browser
that renders the calendars natively - all the other browsers
require <code>html5Widgets</code>. If you would like, you can
force <code>html5Widgets</code> to render the calendars even if there
is a native <code>date</code> implementation. Visit
<a href="dateTime-forceJSCalendar.html">this
example to see how it works</a> and why you may want to consider this
option.</p>
<p><a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article.</a></p>
</div>
<form method="get" action="http://www.useragentman.com/testForm.php">
<fieldset>
<legend>Internet Explorer 6 Retirement Timeline</legend>
<table class="formTable">
<tbody>
<tr>
<th>Retirement Date of IE6 in your Office: </th>
<td><input type="datetime-local" name="DateTimeLocalTest" value=
"">
<div class="description">This uses the
<code>datetime-local</code> input type
</div>
</td>
</tr>
<tr>
<th>Retirement Date of IE6 in your Company:</th>
<td><input type="datetime" name="DateTimeTest" value=
"">
<div class="description">This uses the
<code>datetime</code> input type. Note the format is
slightly different that in <code>datetime-local</code>.
</div>
</td>
</tr>
<tr>
<th>Date You Will Quit If IE6 Remains: </th>
<td><input type="date" name="DateTest" value=
"">
<div class="description">This uses the
<code>date</code> input type
</div>
</td>
</tr>
<tr>
<th>Month Your Will Give Notice: </th>
<td><input type="month" name="MonthTest" value=
"">
<div class="description">This uses the
<code>month</code> input type
</div>
</td>
</tr>
<tr>
<th>Week of Blissful Unemployment: </th>
<td><input type="week" name="WeekTest" value=
"">
<div class="description">This uses the
<code>week</code> input type
</div></td>
</tr>
<tr>
<th></th>
<td >
<input type="submit" name="submit me" value="Submit" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<div id="supports">
</div>
</body>
</html>