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
... ... @@ -0,0 +1,15 @@
  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
0 16 \ No newline at end of file
... ...
... ... @@ -0,0 +1 @@
  1 +* text=auto
... ...
... ... @@ -0,0 +1,2 @@
  1 +node_modules
  2 +.c9revisions
... ...
... ... @@ -0,0 +1,31 @@
  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 +}
... ...
... ... @@ -0,0 +1,74 @@
  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…
... ...
... ... @@ -0,0 +1,36 @@
  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.
0 37 \ No newline at end of file
... ...
... ... @@ -0,0 +1,331 @@
  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"
... ...
... ... @@ -0,0 +1,28 @@
  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 +}
... ...
... ... @@ -0,0 +1,17 @@
  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 +}
... ...
... ... @@ -0,0 +1,222 @@
  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 +
... ...
... ... @@ -0,0 +1,42 @@
  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 +}
0 43 \ No newline at end of file
... ...
... ... @@ -0,0 +1,56 @@
  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 +}
... ...
examples/amd.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,50 @@
  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>
0 51 \ No newline at end of file
... ...
examples/bound-container.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,52 @@
  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>
0 53 \ No newline at end of file
... ...
examples/calendars.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,57 @@
  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>
... ...
examples/container.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,52 @@
  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>
0 53 \ No newline at end of file
... ...
examples/date-range.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,83 @@
  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>
0 84 \ No newline at end of file
... ...
examples/jquery-amd.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,54 @@
  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>
0 55 \ No newline at end of file
... ...
examples/jquery.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,46 @@
  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>
0 47 \ No newline at end of file
... ...
examples/moment.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,53 @@
  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>
0 54 \ No newline at end of file
... ...
examples/positions.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,106 @@
  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>
... ...
examples/theme.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,83 @@
  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>
... ...
examples/trigger.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,46 @@
  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>
0 47 \ No newline at end of file
... ...
examples/weeknumbers.html
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,41 @@
  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>
... ...
... ... @@ -0,0 +1,43 @@
  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>
0 44 \ No newline at end of file
... ...
... ... @@ -0,0 +1,45 @@
  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 +}
... ...
... ... @@ -0,0 +1,1079 @@
  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 +}));
... ...
plugins/pikaday.jquery.js
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,52 @@
  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 +}));
... ...
scss/pikaday.scss
Diff comments   View file @5c8f10d
... ... @@ -0,0 +1,217 @@
  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 +}
... ...
... ... @@ -0,0 +1,47 @@
  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 +});
... ...
... ... @@ -0,0 +1,24 @@
  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 +});
0 25 \ No newline at end of file
... ...