forked from amsul/pickadate.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
129 lines (83 loc) · 4.81 KB
/
index.htm
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
<!doctype html>
<meta name="viewport" content="width=device-width,maximum-scale=1">
<title>Pickadate.js</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="pickadate.css">
<section class="holder holder-top holder-clean">
<h1><strong title="Pick a Date" class="underline-highlight">pickadate.js</strong></h1>
<h2>A responsive and lightweight<br>jQuery dateinput picker <small>(<a title="Documentation" href="docs.htm">read the docs</a>)</small></h2>
<h3>Weighs 7.94kb (3.3kb gzipped) <small class="dimmed"><small><small><small>– whereas jQuery UI datepicker is 30kb minified</small></small></small></small></h3>
<a href="https://github.com/amsul/pickadate.js"><img width="124" height="124" style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<fieldset>
<h3><label for="input_01">Pick a date. Go ahead...</label></h3>
<input id="input_01" class="datepicker" type="text">
</fieldset>
<p>As easy as: <code>$( '.datepicker' ).pickadate()</code></p>
</section>
<section class="holder holder-clean aligncenter">
<p><a class="button-full" href="https://github.com/amsul/pickadate.js/archive/gh-pages.zip">Download pickadate.js</a></p>
<small class="dimmed"><p>Browser support: IE9+, Chrome, Firefox, Safari 3+, Opera 9.5+, iOS Safari, Android browser</p></small>
<p><a href="docs.htm">Read the docs</a> or <a href="https://github.com/amsul/pickadate.js">view it on Github</a></p>
</section>
<section class="holder holder-clean">
<fieldset>
<h3><label for="input_02">Here's one with the date already filled in:</label></h3>
<input id="input_02" class="datepicker" type="text" value="14 August, 2012">
</fieldset>
<fieldset>
<h3><label for="input_03">Use the scary* <code>type="date"</code>:</label></h3>
<input id="input_03" type="date" value="31 October, 2012">
</fieldset>
<fieldset>
<h3><label for="input_04">Or, the friendly** <code>type="text"</code>:</label></h3>
<input id="input_04" class="datepicker" type="text" value="25 December, 2012">
</fieldset>
<fieldset>
<h3><label for="input_05">Did I mention it's excitingly lightweight?</label></h3>
<input id="input_05" class="datepicker" type="text" value="1 January, 2013">
</fieldset>
<fieldset>
<h3><label for="input_06">You're in love with it now, aren't you?</label></h3>
<input id="input_06" class="datepicker" type="text" value="14 February, 2013">
</fieldset>
<fieldset>
<h3><label for="input_07">I'm actually pretty unique.</label></h3>
<input id="input_07" class="datepicker" type="text" value="29 February, 2016">
</fieldset>
<fieldset>
<h3><label for="input_08">Others will fool you into believing they're cool.</label></h3>
<input id="input_08" class="datepicker" type="text" value="1 April, 2013">
</fieldset>
<fieldset>
<h3><label for="input_09">But honestly, who's the coolest around the house?</label></h3>
<input id="input_09" class="datepicker" type="text" value="12 May, 2013">
</fieldset>
</section>
<section class="holder aligncenter">
<p><a class="button-full" href="https://github.com/amsul/pickadate.js/archive/gh-pages.zip">Download pickadate.js</a></p>
<small class="dimmed"><p>Browser support: IE9+, Chrome, Firefox, Safari 3+, Opera 9.5+, iOS Safari, Android browser</p></small>
<p><a href="docs.htm">Read the docs</a> or <a href="https://github.com/amsul/pickadate.js">view it on Github</a></p>
</section>
<section class="holder holder-clean">
<small class="dimmed">
<p>* Scary, because there's a tiny height change on page load for <i>some</i> browsers. That's because the input element is changed from <code>type="date"</code> to <code>type="text"</code> to remove the default browser stylings.</p>
<p>** Friendly, because.. well everyone loves Santa :)</p>
</small>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="pickadate.js"></script>
<script type="text/javascript">
$( '[type=date], .datepicker' ).pickadate()
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36321179-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>