Tom Huang / project

Download as
Browse Code »

Commit 5c8f10d65c5cf9c086b2b4a97027bd1b5e492398

Authored by Tom Huang
0 parents
Exists in master

start 

Signed-off-by: Tom Huang <tom_huang@sanlien.com.tw>
Showing 31 changed files with 3085 additions and 0 deletions   Show diff stats
File was created 1 ; http://EditorConfig.org
2 root = true
3
4 [*]
5 end_of_line = lf
6 charset = utf-8
7 trim_trailing_whitespace = true
8 insert_final_newline = true
9
10 [*.{js,css}]
11 indent_style = space
12 indent_size = 4
13
14 [*.md]
15 trim_trailing_whitespace = false
File was created 1 * text=auto
2
File was created 1 node_modules
2 .c9revisions
3
File was created 1 {
2 "node": true,
3 "browser": true,
4 "esnext": true,
5 "bitwise": true,
6 "camelcase": true,
7 "eqeqeq": true,
8 "immed": true,
9 "indent": 4,
10 "latedef": true,
11 "newcap": true,
12 "noarg": true,
13 "quotmark": "single",
14 "regexp": true,
15 "undef": true,
16 "unused": true,
17 "strict": true,
18 "trailing": true,
19 "smarttabs": true,
20 "expr": true,
21 "globals": {
22 "define": false,
23 /* MOCHA */
24 "describe" : false,
25 "it" : false,
26 "before" : false,
27 "beforeEach" : false,
28 "after" : false,
29 "afterEach" : false
30 }
31 }
32
File was created 1 # Changelog
2
3 ## 1.4.0 - TBA
4
5 ## 1.3.3 - 2015-02-17
6
7 - Add theme class support, see #260
8 - Fix on iOS, see #101, #121
9 - Add date range example, see #337
10 - Fix dates used in examples, see #329
11
12 ## 1.3.2 - 2015-02-17
13
14 - Add options to disable days, see #171
15 - Add SCSS file, see #130
16
17 ## 1.3.1 - 2015-02-04
18
19 - Fix for bug introduced in #166; fixes #224, #230
20
21 ## 1.3.0 - 2015-01-09
22
23 - Fix #79 moving through months can cause calendar to "bounce around"
24 - Add configurable number of shown months
25 - #51 Add unit tests with ci: [testling](https://ci.testling.com/rikkert/pikaday)
26 - Fix #94 blur input field after date selection
27 - Add configuable container to render calendar into
28 - Add option to show week numbers, see #147
29 - Positioning is now optional, see #192
30
31 ## 1.2.0 - 2014-01-28
32
33 - Fix #8 Automatically adjust datepicker position
34 - Merge #45 Adjusting position
35 - Merge #11 Allow using a different element to open and bind the datepicker to
36 - Use new Bower package filename: bower.json
37 - Merge #90 Configuration options for the title, useful for Asian languages.
38 - Merge #96 Use proper UMD-wrapper
39 - Merge #92 Export as CommonJS module
40 - Merge #119 Use a px text-indent on .pika-prev/next to prevent Firefox bug
41 - Merge #60 Add customizable position option
42 - Add Component package definition
43
44 ## 1.1.0 - 2013-03-29
45
46 - Add Ruby on Rails [gem](https://rubygems.org/gems/pikaday-gem)
47 - Add project configuration files. (jshint and editorconfig)
48 - Add AMD support to pikaday and pikaday.jquery
49
50 - Fix #52 check if date is valid when moment.js is available
51 - Fix #54 add CSS support for IE8
52
53 Notes:
54
55 - jQuery plugin needs pikaday.js loaded first
56 - See the examples/ dir:
57 - amd.html module loading example
58 - jquery-amd.html module loading the jQuery plugin example
59 - jquery.html jQuery plugin example
60 - moment.html moment.js library example
61
62 ## 1.0.0 - 2013-03-15
63
64 - Fix issue #41 (minDate does not include the specified date)
65 - Add Bower package definition
66
67 ## 0.0.2 - 2012-10-10
68
69 - jQuery plugin version
70
71 ## 0.0.1 - 2012-10-08
72
73 - Basic documentation written
74 - GitHub repository is ready to go…
75
File was created 1 Copyright (c) 2014 David Bushell BSD & MIT license
2
3 The MIT License (MIT)
4
5 Copyright (c) 2014 David Bushell
6
7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 of this software and associated documentation files (the "Software"), to deal
9 in the Software without restriction, including without limitation the rights
10 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 copies of the Software, and to permit persons to whom the Software is
12 furnished to do so, subject to the following conditions:
13
14 The above copyright notice and this permission notice shall be included in
15 all copies or substantial portions of the Software.
16
17 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23 THE SOFTWARE.
24
25 The BSD License
26
27 Copyright (c) 2014 David Bushell
28 All rights reserved.
29
30 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
31
32 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
33
34 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
35
36 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
File was created 1 Pikaday
2 ========
3
4 ### A refreshing JavaScript Datepicker
5
6 * Lightweight (less than 5kb minified and gzipped)
7 * No dependencies (but plays well with [Moment.js][moment])
8 * Modular CSS classes for easy styling
9
10 [**Try Pikaday Demo →**][Pikaday]
11
12 ![Pikaday Screenshot][screenshot]
13
14 **Production ready?** Since version 1.0.0 Pikaday is stable and used in production. If you do however find bugs or have feature requests please submit them to the [GitHub issue tracker][issues].
15 Also see the [changelog](CHANGELOG.md)
16
17
18 ## Usage
19
20 **Pikaday** can be bound to an input field:
21
22 ```html
23 <input type="text" id="datepicker">
24 ```
25
26 Add the JavaScript to the end of your document:
27
28 ```html
29 <script src="pikaday.js"></script>
30 <script>
31 var picker = new Pikaday({ field: document.getElementById('datepicker') });
32 </script>
33 ```
34
35 If you're using **jQuery** make sure to pass only the first element:
36
37 ```javascript
38 var picker = new Pikaday({ field: $('#datepicker')[0] });
39 ```
40
41 If the Pikaday instance is not bound to a field you can append the element anywhere:
42
43 ```javascript
44 var field = document.getElementById('datepicker');
45 var picker = new Pikaday({
46 onSelect: function(date) {
47 field.value = picker.toString();
48 }
49 });
50 field.parentNode.insertBefore(picker.el, field.nextSibling);
51 ```
52
53 For advanced formatting load [Moment.js][moment] prior to Pikaday:
54 See the [moment.js example][] for a full version.
55
56 ```html
57 <input type="text" id="datepicker" value="9 Oct 2014">
58
59 <script src="moment.js"></script>
60 <script src="pikaday.js"></script>
61 <script>
62 var picker = new Pikaday({
63 field: document.getElementById('datepicker'),
64 format: 'D MMM YYYY',
65 onSelect: function() {
66 console.log(this.getMoment().format('Do MMMM YYYY'));
67 }
68 });
69 </script>
70 ```
71
72 ### Configuration
73
74 As the examples demonstrate above
75 Pikaday has many useful options:
76
77 * `field` bind the datepicker to a form field
78 * `trigger` use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`)
79 * `bound` automatically show/hide the datepicker on `field` focus (default `true` if `field` is set)
80 * `position` preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to 'bottom left')
81 * `reposition` can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true)
82 * `container` DOM node to render calendar into, see [container example][] (default: undefined)
83 * `format` the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting)
84 * `defaultDate` the initial date to view when first opened
85 * `setDefaultDate` make the `defaultDate` the initial selected value
86 * `firstDay` first day of the week (0: Sunday, 1: Monday, etc)
87 * `minDate` the minimum/earliest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`)
88 * `maxDate` the maximum/latest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`)
89 * `disableWeekends` disallow selection of Saturdays or Sundays
90 * `disableDayFn` callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
91 * `yearRange` number of years either side (e.g. `10`) or array of upper/lower range (e.g. `[1900,2015]`)
92 * `showWeekNumber` show the ISO week number at the head of the row (default `false`)
93 * `isRTL` reverse the calendar for right-to-left languages
94 * `i18n` language defaults for month and weekday names (see internationalization below)
95 * `yearSuffix` additional text to append to the year in the title
96 * `showMonthAfterYear` render the month after year in the title (default `false`)
97 * `numberOfMonths` number of visible calendars
98 * `mainCalendar` when `numberOfMonths` is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`). Only used for the first display or when a selected date is not already visible
99 * `theme` define a classname that can be used as a hook for styling different themes, see [theme example][] (default `null`)
100 * `onSelect` callback function for when a date is selected
101 * `onOpen` callback function for when the picker becomes visible
102 * `onClose` callback function for when the picker is hidden
103 * `onDraw` callback function for when the picker draws a new month
104
105 ## jQuery Plugin
106
107 The normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see `plugins/pikaday.jquery.js` in the repository). This version requires jQuery, naturally, and can be used like other plugins:
108 See the [jQuery example][] for a full version.
109
110 ```html
111 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
112 <script src="pikaday.js"></script>
113 <script src="plugins/pikaday.jquery.js"></script>
114 <script>
115
116 // activate datepickers for all elements with a class of `datepicker`
117 $('.datepicker').pikaday({ firstDay: 1 });
118
119 // chain a few methods for the first datepicker, jQuery style!
120 $('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);
121
122 </script>
123 ```
124
125 ## AMD support
126
127 If you use a modular script loader than Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module.
128 See the [AMD example][] for a full version.
129
130 ```javascript
131 require(['pikaday'], function(Pikaday) {
132 var picker = new Pikaday({ field: document.getElementById('datepicker') });
133 });
134 ```
135 The same applies for the jQuery plugin mentioned above.
136 See the [jQuery AMD example][] for a full version.
137
138 ```javascript
139 require(['jquery', 'pikaday.jquery'], function($) {
140 $('#datepicker').pikaday();
141 });
142 ```
143
144 ## CommonJS module support
145
146 If you use a CommonJS compatible environment you can use the require function to import Pikaday.
147
148
149 ```javascript
150 var pikaday = require('pikaday');
151 ```
152
153 When you bundle all your required modules with [Browserify][browserify] and you don't use [Moment.js][moment] specify the ignore option:
154
155 `browserify main.js -o bundle.js -i moment`
156
157 ## Ruby on Rails
158
159 If you're using **Ruby on Rails**, make sure to check out the [Pikaday gem][gem].
160
161 ## Methods
162
163 You can control the date picker after creation:
164
165 ```javascript
166 var picker = new Pikaday({ field: document.getElementById('datepicker') });
167 ```
168
169 ### Get and set date
170
171 `picker.toString('YYYY-MM-DD')`
172
173 Returns the selected date in a string format. If [Moment.js][moment] exists (recommended) then Pikaday can return any format that Moment understands, otherwise you're stuck with JavaScript's default.
174
175 `picker.getDate()`
176
177 Returns a basic JavaScript `Date` object of the selected day, or `null` if no selection.
178
179 `picker.setDate('2015-01-01')`
180
181 Set the current selection. This will be restricted within the bounds of `minDate` and `maxDate` options if they're specified. You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect callback (true), allowing the date to be set silently.
182
183 `picker.getMoment()`
184
185 Returns a [Moment.js][moment] object for the selected date (Moment must be loaded before Pikaday).
186
187 `picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))`
188
189 Set the current selection with a [Moment.js][moment] object (see `setDate` for details).
190
191 ### Change current view
192
193 `picker.gotoDate(new Date(2014, 1))`
194
195 Change the current view to see a specific date. This example will jump to February 2014 ([month is a zero-based index][mdn_date]).
196
197 `picker.gotoToday()`
198
199 Shortcut for `picker.gotoDate(new Date())`
200
201 `picker.gotoMonth(2)`
202
203 Change the current view by month (0: January, 1: Februrary, etc).
204
205 `picker.nextMonth()`
206 `picker.prevMonth()`
207
208 Go to the next or previous month (this will change year if necessary).
209
210 `picker.gotoYear()`
211
212 Change the year being viewed.
213
214 `picker.setMinDate()`
215
216 Update the minimum/earliest date that can be selected.
217
218 `picker.setMaxDate()`
219
220 Update the maximum/latest date that can be selected.
221
222 `picker.setStartRange()`
223
224 Update the range start date. For using two Pikaday instances to select a date range.
225
226 `picker.setEndRange()`
227
228 Update the range end date. For using two Pikaday instances to select a date range.
229
230 ### Show and hide datepicker
231
232 `picker.isVisible()`
233
234 Returns `true` or `false`.
235
236 `picker.show()`
237
238 Make the picker visible.
239
240 `picker.adjustPosition()`
241
242 Recalculate and change the position of the picker.
243
244 `picker.hide()`
245
246 Hide the picker making it invisible.
247
248 `picker.destroy()`
249
250 Hide the picker and remove all event listeners — no going back!
251
252 ### Internationalization
253
254 The default `i18n` configuration format looks like this:
255
256 ```javascript
257 i18n: {
258 previousMonth : 'Previous Month',
259 nextMonth : 'Next Month',
260 months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
261 weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
262 weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
263 }
264 ```
265
266 You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the `firstDay` option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set `isRTL` to `true` for languages that are read right-to-left.
267
268
269 ## Extensions
270
271 ### Timepicker
272
273 Pikaday is a pure datepicker. It will not support picking a time of day. However, there have been efforts to add time support to Pikaday.
274 See [#1][issue1] and [#18][issue18]. These reside in their own fork.
275
276 You can use the work [@owenmead][owenmead] did most recently at [owenmead/Pikaday][owen Pika]
277 A more simple time selection approach done by [@xeeali][xeeali] at [xeeali/Pikaday][xeeali Pika] is based on version 1.2.0.
278 Also [@stas][stas] has a fork [stas/Pikaday][stas Pika], but is now quite old
279
280
281 ## Browser Compatibility
282
283 * IE 7+
284 * Chrome 8+
285 * Firefox 3.5+
286 * Safari 3+
287 * Opera 10.6+
288
289 [![browser compatibility](https://ci.testling.com/rikkert/pikaday.png)
290 ](https://ci.testling.com/rikkert/pikaday)
291
292
293 * * *
294
295 ## Authors
296
297 * David Bushell [http://dbushell.com][Bushell] [@dbushell][Bushell Twitter]
298 * Ramiro Rikkert [GitHub][Rikkert] [@RamRik][Rikkert Twitter]
299
300 Thanks to [@shoogledesigns][shoogledesigns] for the name.
301
302 Copyright © 2014 David Bushell | BSD & MIT license
303
304 [Pikaday]: http://dbushell.github.com/Pikaday/ "Pikaday"
305 [moment]: http://momentjs.com/ "moment.js"
306 [browserify]: http://browserify.org/ "browserify"
307 [screenshot]: https://raw.github.com/dbushell/Pikaday/gh-pages/screenshot.png "Screenshot"
308 [issues]: https://github.com/dbushell/Pikaday/issues "Issue tracker"
309 [gem]: https://rubygems.org/gems/pikaday-gem "RoR gem"
310 [mdn_date]: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date "Date"
311 [Bushell]: http://dbushell.com/ "dbushell.com"
312 [Bushell Twitter]: https://twitter.com/dbushell "@dbushell"
313 [Rikkert]: https://github.com/rikkert "Rikkert GitHub"
314 [Rikkert Twitter]: https://twitter.com/ramrik "@ramrik"
315 [shoogledesigns]: https://twitter.com/shoogledesigns/status/255209384261586944 "@shoogledesigns"
316 [issue1]: https://github.com/dbushell/Pikaday/issues/1 "Issue 1"
317 [issue18]: https://github.com/dbushell/Pikaday/issues/18 "Issue 18"
318 [stas]: https://github.com/stas "@stas"
319 [stas Pika]: https://github.com/stas/Pikaday "Pikaday"
320 [owenmead]: https://github.com/owenmead "@owenmead"
321 [owen Pika]: https://github.com/owenmead/Pikaday "Pikaday"
322 [xeeali]: https://github.com/xeeali "@xeeali"
323 [xeeali Pika]: https://github.com/xeeali/Pikaday "Pikaday"
324 [moment.js example]: http://dbushell.github.com/Pikaday/examples/moment.html "Pikaday w/ moment.js"
325 [jQuery example]: http://dbushell.github.com/Pikaday/examples/jquery.html "Pikaday w/ jQuery"
326 [AMD example]: http://dbushell.github.com/Pikaday/examples/amd.html "Pikaday w/ AMD"
327 [jQuery AMD example]: http://dbushell.github.com/Pikaday/examples/jquery-amd.html "Pikaday w/ jQuery + AMD"
328 [trigger example]: http://dbushell.github.com/Pikaday/examples/trigger.html "Pikaday using custom trigger"
329 [positions example]: http://dbushell.github.com/Pikaday/examples/positions.html "Pikaday using different position options"
330 [container example]: http://dbushell.github.com/Pikaday/examples/container.html "Pikaday using custom calendar container"
331 [theme example]: http://dbushell.github.com/Pikaday/examples/theme.html "Pikaday using multiple themes"
332
File was created 1 {
2 "name": "pikaday",
3 "description": "A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS",
4 "keywords": [
5 "datepicker",
6 "calendar",
7 "date"
8 ],
9 "main": [
10 "./pikaday.js",
11 "./css/pikaday.css"
12 ],
13 "dependencies": {},
14 "ignore": [
15 "**/.*",
16 "node_modules",
17 "components"
18 ],
19 "license" : [
20 "BSD",
21 "MIT"
22 ],
23 "homepage": "http://dbushell.github.io/Pikaday/",
24 "repository": {
25 "type": "git",
26 "url": "https://github.com/dbushell/Pikaday.git"
27 }
28 }
29
File was created 1 {
2 "name": "pikaday",
3 "repo": "dbushell/Pikaday",
4 "description": "A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS",
5 "version": "1.3.3",
6 "keywords": [
7 "datepicker",
8 "calendar",
9 "date"
10 ],
11 "main": "pikaday.js",
12 "scripts": ["pikaday.js"],
13 "styles": ["css/pikaday.css"],
14 "dependencies": {},
15 "demo": "http://dbushell.github.io/Pikaday/",
16 "license": "MIT"
17 }
18
File was created 1 @charset "UTF-8";
2
3 /*!
4 * Pikaday
5 * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
6 */
7
8 .pika-single {
9 z-index: 9999;
10 display: block;
11 position: relative;
12 color: #333;
13 background: #fff;
14 border: 1px solid #ccc;
15 border-bottom-color: #bbb;
16 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
17 }
18
19 /*
20 clear child float (pika-lendar), using the famous micro clearfix hack
21 http://nicolasgallagher.com/micro-clearfix-hack/
22 */
23 .pika-single:before,
24 .pika-single:after {
25 content: " ";
26 display: table;
27 }
28 .pika-single:after { clear: both }
29 .pika-single { *zoom: 1 }
30
31 .pika-single.is-hidden {
32 display: none;
33 }
34
35 .pika-single.is-bound {
36 position: absolute;
37 box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
38 }
39
40 .pika-lendar {
41 float: left;
42 width: 240px;
43 margin: 8px;
44 }
45
46 .pika-title {
47 position: relative;
48 text-align: center;
49 }
50
51 .pika-label {
52 display: inline-block;
53 *display: inline;
54 position: relative;
55 z-index: 9999;
56 overflow: hidden;
57 margin: 0;
58 padding: 5px 3px;
59 font-size: 14px;
60 line-height: 20px;
61 font-weight: bold;
62 background-color: #fff;
63 }
64 .pika-title select {
65 cursor: pointer;
66 position: absolute;
67 z-index: 9998;
68 margin: 0;
69 left: 0;
70 top: 5px;
71 filter: alpha(opacity=0);
72 opacity: 0;
73 color: black;
74 }
75
76 .pika-prev,
77 .pika-next {
78 display: block;
79 cursor: pointer;
80 position: relative;
81 outline: none;
82 border: 0;
83 padding: 0;
84 width: 20px;
85 height: 30px;
86 /* hide text using text-indent trick, using width value (it's enough) */
87 text-indent: 20px;
88 white-space: nowrap;
89 overflow: hidden;
90 background-color: transparent;
91 background-position: center center;
92 background-repeat: no-repeat;
93 background-size: 75% 75%;
94 opacity: .5;
95 *position: absolute;
96 *top: 0;
97 }
98
99 .pika-prev:hover,
100 .pika-next:hover {
101 opacity: 1;
102 }
103
104 .pika-prev,
105 .is-rtl .pika-next {
106 float: left;
107 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
108 *left: 0;
109 }
110
111 .pika-next,
112 .is-rtl .pika-prev {
113 float: right;
114 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
115 *right: 0;
116 }
117
118 .pika-prev.is-disabled,
119 .pika-next.is-disabled {
120 cursor: default;
121 opacity: .2;
122 }
123
124 .pika-select {
125 display: inline-block;
126 *display: inline;
127 }
128
129 .pika-table {
130 width: 100%;
131 border-collapse: collapse;
132 border-spacing: 0;
133 border: 0;
134 }
135
136 .pika-table th,
137 .pika-table td {
138 width: 14.285714285714286%;
139 padding: 0;
140 }
141
142 .pika-table th {
143 color: #999;
144 font-size: 12px;
145 line-height: 25px;
146 font-weight: bold;
147 text-align: center;
148 }
149
150 .pika-button {
151 cursor: pointer;
152 display: block;
153 box-sizing: border-box;
154 -moz-box-sizing: border-box;
155 outline: none;
156 border: 0;
157 margin: 0;
158 width: 100%;
159 padding: 5px;
160 color: #666;
161 font-size: 12px;
162 line-height: 15px;
163 text-align: right;
164 background: #f5f5f5;
165 }
166
167 .pika-week {
168 font-size: 11px;
169 color: #999;
170 }
171
172 .is-today .pika-button {
173 color: #33aaff;
174 font-weight: bold;
175 }
176
177 .is-selected .pika-button {
178 color: #fff;
179 font-weight: bold;
180 background: #33aaff;
181 box-shadow: inset 0 1px 3px #178fe5;
182 border-radius: 3px;
183 }
184
185 .is-inrange .pika-button {
186 background: #D5E9F7;
187 }
188
189 .is-startrange .pika-button {
190 color: #fff;
191 background: #6CB31D;
192 box-shadow: none;
193 border-radius: 3px;
194 }
195
196 .is-endrange .pika-button {
197 color: #fff;
198 background: #33aaff;
199 box-shadow: none;
200 border-radius: 3px;
201 }
202
203 .is-disabled .pika-button {
204 pointer-events: none;
205 cursor: default;
206 color: #999;
207 opacity: .3;
208 }
209
210 .pika-button:hover {
211 color: #fff;
212 background: #ff8000;
213 box-shadow: none;
214 border-radius: 3px;
215 }
216
217 /* styling for abbr */
218 .pika-table abbr {
219 border-bottom: none;
220 cursor: help;
221 }
222
223
File was created 1 html { margin: 0; padding: 0; }
2 body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; }
3
4 h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
5 h2 { font-size: 1.25em; margin: 0 0 0.6em 0; }
6
7 a { color: #2996cc; }
8 a:hover { text-decoration: none; }
9
10 p { line-height: 1.5em; }
11 .small { color: #666; font-size: 0.875em; }
12 .large { font-size: 1.25em; }
13
14
15 label {
16 font-weight: bold;
17 }
18
19 input[type="text"] {
20 margin: 0.5em 0 3em 0;
21 padding: 0.5em;
22 }
23
24 button#datepicker-button {
25 margin-bottom: 3em;
26 }
27
28 .flow-element {
29 display: inline-block;
30 margin-right: 3em;
31 vertical-align: top;
32 }
33 .flow-element:last-child {
34 margin-right: 0;
35 }
36 .flow-element input {
37 margin-top: 0;
38 }
39
40 #container {
41 min-height: 15em;
42 }
File was created 1 /**
2 * This theme is an example to show how you can create your own.
3 */
4 .pika-single.dark-theme {
5 color: #fff;
6 background: #333;
7 border: 1px solid #666;
8 border-bottom-color: #999;
9 }
10
11 .dark-theme .pika-label {
12 background-color: #333;
13 }
14
15 .dark-theme .pika-prev,
16 .dark-theme .is-rtl .pika-next {
17 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAQ0lEQVR4Ae3KIQ4AIBTD0N0/IeHGI3UIRA3ut/Zl+ltXc5++htVAmIAwAWECwgSEKbgthEoIlRAqIVRCqINQB9nDgQd7ktwFo6UpWQAAAABJRU5ErkJggg==');
18 }
19
20 .dark-theme .pika-next,
21 .dark-theme .is-rtl .pika-prev {
22 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAP0lEQVQ4y+3TMQoAMAgEwfwfAvvjTZ1uGzuvHhBPPGczEG+FRqqRaqQaqUaqkX6QBmmjacvQ6qEVTjsh+xizebvlaWptGXZAAAAAAElFTkSuQmCC');
23 }
24
25 .dark-theme .pika-table th {
26 color: #999;
27 }
28
29 .dark-theme .pika-button {
30 color: #fff;
31 background: #222;
32 }
33
34 .dark-theme .pika-week {
35 color: #999;
36 }
37
38 .dark-theme .is-today .pika-button {
39 color: #33aaff;
40 }
41
42 .dark-theme .is-selected .pika-button {
43 color: #fff;
44 background: #33aaff;
45 box-shadow: inset 0 1px 3px #178fe5;
46 }
47
48 .dark-theme .is-disabled .pika-button {
49 color: #999;
50 opacity: .3;
51 }
52
53 .dark-theme .pika-button:hover {
54 color: #fff !important;
55 background: #ff8000 !important;
56 }
57
examples/amd.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - AMD example</title>
7 <meta name="author" content="Ramiro Rikkert">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - AMD example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" id="datepicker">
21
22 <h2>What is this?</h2>
23
24 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
25
26 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
27
28 <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.js"></script>
29 <script>
30
31 require.config({
32 baseUrl: '../',
33 // To get timely, correct error triggers in IE, force a define/shim exports check.
34 enforceDefine: true
35 });
36 require(['pikaday'], function(Pikaday)
37 {
38 var picker = new Pikaday(
39 {
40 field: document.getElementById('datepicker'),
41 firstDay: 1,
42 minDate: new Date(2000, 0, 1),
43 maxDate: new Date(2020, 12, 31),
44 yearRange: [2000,2020]
45 });
46 });
47
48 </script>
49 </body>
50 </html>
examples/bound-container.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - Container example</title>
7 <meta name="author" content="Stuart McFarlane">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - Container example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <div>
19 <div class="flow-element">
20 <label for="datepicker">Date:</label>
21 <input type="text" id="datepicker">
22 </div>
23 <div class="flow-element">
24 <div id="container"></div>
25 </div>
26 </div>
27
28 <h2>What is this?</h2>
29
30 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
31
32 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
33
34
35 <!-- First load pikaday.js and then the jQuery plugin -->
36 <script src="../pikaday.js"></script>
37 <script>
38
39 var picker = new Pikaday(
40 {
41 field: document.getElementById('datepicker'),
42 firstDay: 1,
43 minDate: new Date(2000, 0, 1),
44 maxDate: new Date(2020, 12, 31),
45 yearRange: [2000, 2020],
46 bound: true,
47 container: document.getElementById('container'),
48 });
49
50 </script>
51 </body>
52 </html>
examples/calendars.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - ranges example</title>
7 <meta name="author" content="Maxime Thirouin">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br />
20 2 months <input type="text" id="datepicker-2months">
21 <br />
22 3 months, main aligned to right <input type="text" id="datepicker-3months-right">
23
24 <h2>What is this?</h2>
25
26 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
27
28 <p class="small">Copyright © 2013 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/MoOx">MoOx</a></p>
29
30
31 <script src="../pikaday.js"></script>
32 <script>
33
34 var picker2months = new Pikaday(
35 {
36 numberOfMonths: 2,
37 field: document.getElementById('datepicker-2months'),
38 firstDay: 1,
39 minDate: new Date(2000, 0, 1),
40 maxDate: new Date(2020, 12, 31),
41 yearRange: [2000, 2020]
42 });
43
44 var picker3monthsRight = new Pikaday(
45 {
46 numberOfMonths: 3,
47 mainCalendar: 'right',
48 field: document.getElementById('datepicker-3months-right'),
49 firstDay: 1,
50 minDate: new Date(2000, 0, 1),
51 maxDate: new Date(2020, 12, 31),
52 yearRange: [2000, 2020]
53 });
54
55 </script>
56 </body>
57 </html>
58
examples/container.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - Container example</title>
7 <meta name="author" content="Stuart McFarlane">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - Container example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <div>
19 <div class="flow-element">
20 <label for="datepicker">Date:</label>
21 <input type="text" id="datepicker">
22 </div>
23 <div class="flow-element">
24 <div id="container"></div>
25 </div>
26 </div>
27
28 <h2>What is this?</h2>
29
30 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
31
32 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
33
34
35 <!-- First load pikaday.js and then the jQuery plugin -->
36 <script src="../pikaday.js"></script>
37 <script>
38
39 var picker = new Pikaday(
40 {
41 field: document.getElementById('datepicker'),
42 firstDay: 1,
43 minDate: new Date(2000, 0, 1),
44 maxDate: new Date(2020, 12, 31),
45 yearRange: [2000, 2020],
46 bound: false,
47 container: document.getElementById('container'),
48 });
49
50 </script>
51 </body>
52 </html>
examples/date-range.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - Date Range example</title>
7 <meta name="author" content="David Bushell">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <h1>Pikaday - Date Range example</h1>
13
14 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
15
16 <p><a href="https://github.com/dbushell/Pikaday"><strong>Pikaday source on GitHub</strong></a></p>
17
18 <div style="display: inline-block">
19 <label for="start">Start:</label>
20 <br>
21 <input type="text" id="start">
22 </div>
23
24 <div style="display: inline-block">
25 <label for="end">End:</label>
26 <br>
27 <input type="text" id="end">
28 </div>
29
30 <h2>What is this?</h2>
31
32 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
33
34 <p class="small">Copyright &copy; 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license</p>
35
36
37 <script src="../pikaday.js"></script>
38 <script>
39 var startDate,
40 endDate,
41 updateStartDate = function() {
42 startPicker.setStartRange(startDate);
43 endPicker.setStartRange(startDate);
44 endPicker.setMinDate(startDate);
45 },
46 updateEndDate = function() {
47 startPicker.setEndRange(endDate);
48 startPicker.setMaxDate(endDate);
49 endPicker.setEndRange(endDate);
50 },
51 startPicker = new Pikaday({
52 field: document.getElementById('start'),
53 minDate: new Date(),
54 maxDate: new Date(2020, 12, 31),
55 onSelect: function() {
56 startDate = this.getDate();
57 updateStartDate();
58 }
59 }),
60 endPicker = new Pikaday({
61 field: document.getElementById('end'),
62 minDate: new Date(),
63 maxDate: new Date(2020, 12, 31),
64 onSelect: function() {
65 endDate = this.getDate();
66 updateEndDate();
67 }
68 }),
69 _startDate = startPicker.getDate(),
70 _endDate = endPicker.getDate();
71
72 if (_startDate) {
73 startDate = _startDate;
74 updateStartDate();
75 }
76
77 if (_endDate) {
78 endDate = _endDate;
79 updateEndDate();
80 }
81 </script>
82 </body>
83 </html>
examples/jquery-amd.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - jQuery + AMD example</title>
7 <meta name="author" content="Ramiro Rikkert">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - jQuery + AMD example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" id="datepicker">
21
22 <h2>What is this?</h2>
23
24 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
25
26 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
27
28
29 <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.js"></script>
30 <script>
31
32 require.config({
33 baseUrl: '../',
34 // To get timely, correct error triggers in IE, force a define/shim exports check.
35 enforceDefine: true,
36 paths: {
37 jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min'
38 }
39 });
40 require(['jquery', 'plugins/pikaday.jquery'], function($)
41 {
42 var $datepicker = $('#datepicker').pikaday({
43 firstDay: 1,
44 minDate: new Date(2000, 0, 1),
45 maxDate: new Date(2020, 12, 31),
46 yearRange: [2000,2020]
47 });
48 // chain a few methods for the first datepicker, jQuery style!
49 $datepicker.pikaday('show').pikaday('nextMonth');
50 });
51
52 </script>
53 </body>
54 </html>
examples/jquery.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - jQuery example</title>
7 <meta name="author" content="Ramiro Rikkert">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - jQuery example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" id="datepicker">
21
22 <h2>What is this?</h2>
23
24 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
25
26 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
27
28
29 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
30 <!-- First load pikaday.js and then the jQuery plugin -->
31 <script src="../pikaday.js"></script>
32 <script src="../plugins/pikaday.jquery.js"></script>
33 <script>
34
35 var $datepicker = $('#datepicker').pikaday({
36 firstDay: 1,
37 minDate: new Date(2000, 0, 1),
38 maxDate: new Date(2020, 12, 31),
39 yearRange: [2000,2020]
40 });
41 // chain a few methods for the first datepicker, jQuery style!
42 $datepicker.pikaday('show').pikaday('nextMonth');
43
44 </script>
45 </body>
46 </html>
examples/moment.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - moment.js example</title>
7 <meta name="author" content="Ramiro Rikkert">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday + moment.js</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" id="datepicker">
21 <div id="selected"></div>
22 <br>
23
24 <h2>What is this?</h2>
25
26 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
27
28 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
29
30
31 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
32 <script src="../pikaday.js"></script>
33 <script>
34
35 // You can get and set dates with moment objects
36 var picker = new Pikaday(
37 {
38 field: document.getElementById('datepicker'),
39 firstDay: 1,
40 minDate: new Date(2000, 0, 1),
41 maxDate: new Date(2020, 12, 31),
42 yearRange: [2000,2020],
43 onSelect: function() {
44 var date = document.createTextNode(this.getMoment().format('Do MMMM YYYY') + ' ');
45 document.getElementById('selected').appendChild(date);
46 }
47 });
48
49 picker.setMoment(moment().dayOfYear(366));
50
51 </script>
52 </body>
53 </html>
examples/positions.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday alignment example</title>
7 <meta name="author" content="Maxime Thirouin">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday alignement example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Dates:</label>
19
20 <br />
21 <input type="text" id="datepicker" value="Default (bottom left)">
22 <br />
23 <input type="text" id="datepicker-topleft" value="Top left (waat?)"> <b>not really (too close from top)</b>
24 <br />
25 <input type="text" id="datepicker-topleft-forreal" value="Top left"> for real this time (same code as above)
26 <br />
27 <input type="text" id="datepicker-topright" value="Top right (waat?)"> <b>not really (too close from right)</b>
28 <br />
29 Here is the top right position with content before (no automatic adjustment used, same code as above) <input type="text" id="datepicker-topright-forreal" value="Top right">
30 <br />
31 <input type="text" id="datepicker-bottomright" value="Bottom right (waat?)">
32 <br />
33 <input type="text" id="datepicker-bottomright-forced" value="forced to position outside viewport">
34 <br />
35 Here is the bottom right position with content before (no automatic adjustment used, , same code as above) <input type="text" id="datepicker-bottomright-forreal" value="Bottom right">
36
37 <p><i>Also, take a look to the bottom right of this page to see an example with position automatically adjusted.</i></p>
38 <input type="text" id="datepicker-auto" style="position: absolute; bottom: 0; right: 0;" value="Automatic position">
39
40 <h2>What is this?</h2>
41
42 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
43
44 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/MoOx">MoOx</a></p>
45
46
47 <script src="../pikaday.js"></script>
48 <script>
49
50 // default: bottom left
51 new Pikaday(
52 {
53 field: document.getElementById('datepicker')
54 });
55
56 new Pikaday(
57 {
58 field: document.getElementById('datepicker-topleft'),
59 position: 'top left'
60 });
61
62 new Pikaday(
63 {
64 field: document.getElementById('datepicker-topleft-forreal'),
65 position: 'top left'
66 });
67
68 new Pikaday(
69 {
70 field: document.getElementById('datepicker-topright'),
71 position: 'top right'
72 });
73
74 new Pikaday(
75 {
76 field: document.getElementById('datepicker-topright-forreal'),
77 position: 'top right'
78 });
79
80 new Pikaday(
81 {
82 field: document.getElementById('datepicker-bottomright'),
83 position: 'bottom right'
84 });
85
86 new Pikaday(
87 {
88 field: document.getElementById('datepicker-bottomright-forced'),
89 position: 'bottom right',
90 reposition: false
91 });
92
93 new Pikaday(
94 {
95 field: document.getElementById('datepicker-bottomright-forreal'),
96 position: 'bottom right'
97 });
98
99 new Pikaday(
100 {
101 field: document.getElementById('datepicker-auto'),
102 });
103
104 </script>
105 </body>
106 </html>
107
examples/theme.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - Theme example</title>
7 <meta name="author" content="Stuart McFarlane">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/theme.css">
10
11 </head>
12 <body>
13 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
14
15 <h1>Pikaday - Theme example</h1>
16
17 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
18
19 <label for="datepicker">Date:</label>
20 <br>
21 No theme <input type="text" id="datepicker">
22 <br>
23 Custom theme <input type="text" id="datepicker-theme">
24
25 <h2>What is this?</h2>
26
27 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
28
29 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
30
31
32 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
33 <script src="../pikaday.js"></script>
34 <script>
35
36 // You can use different themes with the `theme` option
37 var startDate,
38 endDate,
39 updateStartDate = function() {
40 startPicker.setStartRange(startDate);
41 endPicker.setStartRange(startDate);
42 endPicker.setMinDate(startDate);
43 },
44 updateEndDate = function() {
45 startPicker.setEndRange(endDate);
46 startPicker.setMaxDate(endDate);
47 endPicker.setEndRange(endDate);
48 },
49 startPicker = new Pikaday({
50 field: document.getElementById('datepicker-theme'),
51 theme: 'dark-theme',
52 minDate: new Date(),
53 maxDate: new Date(2020, 12, 31),
54 onSelect: function() {
55 startDate = this.getDate();
56 updateStartDate();
57 }
58 }),
59 endPicker = new Pikaday({
60 field: document.getElementById('datepicker-1'),
61 minDate: new Date(),
62 maxDate: new Date(2020, 12, 31),
63 onSelect: function() {
64 endDate = this.getDate();
65 updateEndDate();
66 }
67 }),
68 _startDate = startPicker.getDate(),
69 _endDate = endPicker.getDate();
70
71 if (_startDate) {
72 startDate = _startDate;
73 updateStartDate();
74 }
75
76 if (_endDate) {
77 endDate = _endDate;
78 updateEndDate();
79 }
80
81 </script>
82 </body>
83 </html>
84
examples/trigger.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - custom trigger element example</title>
7 <meta name="author" content="Ramiro Rikkert">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - custom trigger example</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" disabled id="datepicker">
21 <br>
22 <button id="datepicker-button">Choose Date</button>
23
24
25 <h2>What is this?</h2>
26
27 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
28
29 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
30
31
32 <script src="../pikaday.js"></script>
33 <script>
34
35 new Pikaday(
36 {
37 field: document.getElementById('datepicker'),
38 trigger: document.getElementById('datepicker-button'),
39 minDate: new Date(2000, 0, 1),
40 maxDate: new Date(2020, 12, 31),
41 yearRange: [2010,2020]
42 });
43
44 </script>
45 </body>
46 </html>
examples/weeknumbers.html
Diff comments   View file @5c8f10d
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday - weeknumbers example</title>
7 <meta name="author" content="Maxime Thirouin">
8 <link rel="stylesheet" href="../css/pikaday.css">
9 <link rel="stylesheet" href="../css/site.css">
10 </head>
11 <body>
12 <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13
14 <h1>Pikaday - showing weeknumbers</h1>
15
16 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
17
18 <label for="datepicker">Date:</label>
19 <input type="text" id="datepicker-week-numbers">
20
21 <h2>What is this?</h2>
22
23 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
24
25 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
26
27 <script src="../pikaday.js"></script>
28 <script>
29
30 var pickerWeekNums = new Pikaday({
31 showWeekNumber: true,
32 field: document.getElementById('datepicker-week-numbers'),
33 firstDay: 1,
34 minDate: new Date(2000, 0, 1),
35 maxDate: new Date(2020, 12, 31),
36 yearRange: [2000, 2020]
37 });
38
39 </script>
40 </body>
41 </html>
42
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
6 <title>Pikaday</title>
7 <meta name="author" content="David Bushell">
8 <link rel="stylesheet" href="css/pikaday.css">
9 <link rel="stylesheet" href="css/site.css">
10 </head>
11 <body>
12 <h1>Pikaday</h1>
13
14 <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
15
16 <p><a href="https://github.com/dbushell/Pikaday"><strong>Pikaday source on GitHub</strong></a></p>
17
18 <label for="datepicker">Date:</label>
19 <br>
20 <input type="text" id="datepicker">
21
22 <h2>What is this?</h2>
23
24 <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
25
26 <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license</p>
27
28
29 <script src="pikaday.js"></script>
30 <script>
31
32 var picker = new Pikaday(
33 {
34 field: document.getElementById('datepicker'),
35 firstDay: 1,
36 minDate: new Date(2000, 0, 1),
37 maxDate: new Date(2020, 12, 31),
38 yearRange: [2000,2020]
39 });
40
41 </script>
42 </body>
43 </html>
File was created 1 {
2 "name": "pikaday",
3 "version": "1.3.3",
4 "description": "A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS",
5 "keywords": [
6 "datepicker",
7 "calendar",
8 "date"
9 ],
10 "homepage": "http://dbushell.github.io/Pikaday/",
11 "bugs": "https://github.com/dbushell/Pikaday/issues",
12 "licenses": [
13 {
14 "type": "BSD",
15 "url": "http://opensource.org/licenses/BSD-3-Clause"
16 },
17 {
18 "type": "MIT",
19 "url": "http://opensource.org/licenses/MIT"
20 }
21 ],
22 "main": "pikaday.js",
23 "repository": {
24 "type": "git",
25 "url": "https://github.com/dbushell/Pikaday.git"
26 },
27 "optionalDependencies": {
28 "moment": "2.x"
29 },
30 "devDependencies": {
31 "mocha": "~1.18.2",
32 "expect.js": "^0.3.1"
33 },
34 "testling": {
35 "harness": "mocha",
36 "files": "tests/*.js",
37 "browsers": [
38 "ie/7..latest",
39 "chrome/latest",
40 "firefox/3.6", "firefox/latest",
41 "safari/latest",
42 "opera/latest"
43 ]
44 }
45 }
46
File was created 1 /*!
2 * Pikaday
3 *
4 * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
5 */
6
7 (function (root, factory)
8 {
9 'use strict';
10
11 var moment;
12 if (typeof exports === 'object') {
13 // CommonJS module
14 // Load moment.js as an optional dependency
15 try { moment = require('moment'); } catch (e) {}
16 module.exports = factory(moment);
17 } else if (typeof define === 'function' && define.amd) {
18 // AMD. Register as an anonymous module.
19 define(function (req)
20 {
21 // Load moment.js as an optional dependency
22 var id = 'moment';
23 try { moment = req(id); } catch (e) {}
24 return factory(moment);
25 });
26 } else {
27 root.Pikaday = factory(root.moment);
28 }
29 }(this, function (moment)
30 {
31 'use strict';
32
33 /**
34 * feature detection and helper functions
35 */
36 var hasMoment = typeof moment === 'function',
37
38 hasEventListeners = !!window.addEventListener,
39
40 document = window.document,
41
42 sto = window.setTimeout,
43
44 addEvent = function(el, e, callback, capture)
45 {
46 if (hasEventListeners) {
47 el.addEventListener(e, callback, !!capture);
48 } else {
49 el.attachEvent('on' + e, callback);
50 }
51 },
52
53 removeEvent = function(el, e, callback, capture)
54 {
55 if (hasEventListeners) {
56 el.removeEventListener(e, callback, !!capture);
57 } else {
58 el.detachEvent('on' + e, callback);
59 }
60 },
61
62 fireEvent = function(el, eventName, data)
63 {
64 var ev;
65
66 if (document.createEvent) {
67 ev = document.createEvent('HTMLEvents');
68 ev.initEvent(eventName, true, false);
69 ev = extend(ev, data);
70 el.dispatchEvent(ev);
71 } else if (document.createEventObject) {
72 ev = document.createEventObject();
73 ev = extend(ev, data);
74 el.fireEvent('on' + eventName, ev);
75 }
76 },
77
78 trim = function(str)
79 {
80 return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
81 },
82
83 hasClass = function(el, cn)
84 {
85 return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
86 },
87
88 addClass = function(el, cn)
89 {
90 if (!hasClass(el, cn)) {
91 el.className = (el.className === '') ? cn : el.className + ' ' + cn;
92 }
93 },
94
95 removeClass = function(el, cn)
96 {
97 el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
98 },
99
100 isArray = function(obj)
101 {
102 return (/Array/).test(Object.prototype.toString.call(obj));
103 },
104
105 isDate = function(obj)
106 {
107 return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
108 },
109
110 isWeekend = function(date)
111 {
112 var day = date.getDay();
113 return day === 0 || day === 6;
114 },
115
116 isLeapYear = function(year)
117 {
118 // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
119 return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
120 },
121
122 getDaysInMonth = function(year, month)
123 {
124 return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
125 },
126
127 setToStartOfDay = function(date)
128 {
129 if (isDate(date)) date.setHours(0,0,0,0);
130 },
131
132 compareDates = function(a,b)
133 {
134 // weak date comparison (use setToStartOfDay(date) to ensure correct result)
135 return a.getTime() === b.getTime();
136 },
137
138 extend = function(to, from, overwrite)
139 {
140 var prop, hasProp;
141 for (prop in from) {
142 hasProp = to[prop] !== undefined;
143 if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
144 if (isDate(from[prop])) {
145 if (overwrite) {
146 to[prop] = new Date(from[prop].getTime());
147 }
148 }
149 else if (isArray(from[prop])) {
150 if (overwrite) {
151 to[prop] = from[prop].slice(0);
152 }
153 } else {
154 to[prop] = extend({}, from[prop], overwrite);
155 }
156 } else if (overwrite || !hasProp) {
157 to[prop] = from[prop];
158 }
159 }
160 return to;
161 },
162
163 adjustCalendar = function(calendar) {
164 if (calendar.month < 0) {
165 calendar.year -= Math.ceil(Math.abs(calendar.month)/12);
166 calendar.month += 12;
167 }
168 if (calendar.month > 11) {
169 calendar.year += Math.floor(Math.abs(calendar.month)/12);
170 calendar.month -= 12;
171 }
172 return calendar;
173 },
174
175 /**
176 * defaults and localisation
177 */
178 defaults = {
179
180 // bind the picker to a form field
181 field: null,
182
183 // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
184 bound: undefined,
185
186 // position of the datepicker, relative to the field (default to bottom & left)
187 // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
188 position: 'bottom left',
189
190 // automatically fit in the viewport even if it means repositioning from the position option
191 reposition: true,
192
193 // the default output format for `.toString()` and `field` value
194 format: 'YYYY-MM-DD',
195
196 // the initial date to view when first opened
197 defaultDate: null,
198
199 // make the `defaultDate` the initial selected value
200 setDefaultDate: false,
201
202 // first day of week (0: Sunday, 1: Monday etc)
203 firstDay: 0,
204
205 // the minimum/earliest date that can be selected
206 minDate: null,
207 // the maximum/latest date that can be selected
208 maxDate: null,
209
210 // number of years either side, or array of upper/lower range
211 yearRange: 100,
212
213 // show week numbers at head of row
214 showWeekNumber: false,
215
216 // used internally (don't config outside)
217 minYear: 0,
218 maxYear: 9999,
219 minMonth: undefined,
220 maxMonth: undefined,
221
222 startRange: null,
223 endRange: null,
224
225 isRTL: false,
226
227 // Additional text to append to the year in the calendar title
228 yearSuffix: '',
229
230 // Render the month after year in the calendar title
231 showMonthAfterYear: false,
232
233 // how many months are visible
234 numberOfMonths: 1,
235
236 // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
237 // only used for the first display or when a selected date is not visible
238 mainCalendar: 'left',
239
240 // Specify a DOM element to render the calendar in
241 container: undefined,
242
243 // internationalization
244 i18n: {
245 previousMonth : 'Previous Month',
246 nextMonth : 'Next Month',
247 months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
248 weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
249 weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
250 },
251
252 // Theme Classname
253 theme: null,
254
255 // callback function
256 onSelect: null,
257 onOpen: null,
258 onClose: null,
259 onDraw: null
260 },
261
262
263 /**
264 * templating functions to abstract HTML rendering
265 */
266 renderDayName = function(opts, day, abbr)
267 {
268 day += opts.firstDay;
269 while (day >= 7) {
270 day -= 7;
271 }
272 return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
273 },
274
275 renderDay = function(opts)
276 {
277 if (opts.isEmpty) {
278 return '<td class="is-empty"></td>';
279 }
280 var arr = [];
281 if (opts.isDisabled) {
282 arr.push('is-disabled');
283 }
284 if (opts.isToday) {
285 arr.push('is-today');
286 }
287 if (opts.isSelected) {
288 arr.push('is-selected');
289 }
290 if (opts.isInRange) {
291 arr.push('is-inrange');
292 }
293 if (opts.isStartRange) {
294 arr.push('is-startrange');
295 }
296 if (opts.isEndRange) {
297 arr.push('is-endrange');
298 }
299 return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '">' +
300 '<button class="pika-button pika-day" type="button" ' +
301 'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
302 opts.day +
303 '</button>' +
304 '</td>';
305 },
306
307 renderWeek = function (d, m, y) {
308 // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
309 var onejan = new Date(y, 0, 1),
310 weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
311 return '<td class="pika-week">' + weekNum + '</td>';
312 },
313
314 renderRow = function(days, isRTL)
315 {
316 return '<tr>' + (isRTL ? days.reverse() : days).join('') + '</tr>';
317 },
318
319 renderBody = function(rows)
320 {
321 return '<tbody>' + rows.join('') + '</tbody>';
322 },
323
324 renderHead = function(opts)
325 {
326 var i, arr = [];
327 if (opts.showWeekNumber) {
328 arr.push('<th></th>');
329 }
330 for (i = 0; i < 7; i++) {
331 arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
332 }
333 return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
334 },
335
336 renderTitle = function(instance, c, year, month, refYear)
337 {
338 var i, j, arr,
339 opts = instance._o,
340 isMinYear = year === opts.minYear,
341 isMaxYear = year === opts.maxYear,
342 html = '<div class="pika-title">',
343 monthHtml,
344 yearHtml,
345 prev = true,
346 next = true;
347
348 for (arr = [], i = 0; i < 12; i++) {
349 arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
350 (i === month ? ' selected': '') +
351 ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
352 opts.i18n.months[i] + '</option>');
353 }
354 monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
355
356 if (isArray(opts.yearRange)) {
357 i = opts.yearRange[0];
358 j = opts.yearRange[1] + 1;
359 } else {
360 i = year - opts.yearRange;
361 j = 1 + year + opts.yearRange;
362 }
363
364 for (arr = []; i < j && i <= opts.maxYear; i++) {
365 if (i >= opts.minYear) {
366 arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
367 }
368 }
369 yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
370
371 if (opts.showMonthAfterYear) {
372 html += yearHtml + monthHtml;
373 } else {
374 html += monthHtml + yearHtml;
375 }
376
377 if (isMinYear && (month === 0 || opts.minMonth >= month)) {
378 prev = false;
379 }
380
381 if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
382 next = false;
383 }
384
385 if (c === 0) {
386 html += '<button class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
387 }
388 if (c === (instance._o.numberOfMonths - 1) ) {
389 html += '<button class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
390 }
391
392 return html += '</div>';
393 },
394
395 renderTable = function(opts, data)
396 {
397 return '<table cellpadding="0" cellspacing="0" class="pika-table">' + renderHead(opts) + renderBody(data) + '</table>';
398 },
399
400
401 /**
402 * Pikaday constructor
403 */
404 Pikaday = function(options)
405 {
406 var self = this,
407 opts = self.config(options);
408
409 self._onMouseDown = function(e)
410 {
411 if (!self._v) {
412 return;
413 }
414 e = e || window.event;
415 var target = e.target || e.srcElement;
416 if (!target) {
417 return;
418 }
419
420 if (!hasClass(target.parentNode, 'is-disabled')) {
421 if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
422 self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
423 if (opts.bound) {
424 sto(function() {
425 self.hide();
426 if (opts.field) {
427 opts.field.blur();
428 }
429 }, 100);
430 }
431 return;
432 }
433 else if (hasClass(target, 'pika-prev')) {
434 self.prevMonth();
435 }
436 else if (hasClass(target, 'pika-next')) {
437 self.nextMonth();
438 }
439 }
440 if (!hasClass(target, 'pika-select')) {
441 if (e.preventDefault) {
442 e.preventDefault();
443 } else {
444 e.returnValue = false;
445 return false;
446 }
447 } else {
448 self._c = true;
449 }
450 };
451
452 self._onChange = function(e)
453 {
454 e = e || window.event;
455 var target = e.target || e.srcElement;
456 if (!target) {
457 return;
458 }
459 if (hasClass(target, 'pika-select-month')) {
460 self.gotoMonth(target.value);
461 }
462 else if (hasClass(target, 'pika-select-year')) {
463 self.gotoYear(target.value);
464 }
465 };
466
467 self._onInputChange = function(e)
468 {
469 var date;
470
471 if (e.firedBy === self) {
472 return;
473 }
474 if (hasMoment) {
475 date = moment(opts.field.value, opts.format);
476 date = (date && date.isValid()) ? date.toDate() : null;
477 }
478 else {
479 date = new Date(Date.parse(opts.field.value));
480 }
481 if (isDate(date)) {
482 self.setDate(date);
483 }
484 if (!self._v) {
485 self.show();
486 }
487 };
488
489 self._onInputFocus = function()
490 {
491 self.show();
492 };
493
494 self._onInputClick = function()
495 {
496 self.show();
497 };
498
499 self._onInputBlur = function()
500 {
501 // IE allows pika div to gain focus; catch blur the input field
502 var pEl = document.activeElement;
503 do {
504 if (hasClass(pEl, 'pika-single')) {
505 return;
506 }
507 }
508 while ((pEl = pEl.parentNode));
509
510 if (!self._c) {
511 self._b = sto(function() {
512 self.hide();
513 }, 50);
514 }
515 self._c = false;
516 };
517
518 self._onClick = function(e)
519 {
520 e = e || window.event;
521 var target = e.target || e.srcElement,
522 pEl = target;
523 if (!target) {
524 return;
525 }
526 if (!hasEventListeners && hasClass(target, 'pika-select')) {
527 if (!target.onchange) {
528 target.setAttribute('onchange', 'return;');
529 addEvent(target, 'change', self._onChange);
530 }
531 }
532 do {
533 if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
534 return;
535 }
536 }
537 while ((pEl = pEl.parentNode));
538 if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
539 self.hide();
540 }
541 };
542
543 self.el = document.createElement('div');
544 self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
545
546 addEvent(self.el, 'ontouchend' in document ? 'touchend' : 'mousedown', self._onMouseDown, true);
547 addEvent(self.el, 'change', self._onChange);
548
549 if (opts.field) {
550 if (opts.container) {
551 opts.container.appendChild(self.el);
552 } else if (opts.bound) {
553 document.body.appendChild(self.el);
554 } else {
555 opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
556 }
557 addEvent(opts.field, 'change', self._onInputChange);
558
559 if (!opts.defaultDate) {
560 if (hasMoment && opts.field.value) {
561 opts.defaultDate = moment(opts.field.value, opts.format).toDate();
562 } else {
563 opts.defaultDate = new Date(Date.parse(opts.field.value));
564 }
565 opts.setDefaultDate = true;
566 }
567 }
568
569 var defDate = opts.defaultDate;
570
571 if (isDate(defDate)) {
572 if (opts.setDefaultDate) {
573 self.setDate(defDate, true);
574 } else {
575 self.gotoDate(defDate);
576 }
577 } else {
578 self.gotoDate(new Date());
579 }
580
581 if (opts.bound) {
582 this.hide();
583 self.el.className += ' is-bound';
584 addEvent(opts.trigger, 'click', self._onInputClick);
585 addEvent(opts.trigger, 'focus', self._onInputFocus);
586 addEvent(opts.trigger, 'blur', self._onInputBlur);
587 } else {
588 this.show();
589 }
590 };
591
592
593 /**
594 * public Pikaday API
595 */
596 Pikaday.prototype = {
597
598
599 /**
600 * configure functionality
601 */
602 config: function(options)
603 {
604 if (!this._o) {
605 this._o = extend({}, defaults, true);
606 }
607
608 var opts = extend(this._o, options, true);
609
610 opts.isRTL = !!opts.isRTL;
611
612 opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
613
614 opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
615
616 opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
617
618 opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
619
620 opts.disableWeekends = !!opts.disableWeekends;
621
622 opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
623
624 var nom = parseInt(opts.numberOfMonths, 10) || 1;
625 opts.numberOfMonths = nom > 4 ? 4 : nom;
626
627 if (!isDate(opts.minDate)) {
628 opts.minDate = false;
629 }
630 if (!isDate(opts.maxDate)) {
631 opts.maxDate = false;
632 }
633 if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
634 opts.maxDate = opts.minDate = false;
635 }
636 if (opts.minDate) {
637 this.setMinDate(opts.minDate);
638 }
639 if (opts.maxDate) {
640 setToStartOfDay(opts.maxDate);
641 opts.maxYear = opts.maxDate.getFullYear();
642 opts.maxMonth = opts.maxDate.getMonth();
643 }
644
645 if (isArray(opts.yearRange)) {
646 var fallback = new Date().getFullYear() - 10;
647 opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
648 opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
649 } else {
650 opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
651 if (opts.yearRange > 100) {
652 opts.yearRange = 100;
653 }
654 }
655
656 return opts;
657 },
658
659 /**
660 * return a formatted string of the current selection (using Moment.js if available)
661 */
662 toString: function(format)
663 {
664 return !isDate(this._d) ? '' : hasMoment ? moment(this._d).format(format || this._o.format) : this._d.toDateString();
665 },
666
667 /**
668 * return a Moment.js object of the current selection (if available)
669 */
670 getMoment: function()
671 {
672 return hasMoment ? moment(this._d) : null;
673 },
674
675 /**
676 * set the current selection from a Moment.js object (if available)
677 */
678 setMoment: function(date, preventOnSelect)
679 {
680 if (hasMoment && moment.isMoment(date)) {
681 this.setDate(date.toDate(), preventOnSelect);
682 }
683 },
684
685 /**
686 * return a Date object of the current selection
687 */
688 getDate: function()
689 {
690 return isDate(this._d) ? new Date(this._d.getTime()) : null;
691 },
692
693 /**
694 * set the current selection
695 */
696 setDate: function(date, preventOnSelect)
697 {
698 if (!date) {
699 this._d = null;
700
701 if (this._o.field) {
702 this._o.field.value = '';
703 fireEvent(this._o.field, 'change', { firedBy: this });
704 }
705
706 return this.draw();
707 }
708 if (typeof date === 'string') {
709 date = new Date(Date.parse(date));
710 }
711 if (!isDate(date)) {
712 return;
713 }
714
715 var min = this._o.minDate,
716 max = this._o.maxDate;
717
718 if (isDate(min) && date < min) {
719 date = min;
720 } else if (isDate(max) && date > max) {
721 date = max;
722 }
723
724 this._d = new Date(date.getTime());
725 setToStartOfDay(this._d);
726 this.gotoDate(this._d);
727
728 if (this._o.field) {
729 this._o.field.value = this.toString();
730 fireEvent(this._o.field, 'change', { firedBy: this });
731 }
732 if (!preventOnSelect && typeof this._o.onSelect === 'function') {
733 this._o.onSelect.call(this, this.getDate());
734 }
735 },
736
737 /**
738 * change view to a specific date
739 */
740 gotoDate: function(date)
741 {
742 var newCalendar = true;
743
744 if (!isDate(date)) {
745 return;
746 }
747
748 if (this.calendars) {
749 var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
750 lastVisibleDate = new Date(this.calendars[this.calendars.length-1].year, this.calendars[this.calendars.length-1].month, 1),
751 visibleDate = date.getTime();
752 // get the end of the month
753 lastVisibleDate.setMonth(lastVisibleDate.getMonth()+1);
754 lastVisibleDate.setDate(lastVisibleDate.getDate()-1);
755 newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
756 }
757
758 if (newCalendar) {
759 this.calendars = [{
760 month: date.getMonth(),
761 year: date.getFullYear()
762 }];
763 if (this._o.mainCalendar === 'right') {
764 this.calendars[0].month += 1 - this._o.numberOfMonths;
765 }
766 }
767
768 this.adjustCalendars();
769 },
770
771 adjustCalendars: function() {
772 this.calendars[0] = adjustCalendar(this.calendars[0]);
773 for (var c = 1; c < this._o.numberOfMonths; c++) {
774 this.calendars[c] = adjustCalendar({
775 month: this.calendars[0].month + c,
776 year: this.calendars[0].year
777 });
778 }
779 this.draw();
780 },
781
782 gotoToday: function()
783 {
784 this.gotoDate(new Date());
785 },
786
787 /**
788 * change view to a specific month (zero-index, e.g. 0: January)
789 */
790 gotoMonth: function(month)
791 {
792 if (!isNaN(month)) {
793 this.calendars[0].month = parseInt(month, 10);
794 this.adjustCalendars();
795 }
796 },
797
798 nextMonth: function()
799 {
800 this.calendars[0].month++;
801 this.adjustCalendars();
802 },
803
804 prevMonth: function()
805 {
806 this.calendars[0].month--;
807 this.adjustCalendars();
808 },
809
810 /**
811 * change view to a specific full year (e.g. "2012")
812 */
813 gotoYear: function(year)
814 {
815 if (!isNaN(year)) {
816 this.calendars[0].year = parseInt(year, 10);
817 this.adjustCalendars();
818 }
819 },
820
821 /**
822 * change the minDate
823 */
824 setMinDate: function(value)
825 {
826 setToStartOfDay(value);
827 this._o.minDate = value;
828 this._o.minYear = value.getFullYear();
829 this._o.minMonth = value.getMonth();
830 },
831
832 /**
833 * change the maxDate
834 */
835 setMaxDate: function(value)
836 {
837 this._o.maxDate = value;
838 },
839
840 setStartRange: function(value)
841 {
842 this._o.startRange = value;
843 },
844
845 setEndRange: function(value)
846 {
847 this._o.endRange = value;
848 },
849
850 /**
851 * refresh the HTML
852 */
853 draw: function(force)
854 {
855 if (!this._v && !force) {
856 return;
857 }
858 var opts = this._o,
859 minYear = opts.minYear,
860 maxYear = opts.maxYear,
861 minMonth = opts.minMonth,
862 maxMonth = opts.maxMonth,
863 html = '';
864
865 if (this._y <= minYear) {
866 this._y = minYear;
867 if (!isNaN(minMonth) && this._m < minMonth) {
868 this._m = minMonth;
869 }
870 }
871 if (this._y >= maxYear) {
872 this._y = maxYear;
873 if (!isNaN(maxMonth) && this._m > maxMonth) {
874 this._m = maxMonth;
875 }
876 }
877
878 for (var c = 0; c < opts.numberOfMonths; c++) {
879 html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year) + this.render(this.calendars[c].year, this.calendars[c].month) + '</div>';
880 }
881
882 this.el.innerHTML = html;
883
884 if (opts.bound) {
885 if(opts.field.type !== 'hidden') {
886 sto(function() {
887 opts.trigger.focus();
888 }, 1);
889 }
890 }
891
892 if (typeof this._o.onDraw === 'function') {
893 var self = this;
894 sto(function() {
895 self._o.onDraw.call(self);
896 }, 0);
897 }
898 },
899
900 adjustPosition: function()
901 {
902 var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
903
904 if (this._o.container) return;
905
906 this.el.style.position = 'absolute';
907
908 field = this._o.trigger;
909 pEl = field;
910 width = this.el.offsetWidth;
911 height = this.el.offsetHeight;
912 viewportWidth = window.innerWidth || document.documentElement.clientWidth;
913 viewportHeight = window.innerHeight || document.documentElement.clientHeight;
914 scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
915
916 if (typeof field.getBoundingClientRect === 'function') {
917 clientRect = field.getBoundingClientRect();
918 left = clientRect.left + window.pageXOffset;
919 top = clientRect.bottom + window.pageYOffset;
920 } else {
921 left = pEl.offsetLeft;
922 top = pEl.offsetTop + pEl.offsetHeight;
923 while((pEl = pEl.offsetParent)) {
924 left += pEl.offsetLeft;
925 top += pEl.offsetTop;
926 }
927 }
928
929 // default position is bottom & left
930 if ((this._o.reposition && left + width > viewportWidth) ||
931 (
932 this._o.position.indexOf('right') > -1 &&
933 left - width + field.offsetWidth > 0
934 )
935 ) {
936 left = left - width + field.offsetWidth;
937 }
938 if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
939 (
940 this._o.position.indexOf('top') > -1 &&
941 top - height - field.offsetHeight > 0
942 )
943 ) {
944 top = top - height - field.offsetHeight;
945 }
946
947 this.el.style.left = left + 'px';
948 this.el.style.top = top + 'px';
949 },
950
951 /**
952 * render HTML for a particular month
953 */
954 render: function(year, month)
955 {
956 var opts = this._o,
957 now = new Date(),
958 days = getDaysInMonth(year, month),
959 before = new Date(year, month, 1).getDay(),
960 data = [],
961 row = [];
962 setToStartOfDay(now);
963 if (opts.firstDay > 0) {
964 before -= opts.firstDay;
965 if (before < 0) {
966 before += 7;
967 }
968 }
969 var cells = days + before,
970 after = cells;
971 while(after > 7) {
972 after -= 7;
973 }
974 cells += 7 - after;
975 for (var i = 0, r = 0; i < cells; i++)
976 {
977 var day = new Date(year, month, 1 + (i - before)),
978 isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
979 isToday = compareDates(day, now),
980 isEmpty = i < before || i >= (days + before),
981 isStartRange = opts.startRange && compareDates(opts.startRange, day),
982 isEndRange = opts.endRange && compareDates(opts.endRange, day),
983 isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
984 isDisabled = (opts.minDate && day < opts.minDate) ||
985 (opts.maxDate && day > opts.maxDate) ||
986 (opts.disableWeekends && isWeekend(day)) ||
987 (opts.disableDayFn && opts.disableDayFn(day)),
988 dayConfig = {
989 day: 1 + (i - before),
990 month: month,
991 year: year,
992 isSelected: isSelected,
993 isToday: isToday,
994 isDisabled: isDisabled,
995 isEmpty: isEmpty,
996 isStartRange: isStartRange,
997 isEndRange: isEndRange,
998 isInRange: isInRange
999 };
1000
1001 row.push(renderDay(dayConfig));
1002
1003 if (++r === 7) {
1004 if (opts.showWeekNumber) {
1005 row.unshift(renderWeek(i - before, month, year));
1006 }
1007 data.push(renderRow(row, opts.isRTL));
1008 row = [];
1009 r = 0;
1010 }
1011 }
1012 return renderTable(opts, data);
1013 },
1014
1015 isVisible: function()
1016 {
1017 return this._v;
1018 },
1019
1020 show: function()
1021 {
1022 if (!this._v) {
1023 removeClass(this.el, 'is-hidden');
1024 this._v = true;
1025 this.draw();
1026 if (this._o.bound) {
1027 addEvent(document, 'click', this._onClick);
1028 this.adjustPosition();
1029 }
1030 if (typeof this._o.onOpen === 'function') {
1031 this._o.onOpen.call(this);
1032 }
1033 }
1034 },
1035
1036 hide: function()
1037 {
1038 var v = this._v;
1039 if (v !== false) {
1040 if (this._o.bound) {
1041 removeEvent(document, 'click', this._onClick);
1042 }
1043 this.el.style.position = 'static'; // reset
1044 this.el.style.left = 'auto';
1045 this.el.style.top = 'auto';
1046 addClass(this.el, 'is-hidden');
1047 this._v = false;
1048 if (v !== undefined && typeof this._o.onClose === 'function') {
1049 this._o.onClose.call(this);
1050 }
1051 }
1052 },
1053
1054 /**
1055 * GAME OVER
1056 */
1057 destroy: function()
1058 {
1059 this.hide();
1060 removeEvent(this.el, 'mousedown', this._onMouseDown, true);
1061 removeEvent(this.el, 'change', this._onChange);
1062 if (this._o.field) {
1063 removeEvent(this._o.field, 'change', this._onInputChange);
1064 if (this._o.bound) {
1065 removeEvent(this._o.trigger, 'click', this._onInputClick);
1066 removeEvent(this._o.trigger, 'focus', this._onInputFocus);
1067 removeEvent(this._o.trigger, 'blur', this._onInputBlur);
1068 }
1069 }
1070 if (this.el.parentNode) {
1071 this.el.parentNode.removeChild(this.el);
1072 }
1073 }
1074
1075 };
1076
1077 return Pikaday;
1078
1079 }));
1080
plugins/pikaday.jquery.js
Diff comments   View file @5c8f10d
File was created 1 /*!
2 * Pikaday jQuery plugin.
3 *
4 * Copyright © 2013 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
5 */
6
7 (function (root, factory)
8 {
9 'use strict';
10
11 if (typeof exports === 'object') {
12 // CommonJS module
13 factory(require('jquery'), require('../pikaday'));
14 } else if (typeof define === 'function' && define.amd) {
15 // AMD. Register as an anonymous module.
16 define(['jquery', 'pikaday'], factory);
17 } else {
18 // Browser globals
19 factory(root.jQuery, root.Pikaday);
20 }
21 }(this, function ($, Pikaday)
22 {
23 'use strict';
24
25 $.fn.pikaday = function()
26 {
27 var args = arguments;
28
29 if (!args || !args.length) {
30 args = [{ }];
31 }
32
33 return this.each(function()
34 {
35 var self = $(this),
36 plugin = self.data('pikaday');
37
38 if (!(plugin instanceof Pikaday)) {
39 if (typeof args[0] === 'object') {
40 var options = $.extend({}, args[0]);
41 options.field = self[0];
42 self.data('pikaday', new Pikaday(options));
43 }
44 } else {
45 if (typeof args[0] === 'string' && typeof plugin[args[0]] === 'function') {
46 plugin[args[0]].apply(plugin, Array.prototype.slice.call(args,1));
47 }
48 }
49 });
50 };
51
52 }));
53
scss/pikaday.scss
Diff comments   View file @5c8f10d
File was created 1 /*!
2 * Pikaday
3 * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
4 */
5
6 .pika-single {
7 z-index: 9999;
8 display: block;
9 position: relative;
10 color: #333;
11 background: #fff;
12 border: 1px solid #ccc;
13 border-bottom-color: #bbb;
14 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
15
16 &.is-hidden {
17 display: none;
18 }
19
20 &.is-bound {
21 position: absolute;
22 box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
23 }
24 }
25
26 // clear child float (pika-lendar), using the famous micro clearfix hack
27 // http://nicolasgallagher.com/micro-clearfix-hack/
28 .pika-single {
29 *zoom: 1;
30
31 &:before,
32 &:after {
33 content: " ";
34 display: table;
35 }
36
37 &:after { clear: both }
38 }
39
40 .pika-lendar {
41 float: left;
42 width: 240px;
43 margin: 8px;
44 }
45
46 .pika-title {
47 position: relative;
48 text-align: center;
49
50 select {
51 cursor: pointer;
52 position: absolute;
53 z-index: 9998;
54 margin: 0;
55 left: 0;
56 top: 5px;
57 filter: alpha(opacity=0);
58 opacity: 0;
59 }
60 }
61
62 .pika-label {
63 display: inline-block;
64 *display: inline;
65 position: relative;
66 z-index: 9999;
67 overflow: hidden;
68 margin: 0;
69 padding: 5px 3px;
70 font-size: 14px;
71 line-height: 20px;
72 font-weight: bold;
73 background-color: #fff;
74 }
75
76 .pika-prev,
77 .pika-next {
78 display: block;
79 cursor: pointer;
80 position: relative;
81 outline: none;
82 border: 0;
83 padding: 0;
84 width: 20px;
85 height: 30px;
86 text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
87 white-space: nowrap;
88 overflow: hidden;
89 background-color: transparent;
90 background-position: center center;
91 background-repeat: no-repeat;
92 background-size: 75% 75%;
93 opacity: .5;
94 *position: absolute;
95 *top: 0;
96
97 &:hover {
98 opacity: 1;
99 }
100
101 &.is-disabled {
102 cursor: default;
103 opacity: .2;
104 }
105 }
106
107 .pika-prev,
108 .is-rtl .pika-next {
109 float: left;
110 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
111 *left: 0;
112 }
113
114 .pika-next,
115 .is-rtl .pika-prev {
116 float: right;
117 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
118 *right: 0;
119 }
120
121 .pika-select {
122 display: inline-block;
123 *display: inline;
124 }
125
126 .pika-table {
127 width: 100%;
128 border-collapse: collapse;
129 border-spacing: 0;
130 border: 0;
131
132 th,
133 td {
134 width: 14.285714285714286%;
135 padding: 0;
136 }
137
138 th {
139 color: #999;
140 font-size: 12px;
141 line-height: 25px;
142 font-weight: bold;
143 text-align: center;
144 }
145
146 abbr {
147 border-bottom: none;
148 cursor: help;
149 }
150 }
151
152 .pika-button {
153 cursor: pointer;
154 display: block;
155 -moz-box-sizing: border-box;
156 box-sizing: border-box;
157 outline: none;
158 border: 0;
159 margin: 0;
160 width: 100%;
161 padding: 5px;
162 color: #666;
163 font-size: 12px;
164 line-height: 15px;
165 text-align: right;
166 background: #f5f5f5;
167
168 .is-today & {
169 color: #33aaff;
170 font-weight: bold;
171 }
172
173 .is-selected & {
174 color: #fff;
175 font-weight: bold;
176 background: #33aaff;
177 box-shadow: inset 0 1px 3px #178fe5;
178 border-radius: 3px;
179 }
180
181 .is-disabled & {
182 pointer-events: none;
183 cursor: default;
184 color: #999;
185 opacity: .3;
186 }
187
188 &:hover {
189 color: #fff;
190 background: #ff8000;
191 box-shadow: none;
192 border-radius: 3px;
193 }
194 }
195
196 .pika-week {
197 font-size: 11px;
198 color: #999;
199 }
200
201 .is-inrange .pika-button {
202 background: #D5E9F7;
203 }
204
205 .is-startrange .pika-button {
206 color: #fff;
207 background: #6CB31D;
208 box-shadow: none;
209 border-radius: 3px;
210 }
211
212 .is-endrange .pika-button {
213 color: #fff;
214 background: #33aaff;
215 box-shadow: none;
216 border-radius: 3px;
217 }
218
File was created 1 var Pikaday = require('../'),
2 expect = require('expect.js');
3
4 describe('Pikaday public method', function ()
5 {
6 'use strict';
7
8 describe('#toString()', function ()
9 {
10 it('should return empty string when date not set', function ()
11 {
12 var pikaday = new Pikaday();
13 expect(pikaday.toString()).to.be.empty;
14 });
15
16 it('should return date string, formatted by moment, when date is set', function() {
17 var date = new Date(2014, 3, 25),
18 pikaday = new Pikaday({
19 format: 'DD-MM-YY'
20 });
21
22 pikaday.setDate(date);
23 expect(pikaday.toString()).to.eql('25-04-14');
24 });
25 });
26
27 describe('When specifying minDate option in Constructor', function () {
28 it('Should remove the time portion (flattening to midnight)', function () {
29 var date = new Date(2015, 1, 17, 22, 10, 5),
30 expected = new Date(2015, 1, 17, 0, 0, 0),
31 pikaday = new Pikaday({ minDate: date });
32
33 expect(pikaday._o.minDate).to.eql(expected);
34 });
35 });
36
37 describe('#setMinDate()', function () {
38 it('should flatten date to midnight ignoring time portion (consistent with minDate option in ctor)', function () {
39 var date = new Date(2015, 1, 17, 22, 10, 5),
40 expected = new Date(2015, 1, 17, 0, 0, 0),
41 pikaday = new Pikaday();
42
43 pikaday.setMinDate(date);
44 expect(pikaday._o.minDate).to.eql(expected);
45 });
46 });
47 });
48
File was created 1 var Pikaday = require('../'),
2 expect = require('expect.js');
3
4 describe('Pikaday', function ()
5 {
6 'use strict';
7
8 it('should expose as a CommonJS module', function ()
9 {
10 expect(Pikaday).to.be.a('function');
11 });
12
13 it('should NOT leak to the global object', function ()
14 {
15 expect(window).to.not.have.property('Pikaday');
16 });
17
18 it('should be possible to create a new instance', function ()
19 {
20 expect(function () {
21 new Pikaday();
22 }).to.not.throwException();
23 });
24 });