forked from amsul/pickadate.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
179 lines (127 loc) · 11.1 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!doctype html>
<meta charset="utf-8">
<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>pickadate.js</title>
<link rel="shortcut icon" href="demo/images/favicon.ico">
<link rel="stylesheet" href="demo/styles/css/main.css">
<link rel="stylesheet" href="lib/themes/default.css" id="theme_base">
<link rel="stylesheet" href="lib/themes/default.date.css" id="theme_date">
<link rel="stylesheet" href="lib/themes/default.time.css" id="theme_time">
<!--[if lt IE 9]>
<script>document.createElement('section')</script>
<![endif]-->
<body>
<header class="section section--header section--splash">
<div class="section__block section__block--scoped">
<nav class="menu menu--header page-target" id="menu">
<ul class="menu__list menu__list--header">
<li class="menu__item menu__item--touch menu__item--logo"><a class="menu__link menu__link--dimmed" href="index.htm"><span class="logocon"><span class="logocon__p">p</span><span class="logocon__u"></span></span></a></li>
<li class="menu__item menu__item--touch menu__item--toggle">
<a class="menu__link menu__link--dimmed page-target__display" href="#menu"><span class="page-target__toggle"></span></a>
<a class="menu__link menu__link--dimmed page-target__display--flip" href="#"><span class="page-target__toggle"></span></a>
</li>
<li class="menu__item menu__item--clear"></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="date.htm">Date picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="time.htm">Time picker</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="api.htm">API</a></li>
<li class="menu__item menu__item--responsive page-target__reveal"><a class="menu__link menu__link--dimmed" href="https://github.com/amsul/pickadate.js">Github</a></li>
<li class="menu__item menu__item--responsive page-target__reveal menu__item--trail">
<span class="menu__link">Themes: <input class="theme-toggle__input" type="radio" id="show_theme_default" name="show_theme" value="default" checked hidden><label class="theme-toggle__label theme-toggle__label--first" for="show_theme_default">default</label><input class="theme-toggle__input" type="radio" id="show_theme_classic" name="show_theme" value="classic" hidden><label class="theme-toggle__label theme-toggle__label--last" for="show_theme_classic" class="checked-negative">classic</label></span>
</li>
</ul>
</nav>
</div> <!-- .section__block -->
<div class="section__block text-center">
<h1 class="heading heading--splash"><img src="demo/images/logo.png" alt="pickadate.js" width="478" height="90"></h1>
<h2 class="heading heading--thin">The mobile-friendly, responsive, and lightweight<br>jQuery date <span class="ampersand">&</span> time input picker.</h2>
<h3 class="heading heading--thin"><a class="button" href="https://github.com/amsul/pickadate.js/archive/3.5.4.zip">Download pickadate.js v3.5.4</a></h3>
<div class="groupset groupset--splash">
<span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="145" height="30"></iframe></span>
<span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="135" height="30"></iframe></span>
</div>
</div> <!-- .section__block -->
</header> <!-- .section -->
<section class="section">
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide heading--divide-first"><span class="heading__text">Demo<a class="heading__anchor" name="demo" href="#demo">§</a></span></h2>
<pre class="pre--demo"><code data-language="javascript">// The date picker (<a href="date.htm">read the docs</a>)
$('.datepicker').pickadate()</code></pre>
<fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__datepicker" type="text" placeholder="Try me…"></div></fieldset>
<pre class="pre--demo"><code data-language="javascript">// The time picker (<a href="time.htm">read the docs</a>)
$('.timepicker').pickatime()</code></pre>
<fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__timepicker" type="text" placeholder="Try me…"></div></fieldset>
<div class="heading--three">
<p>There’s a tonne of options to customize the <a href="date.htm">date</a> and <a href="time.htm">time</a> pickers, such as month/year selectors, time intervals, etc.</p>
<p>There’s also a rich <a href="api.htm">API</a> to extend the functionality of the picker. Some examples are <a href="http://codepen.io/collection/vLcih">displayed on Codepen</a>.</p>
</div>
<div class="section__block section__block--notification">
<p>When using the “classic” theme, it is important to have a wrapper <code>div</code> with <code>position: relative</code> around the source <code>input</code> to ensure the picker is sized according to the <code>input</code> element it is bound to.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Features<a class="heading__anchor" name="features" href="#features">§</a></span></h2>
<div class="heading--three">
<ul class="list list--checked">
<li>Supports <a href="http://jquery.com">jQuery</a> 1.7 and up.</li>
<li>Is ARIA-enabled to be WCAG 2.0 compliant. <small class="text-dimmed">(added in v3.4)</small></li>
<li>Leaves a tiny footprint of 6kb JS and 2kb CSS. <small class="text-dimmed">(minified and gzipped)</small></li>
<li>Comes with translations for 40 languages.</li>
<li>Has touch & keyboard friendliness.</li>
<li>Follows <a href="http://bem.info/">BEM</a> style class naming.</li>
<li>Utilizes <a href="http://lesscss.org/">LESS</a> based stylesheets.</li>
<li>Includes a <a href="http://gruntjs.com/">Grunt</a> based build system.</li>
</ul>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Browser Support<a class="heading__anchor" name="browser-support" href="#browser-support">§</a></span></h2>
<p class="heading--three">Supports all modern browsers – and IE8+.</p>
<p>Specifically, v3 has been tested with <a href="https://www.google.com/chrome/">Chrome</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.mozilla.org/firefox/">Firefox</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.opera.com/">Opera</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.apple.com/ca/safari/">Safari</a> <small class="text-dimmed text-tiny">Mi</small>, <a href="http://windows.microsoft.com/ie/">Internet Explorer</a> <small class="text-dimmed text-tiny">W</small>, <a href="http://www.blackberry.com/">Blackberry</a> 6.0+ and <a href="http://www.android.com/">Android</a> 3.2+ browsers.</p>
<small class="text-dimmed text-tiny">
<p>M = Mac, W = Windows, A = Android, i = iOS</p>
</small>
<div class="section__block section__block--notification">
<p>Make sure to also include the <code>legacy.js</code> file along for the oldie browsers.</p>
</div>
</div> <!-- .section__block -->
<div class="section__block section__block--scoped">
<h2 class="heading heading--one heading--divide"><span class="heading__text">Community<a class="heading__anchor" name="community" href="#community">§</a></span></h2>
<p class="heading--three"><i><b>pickadate</b>.js</i> is an open source project, shared under an <a href="">MIT license</a>. All <a href="https://github.com/amsul/pickadate.js">code</a> and <a href="https://github.com/amsul/pickadate.js/issues">discussions</a> are hosted on Github.</p>
<p>Contributions are very welcome – <a href="https://github.com/amsul/pickadate.js/blob/gh-pages/CONTRIBUTING.md">please read these pointers</a> before submitting a bug report or feature request.</p>
<p>If you find this library useful and would like to see further development, consider <a href="http://selz.co/1g80kCZ">supporting it</a>.</p>
</div> <!-- .section__block -->
</section> <!-- .section -->
<footer class="section section--footer">
<div class="section__block section__block--scoped text-center">
<h2 class="heading heading--one heading--divide-center"><span class="heading__text peace">✌</span></h2>
<p class="heading heading--three heading--thin">Made by <a href="http://twitter.com/amsul_">Amsul</a></p>
<p>Code licensed under <a href="http://amsul.ca/MIT">MIT</a></p>
<div class="text-tiny text-dimmed">
<p>Pattern from <a href="http://subtlepatterns.com/">Subtle Patterns</a> • Syntax highlighting with <a href="http://craig.is/making/rainbows">Rainbow.js</a></p>
<p><a href="http://selz.co/1g80kCZ">Share some ♥</a></p>
</div>
</div> <!-- .section__block -->
</footer> <!-- .section -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery||document.write('<script src="tests/jquery.2.0.0.js"><\/script>')</script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="lib/legacy.js"></script>
<script src="demo/scripts/demo.js"></script>
<script src="demo/scripts/rainbow.js"></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>
</body>