datepicker/index.html at master · bimiorg/datepicker · GitHub

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
<!--
	Datepicker Widget by Micah Andersen <micah@bimi.org>
	Based on:
	Javascript Datepicker by Corion <corion@corion.net>
	Released under the Artistic License

	Additions:
		-This disclaimer
		-Browser capability check for native datepicker
			-includes webkit datepicker stylesheet OR
			-includes the datepicker script
		-More date boxes
		-Lorem Ipsum text & Usage descriptions
	Modifications:
		-Dateboxes are now just date <input>s
	Deletions:
		-all 'content' - this is now just a test page
		-any local script or inline CSS not listed above
-->
<html>
<head>
<title>CSS / JavaScript date picker</title>
<script type="text/javascript">
    var datefield=document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load datepicker
        document.write("<script type='text/javascript' src='datepicker.js'><\/script>\n");
    }else{
		document.write("<link rel='stylesheet' type='text/css' href='datepicker_webkit.css'/>\n");
	}
</script>
</head>
<body>
<h1>Datepicker Live Demo</h1>
<p>This first set of datepickers use the <u>automatic attachment method</u>. Remember, the goal is to <i>emulate HTML5 date inputs for older browsers</i>, <b>not replace native datepickers in newer browsers</b>! That means that if your browsers supports native date inputs, you will see those, and this demo page will not help you much. :) <b>To see the code in action, try IE 6 or IE 11.</b> :P</p>
Date picker #1:
<input type="date" value="2003-11-08"><input type="date"><input type="date" value="2020-11-08">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br/> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Date picker #2, moved over :
<span>
<input name="date" value="2002-1-26">
<a href="#" onclick="javascript:show_datepicker_widget(this);">...</a>
</span>
<p>The datepicker above uses the <u>manual attachment method</u> (manually inserting an onclick handler on the link). This is included because it was in the original version (it was the only way) and it may still be useful for those who wish to support REALLY old Firefox browsers (e.g. 3.6). <b>If your browser supports native date inputs (e.g. Firefox 57, Edge, or Chrome 20+), the '...' button will not function</b>, as the datepicker code is not automatically loaded on those browsers.</p>


</body>
</html>