jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: jingrow:master
Branches Tags
jingrow:master
jingrow:develop
jingrow:time-sliders
jingrow:v2.2.3
jingrow:v2.2.2
jingrow:v2.2.0
jingrow:v2.1.0
jingrow:v2.0.2
jingrow:v2.0.1
jingrow:v2.0.0
jingrow:v1.2.4
jingrow:v1.2.3
jingrow:v1.2.2
jingrow:v1.2.1
jingrow:v1.2.0
jingrow:v1.1.0
jingrow:v1.0.0
..
compare: jingrow:v2.0.2
Branches Tags
jingrow:master
jingrow:develop
jingrow:time-sliders
jingrow:v2.2.3
jingrow:v2.2.2
jingrow:v2.2.0
jingrow:v2.1.0
jingrow:v2.0.2
jingrow:v2.0.1
jingrow:v2.0.0
jingrow:v1.2.4
jingrow:v1.2.3
jingrow:v1.2.2
jingrow:v1.2.1
jingrow:v1.2.0
jingrow:v1.1.0
jingrow:v1.0.0

No commits in common. "master" and "v2.0.2" have entirely different histories.
master ... v2.0.2

45 changed files with 2659 additions and 3633 deletions
Show Stats Expand all files Collapse all files

21
LICENSE.md
View File

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2016 Timofey Marochkin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

37
README.md
View File

@ -1,6 +1,6 @@
# Air Datepicker # Air Datepicker
Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested on Android 4.4+ and iOS8+). Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+).
![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img-time.png) ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img-time.png)
@ -26,41 +26,6 @@ $('.my-datepicker').datepicker([options])
## Change log ## Change log
### v2.2.3
* fixed min,max dates in decade mode
### v2.2.2
* fixed min,max dates handling
### v2.2.1
* changed RegExp for recognizing date parts
* changed jquery version dependency
### v2.2.0
* added `onlyTimepicker` option
* added `onShow` and `onHide` callbacks
* added `VERSION` field to plugin's prototype
* now for selecting same date in `range` mode, you should set `{toggleSelected: false}`
* fixed `dateFormat` method (fixed wrong month name in Hungarian language)
* fixed second call of `onRenderCallback`
* fixed `_getCell()` throwing exception
* new language:
- `sk` thanks to [RobiNN1](https://github.com/RobiNN1)
### v2.1.0
* added possibility to select single date when `{range: true}`
* added support of 12 hours mode in `altFieldDateFormat`
* improved work with minDate and maxDate when `{timepicker: true}`
* fixed wrong class adding when `{range: true}`
* new languages:
- `es` thanks to [MarioAraque](https://github.com/MarioAraque)
- `cs` thanks to [liborm85](https://github.com/liborm85)
- `hu` thanks to [gergo85](https://github.com/gergo85)
- `fi` thanks to [joonaskaskisolaphz](https://github.com/joonaskaskisolaphz)
- `pl` thanks to [xiio](https://github.com/xiio)
- `fr` thanks to [nicooprat](https://github.com/nicooprat)
### v2.0.2 ### v2.0.2
* fixed dates array in `onSelect` callback * fixed dates array in `onSelect` callback

8
bower.json
View File

@ -1,13 +1,13 @@
{ {
"name": "air-datepicker", "name": "air-datepicker",
"version": "2.2.3", "version": "2.0.2",
"authors": [ "authors": [
"t1m0n <t1m0n.tr@gmail.com>" "t1m0n <t1m0n.tr@gmail.com>"
], ],
"description": "A lightweight, customizable, powerful jQuery datepicker", "description": "A lightweight, customizable, powerful jQuery datepicker",
"main": [ "main": [
"dist/js/datepicker.js", "dist/js/datepicker.min.js",
"dist/css/datepicker.css" "dist/css/datepicker.min.css"
], ],
"keywords": [ "keywords": [
"datepicker", "datepicker",
@ -30,6 +30,6 @@
"tests" "tests"
], ],
"dependencies": { "dependencies": {
"jquery": ">=2.0.0 <4.0.0" "jquery": "^2.2.3"
} }
} }

112
dist/css/datepicker.css vendored
View File

@ -18,32 +18,14 @@
background: none; background: none;
border: none; } border: none; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #a2ddf6; }
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* ------------------------------------------------- /* -------------------------------------------------
Datepicker cells Datepicker cells
------------------------------------------------- */ ------------------------------------------------- */
.datepicker--cells { .datepicker--cells {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; } flex-wrap: wrap; }
@ -51,11 +33,14 @@
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
position: relative; position: relative;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
height: 32px; height: 32px;
@ -106,20 +91,26 @@
cursor: default; } cursor: default; }
.datepicker--days-names { .datepicker--days-names {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin: 8px 0 3px; } margin: 8px 0 3px; }
.datepicker--day-name { .datepicker--day-name {
color: #FF9A19; color: #FF9A19;
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
text-align: center; text-align: center;
@ -190,20 +181,29 @@
position: absolute; position: absolute;
left: -100000px; left: -100000px;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
z-index: 100; } z-index: 100; }
.datepicker.-from-top- { .datepicker.-from-top- {
-webkit-transform: translateY(-8px);
transform: translateY(-8px); } transform: translateY(-8px); }
.datepicker.-from-right- { .datepicker.-from-right- {
-webkit-transform: translateX(8px);
transform: translateX(8px); } transform: translateX(8px); }
.datepicker.-from-bottom- { .datepicker.-from-bottom- {
-webkit-transform: translateY(8px);
transform: translateY(8px); } transform: translateY(8px); }
.datepicker.-from-left- { .datepicker.-from-left- {
-webkit-transform: translateX(-8px);
transform: translateX(-8px); } transform: translateX(-8px); }
.datepicker.active { .datepicker.active {
opacity: 1; opacity: 1;
-webkit-transform: translate(0);
transform: translate(0); transform: translate(0);
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; } transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
.datepicker-inline .datepicker { .datepicker-inline .datepicker {
border-color: #d7d7d7; border-color: #d7d7d7;
@ -212,6 +212,7 @@
left: auto; left: auto;
right: auto; right: auto;
opacity: 1; opacity: 1;
-webkit-transform: none;
transform: none; } transform: none; }
.datepicker-inline .datepicker--pointer { .datepicker-inline .datepicker--pointer {
@ -220,8 +221,6 @@
.datepicker--content { .datepicker--content {
box-sizing: content-box; box-sizing: content-box;
padding: 4px; } padding: 4px; }
.-only-timepicker- .datepicker--content {
display: none; }
.datepicker--pointer { .datepicker--pointer {
position: absolute; position: absolute;
@ -233,15 +232,19 @@
z-index: -1; } z-index: -1; }
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer { .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
top: calc(100% - 4px); top: calc(100% - 4px);
-webkit-transform: rotate(135deg);
transform: rotate(135deg); } transform: rotate(135deg); }
.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer { .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
right: calc(100% - 4px); right: calc(100% - 4px);
-webkit-transform: rotate(225deg);
transform: rotate(225deg); } transform: rotate(225deg); }
.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer { .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
bottom: calc(100% - 4px); bottom: calc(100% - 4px);
-webkit-transform: rotate(315deg);
transform: rotate(315deg); } transform: rotate(315deg); }
.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer { .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
left: calc(100% - 4px); left: calc(100% - 4px);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); } transform: rotate(45deg); }
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer { .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
left: 10px; } left: 10px; }
@ -285,23 +288,26 @@
Navigation Navigation
------------------------------------------------- */ ------------------------------------------------- */
.datepicker--nav { .datepicker--nav {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
min-height: 32px; min-height: 32px;
padding: 4px; } padding: 4px; }
.-only-timepicker- .datepicker--nav {
display: none; }
.datepicker--nav-title, .datepicker--nav-title,
.datepicker--nav-action { .datepicker--nav-action {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; } justify-content: center; }
@ -338,6 +344,7 @@
background: none; } background: none; }
.datepicker--buttons { .datepicker--buttons {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
padding: 4px; padding: 4px;
@ -347,12 +354,16 @@
color: #4EB5E6; color: #4EB5E6;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
-webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
height: 32px; } height: 32px; }
@ -385,20 +396,22 @@
------------------------------------------------- */ ------------------------------------------------- */
.datepicker--time { .datepicker--time {
border-top: 1px solid #efefef; border-top: 1px solid #efefef;
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
padding: 4px; padding: 4px;
position: relative; } position: relative; }
.datepicker--time.-am-pm- .datepicker--time-sliders { .datepicker--time.-am-pm- .datepicker--time-sliders {
-webkit-flex: 0 1 138px;
-ms-flex: 0 1 138px; -ms-flex: 0 1 138px;
flex: 0 1 138px; flex: 0 1 138px;
max-width: 138px; } max-width: 138px; }
.-only-timepicker- .datepicker--time {
border-top: none; }
.datepicker--time-sliders { .datepicker--time-sliders {
-webkit-flex: 0 1 153px;
-ms-flex: 0 1 153px; -ms-flex: 0 1 153px;
flex: 0 1 153px; flex: 0 1 153px;
margin-right: 10px; margin-right: 10px;
@ -409,31 +422,32 @@
font-size: 12px; } font-size: 12px; }
.datepicker--time-current { .datepicker--time-current {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin: 0 10px; } margin: 0 0 0 10px; }
.datepicker--time-current-colon { .datepicker--time-current-colon {
margin: 0 2px 3px; margin: 0 2px 3px;
line-height: 1; } line-height: 1; }
.datepicker--time-current-hours, .datepicker--time-current-hours,
.datepicker--time-current-minutes, .datepicker--time-current-minutes {
.datepicker--time-current-seconds {
line-height: 1; line-height: 1;
font-size: 14px; font-size: 19px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative; position: relative;
z-index: 1; } z-index: 1; }
.datepicker--time-current-hours:after, .datepicker--time-current-hours:after,
.datepicker--time-current-minutes:after, .datepicker--time-current-minutes:after {
.datepicker--time-current-seconds:after {
content: ''; content: '';
background: #f0f0f0; background: #f0f0f0;
border-radius: 4px; border-radius: 4px;
@ -445,22 +459,24 @@
z-index: -1; z-index: -1;
opacity: 0; } opacity: 0; }
.datepicker--time-current-hours.-focus-:after, .datepicker--time-current-hours.-focus-:after,
.datepicker--time-current-minutes.-focus-:after, .datepicker--time-current-minutes.-focus-:after {
.datepicker--time-current-seconds.-focus-:after {
opacity: 1; } opacity: 1; }
.datepicker--time-current-ampm { .datepicker--time-current-ampm {
text-transform: uppercase; text-transform: uppercase;
-ms-flex-item-align: start; -webkit-align-self: flex-end;
align-self: flex-start; -ms-flex-item-align: end;
align-self: flex-end;
color: #9c9c9c; color: #9c9c9c;
margin-left: 6px; margin-left: 6px;
font-size: 11px; font-size: 11px;
margin-bottom: 1px; } margin-bottom: 1px; }
.datepicker--time-row { .datepicker--time-row {
display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-align-items: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
@ -471,6 +487,7 @@
.datepicker--time-row input[type='range'] { .datepicker--time-row input[type='range'] {
background: none; background: none;
cursor: pointer; cursor: pointer;
-webkit-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
height: 100%; height: 100%;
@ -570,9 +587,30 @@
width: 1px; width: 1px;
left: calc(50% - 1px); left: calc(50% - 1px);
top: calc(50% + 1px); top: calc(50% + 1px);
-webkit-transform: translateY(-100%);
transform: translateY(-100%); } transform: translateY(-100%); }
.datepicker--time-icon:before { .datepicker--time-icon:before {
width: .4em; width: .4em;
height: 1px; height: 1px;
top: calc(50% + 1px); top: calc(50% + 1px);
left: calc(50% - 1px); } left: calc(50% - 1px); }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #a2ddf6; }
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }

2
dist/css/datepicker.min.css vendored
View File

File diff suppressed because one or more lines are too long

301
dist/js/datepicker.js vendored
View File

@ -1,6 +1,5 @@
;(function (window, $, undefined) { ;(function () { ;(function (window, $, undefined) { ;(function () {
var VERSION = '2.2.3', var pluginName = 'datepicker',
pluginName = 'datepicker',
autoInitSelector = '.datepicker-here', autoInitSelector = '.datepicker-here',
$body, $datepickersContainer, $body, $datepickersContainer,
containerBuilt = false, containerBuilt = false,
@ -63,23 +62,17 @@
// timepicker // timepicker
timepicker: false, timepicker: false,
onlyTimepicker: false,
dateTimeSeparator: ' ', dateTimeSeparator: ' ',
timeFormat: '', timeFormat: '',
minHours: 0, minHours: 0,
maxHours: 24, maxHours: 24,
minMinutes: 0, minMinutes: 0,
maxMinutes: 59, maxMinutes: 59,
minSeconds: 0,
maxSeconds: 59,
hoursStep: 1, hoursStep: 1,
minutesStep: 1, minutesStep: 1,
secondsStep: 1,
// events // events
onSelect: '', onSelect: '',
onShow: '',
onHide: '',
onChangeMonth: '', onChangeMonth: '',
onChangeYear: '', onChangeYear: '',
onChangeDecade: '', onChangeDecade: '',
@ -145,7 +138,6 @@
datepicker = Datepicker; datepicker = Datepicker;
datepicker.prototype = { datepicker.prototype = {
VERSION: VERSION,
viewIndexes: ['days', 'months', 'years'], viewIndexes: ['days', 'months', 'years'],
init: function () { init: function () {
@ -162,7 +154,7 @@
this._setPositionClasses(this.opts.position); this._setPositionClasses(this.opts.position);
this._bindEvents() this._bindEvents()
} }
if (this.opts.keyboardNav && !this.opts.onlyTimepicker) { if (this.opts.keyboardNav) {
this._bindKeyboardEvents(); this._bindKeyboardEvents();
} }
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this)); this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@ -178,10 +170,6 @@
this._bindTimepickerEvents(); this._bindTimepickerEvents();
} }
if (this.opts.onlyTimepicker) {
this.$datepicker.addClass('-only-timepicker-');
}
this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new $.fn.datepicker.Navigation(this, this.opts); this.nav = new $.fn.datepicker.Navigation(this, this.opts);
@ -251,10 +239,6 @@
this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator); this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
} }
if (this.opts.onlyTimepicker) {
this.loc.dateFormat = this.loc.timeFormat;
}
var boundary = this._getWordBoundaryRegExp; var boundary = this._getWordBoundaryRegExp;
if (this.loc.timeFormat.match(boundary('aa')) || if (this.loc.timeFormat.match(boundary('aa')) ||
this.loc.timeFormat.match(boundary('AA')) this.loc.timeFormat.match(boundary('AA'))
@ -305,8 +289,7 @@
parsedSelected.month, parsedSelected.month,
parsedSelected.date, parsedSelected.date,
parsedSelected.hours, parsedSelected.hours,
parsedSelected.minutes, parsedSelected.minutes
parsedSelected.seconds
); );
formattedDates = selectedDates.map(function (date) { formattedDates = selectedDates.map(function (date) {
@ -322,11 +305,11 @@
parsedDate.month, parsedDate.month,
parsedDate.date, parsedDate.date,
parsedDate.hours, parsedDate.hours,
parsedDate.minutes, parsedDate.minutes
parsedDate.seconds
); );
}) })
} }
this._prevOnSelectValue = formattedDates; this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this); this.opts.onSelect(formattedDates, dates, this);
}, },
@ -379,13 +362,11 @@
d = datepicker.getParsedDate(date), d = datepicker.getParsedDate(date),
fullHours = d.fullHours, fullHours = d.fullHours,
hours = d.hours, hours = d.hours,
ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
dayPeriod = 'am', dayPeriod = 'am',
replacer = this._replacer,
validHours; validHours;
if (this.opts.timepicker && this.timepicker && ampm) { if (this.opts.timepicker && this.timepicker && this.ampm) {
validHours = this.timepicker._getValidHoursFromDate(date, ampm); validHours = this.timepicker._getValidHoursFromDate(date);
fullHours = leadingZero(validHours.hours); fullHours = leadingZero(validHours.hours);
hours = validHours.hours; hours = validHours.hours;
dayPeriod = validHours.dayPeriod; dayPeriod = validHours.dayPeriod;
@ -395,63 +376,50 @@
case /@/.test(result): case /@/.test(result):
result = result.replace(/@/, date.getTime()); result = result.replace(/@/, date.getTime());
case /aa/.test(result): case /aa/.test(result):
result = replacer(result, boundary('aa'), dayPeriod); result = result.replace(boundary('aa'), dayPeriod);
case /AA/.test(result): case /AA/.test(result):
result = replacer(result, boundary('AA'), dayPeriod.toUpperCase()); result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
case /dd/.test(result): case /dd/.test(result):
result = replacer(result, boundary('dd'), d.fullDate); result = result.replace(boundary('dd'), d.fullDate);
case /d/.test(result): case /d/.test(result):
result = replacer(result, boundary('d'), d.date); result = result.replace(boundary('d'), d.date);
case /DD/.test(result): case /DD/.test(result):
result = replacer(result, boundary('DD'), locale.days[d.day]); result = result.replace(boundary('DD'), locale.days[d.day]);
case /D/.test(result): case /D/.test(result):
result = replacer(result, boundary('D'), locale.daysShort[d.day]); result = result.replace(boundary('D'), locale.daysShort[d.day]);
case /mm/.test(result): case /mm/.test(result):
result = replacer(result, boundary('mm'), d.fullMonth); result = result.replace(boundary('mm'), d.fullMonth);
case /m/.test(result): case /m/.test(result):
result = replacer(result, boundary('m'), d.month + 1); result = result.replace(boundary('m'), d.month + 1);
case /MM/.test(result): case /MM/.test(result):
result = replacer(result, boundary('MM'), this.loc.months[d.month]); result = result.replace(boundary('MM'), this.loc.months[d.month]);
case /M/.test(result): case /M/.test(result):
result = replacer(result, boundary('M'), locale.monthsShort[d.month]); result = result.replace(boundary('M'), locale.monthsShort[d.month]);
case /ss/.test(result):
result = replacer(result, boundary('ss'), d.fullSeconds);
case /s/.test(result):
result = replacer(result, boundary('s'), d.seconds);
case /ii/.test(result): case /ii/.test(result):
result = replacer(result, boundary('ii'), d.fullMinutes); result = result.replace(boundary('ii'), d.fullMinutes);
case /i/.test(result): case /i/.test(result):
result = replacer(result, boundary('i'), d.minutes); result = result.replace(boundary('i'), d.minutes);
case /hh/.test(result): case /hh/.test(result):
result = replacer(result, boundary('hh'), fullHours); result = result.replace(boundary('hh'), fullHours);
case /h/.test(result): case /h/.test(result):
result = replacer(result, boundary('h'), hours); result = result.replace(boundary('h'), hours);
case /yyyy/.test(result): case /yyyy/.test(result):
result = replacer(result, boundary('yyyy'), d.year); result = result.replace(boundary('yyyy'), d.year);
case /yyyy1/.test(result): case /yyyy1/.test(result):
result = replacer(result, boundary('yyyy1'), decade[0]); result = result.replace(boundary('yyyy1'), decade[0]);
case /yyyy2/.test(result): case /yyyy2/.test(result):
result = replacer(result, boundary('yyyy2'), decade[1]); result = result.replace(boundary('yyyy2'), decade[1]);
case /yy/.test(result): case /yy/.test(result):
result = replacer(result, boundary('yy'), d.year.toString().slice(-2)); result = result.replace(boundary('yy'), d.year.toString().slice(-2));
} }
return result; return result;
}, },
_replacer: function (str, reg, data) {
return str.replace(reg, function (match, p1,p2,p3) {
return p1 + data + p3;
})
},
_getWordBoundaryRegExp: function (sign) { _getWordBoundaryRegExp: function (sign) {
var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;'; return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
}, },
selectDate: function (date) { selectDate: function (date) {
var _this = this, var _this = this,
opts = _this.opts, opts = _this.opts,
@ -485,7 +453,6 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes) date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
} }
if (_this.view == 'days') { if (_this.view == 'days') {
@ -614,8 +581,7 @@
* @param {String|Number|Object} [value] - new param value * @param {String|Number|Object} [value] - new param value
*/ */
update: function (param, value) { update: function (param, value) {
var len = arguments.length, var len = arguments.length;
lastSelectedDate = this.lastSelectedDate;
if (len == 2) { if (len == 2) {
this.opts[param] = value; this.opts[param] = value;
@ -627,7 +593,7 @@
this._syncWithMinMaxDates(); this._syncWithMinMaxDates();
this._defineLocale(this.opts.language); this._defineLocale(this.opts.language);
this.nav._addButtonsIfNeed(); this.nav._addButtonsIfNeed();
if (!this.opts.onlyTimepicker) this.nav._render(); this.nav._render();
this.views[this.currentView]._render(); this.views[this.currentView]._render();
if (this.elIsInput && !this.opts.inline) { if (this.elIsInput && !this.opts.inline) {
@ -641,19 +607,14 @@
this.$datepicker.addClass(this.opts.classes) this.$datepicker.addClass(this.opts.classes)
} }
if (this.opts.onlyTimepicker) {
this.$datepicker.addClass('-only-timepicker-');
}
if (this.opts.timepicker) { if (this.opts.timepicker) {
if (lastSelectedDate) this.timepicker._handleDate(lastSelectedDate); this.timepicker._handleDate(this.lastSelectedDate);
this.timepicker._updateRanges(); this.timepicker._updateRanges();
this.timepicker._updateCurrentTime(); this.timepicker._updateCurrentTime();
// Change hours and minutes if it's values have been changed through min/max hours/minutes // Change hours and minutes if it's values have been changed through min/max hours/minutes
if (lastSelectedDate) { if (this.lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours); this.lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes); this.lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
} }
} }
@ -819,20 +780,12 @@
}, },
show: function () { show: function () {
var onShow = this.opts.onShow;
this.setPosition(this.opts.position); this.setPosition(this.opts.position);
this.$datepicker.addClass('active'); this.$datepicker.addClass('active');
this.visible = true; this.visible = true;
if (onShow) {
this._bindVisionEvents(onShow)
}
}, },
hide: function () { hide: function () {
var onHide = this.opts.onHide;
this.$datepicker this.$datepicker
.removeClass('active') .removeClass('active')
.css({ .css({
@ -845,10 +798,6 @@
this.inFocus = false; this.inFocus = false;
this.visible = false; this.visible = false;
this.$el.blur(); this.$el.blur();
if (onHide) {
this._bindVisionEvents(onHide)
}
}, },
down: function (date) { down: function (date) {
@ -859,12 +808,6 @@
this._changeView(date, 'up'); this._changeView(date, 'up');
}, },
_bindVisionEvents: function (event) {
this.$datepicker.off('transitionend.dp');
event(this, false);
this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
},
_changeView: function (date, dir) { _changeView: function (date, dir) {
date = date || this.focused || this.date; date = date || this.focused || this.date;
@ -1078,7 +1021,7 @@
} }
$cell = this.views[this.currentView].$el.find(selector); $cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : $(''); return $cell.length ? $cell : '';
}, },
destroy: function () { destroy: function () {
@ -1101,30 +1044,6 @@
} }
}, },
_handleAlreadySelectedDates: function (alreadySelected, selectedDate) {
if (this.opts.range) {
if (!this.opts.toggleSelected) {
// Add possibility to select same date when range is true
if (this.selectedDates.length != 2) {
this._trigger('clickCell', selectedDate);
}
} else {
this.removeDate(selectedDate);
}
} else if (this.opts.toggleSelected){
this.removeDate(selectedDate);
}
// Change last selected date to be able to change time when clicking on this cell
if (!this.opts.toggleSelected) {
this.lastSelectedDate = alreadySelected;
if (this.opts.timepicker) {
this.timepicker._setTime(alreadySelected);
this.timepicker.update();
}
}
},
_onShowEvent: function (e) { _onShowEvent: function (e) {
if (!this.visible) { if (!this.visible) {
this.show(); this.show();
@ -1197,12 +1116,11 @@
if (this.timepicker) { if (this.timepicker) {
this.focused.setHours(this.timepicker.hours); this.focused.setHours(this.timepicker.hours);
this.focused.setMinutes(this.timepicker.minutes); this.focused.setMinutes(this.timepicker.minutes);
this.focused.setSeconds(this.timepicker.seconds);
} }
this.selectDate(this.focused); this.selectDate(this.focused);
return; } else if (alreadySelected && this.opts.toggleSelected){
this.removeDate(this.focused);
} }
this._handleAlreadySelectedDates(alreadySelected, this.focused)
} }
} }
} }
@ -1259,7 +1177,7 @@
this.silent = false; this.silent = false;
}, },
_onTimeChange: function (e, h, m, s) { _onTimeChange: function (e, h, m) {
var date = new Date(), var date = new Date(),
selectedDates = this.selectedDates, selectedDates = this.selectedDates,
selected = false; selected = false;
@ -1271,7 +1189,6 @@
date.setHours(h); date.setHours(h);
date.setMinutes(m); date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) { if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date); this.selectDate(date);
@ -1287,7 +1204,6 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes); date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
} }
this.selectDate(date); this.selectDate(date);
}, },
@ -1411,9 +1327,7 @@
hours: date.getHours(), hours: date.getHours(),
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() , fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
minutes: date.getMinutes(), minutes: date.getMinutes(),
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(), fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
seconds: date.getSeconds(),
fullSeconds: date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
} }
}; };
@ -1460,16 +1374,6 @@
return parseInt(num) < 10 ? '0' + num : num; return parseInt(num) < 10 ? '0' + num : num;
}; };
/**
* Returns copy of date with hours and minutes equals to 0
* @param date {Date}
*/
datepicker.resetTime = function (date) {
if (typeof date != 'object') return;
date = datepicker.getParsedDate(date);
return new Date(date.year, date.month, date.date)
};
$.fn.datepicker = function ( options ) { $.fn.datepicker = function ( options ) {
return this.each(function () { return this.each(function () {
if (!$.data(this, pluginName)) { if (!$.data(this, pluginName)) {
@ -1530,9 +1434,7 @@
this.d = d; this.d = d;
this.type = type; this.type = type;
this.opts = opts; this.opts = opts;
this.$el = $('');
if (this.opts.onlyTimepicker) return;
this.init(); this.init();
}; };
@ -1571,13 +1473,17 @@
var classes = "datepicker--cell datepicker--cell-" + type, var classes = "datepicker--cell datepicker--cell-" + type,
currentDate = new Date(), currentDate = new Date(),
parent = this.d, parent = this.d,
minRange = dp.resetTime(parent.minRange),
maxRange = dp.resetTime(parent.maxRange),
opts = parent.opts, opts = parent.opts,
d = dp.getParsedDate(date), d = dp.getParsedDate(date),
render = {}, render = {},
html = d.date; html = d.date;
if (opts.onRenderCell) {
render = opts.onRenderCell(date, type) || {};
html = render.html ? render.html : html;
classes += render.classes ? ' ' + render.classes : '';
}
switch (type) { switch (type) {
case 'day': case 'day':
if (parent.isWeekend(d.day)) classes += " -weekend-"; if (parent.isWeekend(d.day)) classes += " -weekend-";
@ -1612,26 +1518,26 @@
} }
if (opts.range) { if (opts.range) {
if (dp.isSame(minRange, date, type)) classes += ' -range-from-'; if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-'; if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
if (parent.selectedDates.length == 1 && parent.focused) { if (parent.selectedDates.length == 1 && parent.focused) {
if ( if (
(dp.bigger(minRange, date) && dp.less(parent.focused, date)) || (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
(dp.less(maxRange, date) && dp.bigger(parent.focused, date))) (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
{ {
classes += ' -in-range-' classes += ' -in-range-'
} }
if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) { if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-from-' classes += ' -range-from-'
} }
if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) { if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-to-' classes += ' -range-to-'
} }
} else if (parent.selectedDates.length == 2) { } else if (parent.selectedDates.length == 2) {
if (dp.bigger(minRange, date) && dp.less(maxRange, date)) { if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
classes += ' -in-range-' classes += ' -in-range-'
} }
} }
@ -1754,7 +1660,6 @@
}, },
_render: function () { _render: function () {
if (this.opts.onlyTimepicker) return;
this._renderTypes[this.type].bind(this)(); this._renderTypes[this.type].bind(this)();
}, },
@ -1773,7 +1678,6 @@
}, },
show: function () { show: function () {
if (this.opts.onlyTimepicker) return;
this.$el.addClass('active'); this.$el.addClass('active');
this.acitve = true; this.acitve = true;
}, },
@ -1789,11 +1693,10 @@
_handleClick: function (el) { _handleClick: function (el) {
var date = el.data('date') || 1, var date = el.data('date') || 1,
month = el.data('month') || 0, month = el.data('month') || 0,
year = el.data('year') || this.d.parsedDate.year, year = el.data('year') || this.d.parsedDate.year;
dp = this.d;
// Change view if min view does not reach yet // Change view if min view does not reach yet
if (dp.view != this.opts.minView) { if (this.d.view != this.opts.minView) {
dp.down(new Date(year, month, date)); this.d.down(new Date(year, month, date));
return; return;
} }
// Select date if min view is reached // Select date if min view is reached
@ -1801,11 +1704,16 @@
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType); alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
if (!alreadySelected) { if (!alreadySelected) {
dp._trigger('clickCell', selectedDate); this.d._trigger('clickCell', selectedDate);
return; } else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
this.d.lastSelectedDate = alreadySelected;
if (this.d.opts.timepicker) {
this.d.timepicker._setTime(alreadySelected);
this.d.timepicker.update();
}
} }
dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
}, },
@ -1851,9 +1759,7 @@
}, },
_buildBaseHtml: function () { _buildBaseHtml: function () {
if (!this.opts.onlyTimepicker) {
this._render(); this._render();
}
this._addButtonsIfNeed(); this._addButtonsIfNeed();
}, },
@ -1910,10 +1816,10 @@
switch (this.d.view) { switch (this.d.view) {
case 'days': case 'days':
if (!this.d._isInRange(new Date(y, m-1, 1), 'month')) { if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev') this._disableNav('prev')
} }
if (!this.d._isInRange(new Date(y, m+1, 1), 'month')) { if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next') this._disableNav('next')
} }
break; break;
@ -1926,11 +1832,10 @@
} }
break; break;
case 'years': case 'years':
var decade = dp.getDecade(this.d.date); if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
this._disableNav('prev') this._disableNav('prev')
} }
if (!this.d._isInRange(new Date(decade[1] + 1, 0, 1), 'year')) { if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next') this._disableNav('next')
} }
break; break;
@ -1968,11 +1873,9 @@
;(function () { ;(function () {
var template = '<div class="datepicker--time">' + var template = '<div class="datepicker--time">' +
'<div class="datepicker--time-current">' + '<div class="datepicker--time-current">' +
' <span class="datepicker--time-current-hours">#{hourVisible}</span>' + ' <span class="datepicker--time-current-hours">#{hourValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' + ' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-minutes">#{minValue}</span>' + ' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
'</div>' + '</div>' +
'<div class="datepicker--time-sliders">' + '<div class="datepicker--time-sliders">' +
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
@ -1981,9 +1884,6 @@
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' + ' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' + ' </div>' +
' <div class="datepicker--time-row">' +
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
' </div>' +
'</div>' + '</div>' +
'</div>', '</div>',
datepicker = $.fn.datepicker, datepicker = $.fn.datepicker,
@ -2019,53 +1919,27 @@
this._handleDate(date); this._handleDate(date);
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours; this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes; this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
}, },
/**
* Sets minHours and minMinutes from date (usually it's a minDate)
* Also changes minMinutes if current hours are bigger then @date hours
* @param date {Date}
* @private
*/
_setMinTimeFromDate: function (date) { _setMinTimeFromDate: function (date) {
this.minHours = date.getHours(); this.minHours = date.getHours();
this.minMinutes = date.getMinutes(); this.minMinutes = date.getMinutes();
this.minSeconds = date.getSeconds();
// If, for example, min hours are 10, and current hours are 12,
// update minMinutes to default value, to be able to choose whole range of values
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() > date.getHours()) {
this.minMinutes = this.opts.minMinutes;
}
}
}, },
_setMaxTimeFromDate: function (date) { _setMaxTimeFromDate: function (date) {
this.maxHours = date.getHours(); this.maxHours = date.getHours();
this.maxMinutes = date.getMinutes(); this.maxMinutes = date.getMinutes();
this.maxSeconds = date.getSeconds();
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() < date.getHours()) {
this.maxMinutes = this.opts.maxMinutes;
}
}
}, },
_setDefaultMinMaxTime: function () { _setDefaultMinMaxTime: function () {
var maxHours = 23, var maxHours = 23,
maxMinutes = 59, maxMinutes = 59,
maxSeconds = 59,
opts = this.opts; opts = this.opts;
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours; this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes; this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours; this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes; this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
}, },
/** /**
@ -2085,12 +1959,6 @@
} else if (this.minutes > this.maxMinutes) { } else if (this.minutes > this.maxMinutes) {
this.minutes = this.maxMinutes; this.minutes = this.maxMinutes;
} }
if (this.seconds < this.minSeconds) {
this.seconds = this.minSeconds;
} else if (this.seconds > this.maxSeconds) {
this.seconds = this.maxSeconds;
}
}, },
_buildHTML: function () { _buildHTML: function () {
@ -2099,16 +1967,11 @@
hourMin: this.minHours, hourMin: this.minHours,
hourMax: lz(this.maxHours), hourMax: lz(this.maxHours),
hourStep: this.opts.hoursStep, hourStep: this.opts.hoursStep,
hourValue: this.hours, hourValue: lz(this.displayHours),
hourVisible: lz(this.displayHours),
minMin: this.minMinutes, minMin: this.minMinutes,
minMax: lz(this.maxMinutes), minMax: lz(this.maxMinutes),
minStep: this.opts.minutesStep, minStep: this.opts.minutesStep,
minValue: lz(this.minutes), minValue: lz(this.minutes)
secMin: this.minSeconds,
secMax: lz(this.maxSeconds),
secStep: this.opts.secondsStep,
secValue: lz(this.seconds)
}, },
_template = dp.template(template, data); _template = dp.template(template, data);
@ -2116,10 +1979,8 @@
this.$ranges = $('[type="range"]', this.$timepicker); this.$ranges = $('[type="range"]', this.$timepicker);
this.$hours = $('[name="hours"]', this.$timepicker); this.$hours = $('[name="hours"]', this.$timepicker);
this.$minutes = $('[name="minutes"]', this.$timepicker); this.$minutes = $('[name="minutes"]', this.$timepicker);
this.$seconds = $('[name="seconds"]', this.$timepicker);
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker); this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker); this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm = $('<span class="datepicker--time-current-ampm">') this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -2132,12 +1993,10 @@
_updateCurrentTime: function () { _updateCurrentTime: function () {
var h = dp.getLeadingZeroNum(this.displayHours), var h = dp.getLeadingZeroNum(this.displayHours),
m = dp.getLeadingZeroNum(this.minutes), m = dp.getLeadingZeroNum(this.minutes);
s = dp.getLeadingZeroNum(this.seconds);
this.$hoursText.html(h); this.$hoursText.html(h);
this.$minutesText.html(m); this.$minutesText.html(m);
this.$secondsText.html(s);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm.html(this.dayPeriod); this.$ampm.html(this.dayPeriod);
@ -2153,12 +2012,7 @@
this.$minutes.attr({ this.$minutes.attr({
min: this.minMinutes, min: this.minMinutes,
max: this.maxMinutes max: this.maxMinutes
}).val(this.minutes); }).val(this.minutes)
this.$seconds.attr({
min: this.minSeconds,
max: this.maxSeconds
}).val(this.seconds);
}, },
/** /**
@ -2169,6 +2023,7 @@
*/ */
_handleDate: function (date) { _handleDate: function (date) {
this._setDefaultMinMaxTime(); this._setDefaultMinMaxTime();
if (date) { if (date) {
if (dp.isSame(date, this.d.opts.minDate)) { if (dp.isSame(date, this.d.opts.minDate)) {
this._setMinTimeFromDate(this.d.opts.minDate); this._setMinTimeFromDate(this.d.opts.minDate);
@ -2188,11 +2043,10 @@
/** /**
* Calculates valid hour value to display in text input and datepicker's body. * Calculates valid hour value to display in text input and datepicker's body.
* @param date {Date|Number} - date or hours * @param date {Date|Number} - date or hours
* @param [ampm] {Boolean} - 12 hours mode
* @returns {{hours: *, dayPeriod: string}} * @returns {{hours: *, dayPeriod: string}}
* @private * @private
*/ */
_getValidHoursFromDate: function (date, ampm) { _getValidHoursFromDate: function (date) {
var d = date, var d = date,
hours = date; hours = date;
@ -2201,10 +2055,10 @@
hours = d.hours; hours = d.hours;
} }
var _ampm = ampm || this.d.ampm, var ampm = this.d.ampm,
dayPeriod = 'am'; dayPeriod = 'am';
if (_ampm) { if (ampm) {
switch(true) { switch(true) {
case hours == 0: case hours == 0:
hours = 12; hours = 12;
@ -2251,10 +2105,7 @@
this[name] = $target.val(); this[name] = $target.val();
this._updateCurrentTime(); this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]); this.d._trigger('timeChange', [this.hours, this.minutes])
this._handleDate(this.d.lastSelectedDate);
this.update()
}, },
_onSelectDate: function (e, data) { _onSelectDate: function (e, data) {

4
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
dist/js/i18n/datepicker.cs.js vendored
View File

@ -1,12 +0,0 @@
;(function ($) { $.fn.datepicker.language['cs'] = {
days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
today: 'Dnes',
clear: 'Vymazat',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
}; })(jQuery);

12
dist/js/i18n/datepicker.es.js vendored
View File

@ -1,12 +0,0 @@
;(function ($) { $.fn.datepicker.language['es'] = {
days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
months: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Augosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
today: 'Hoy',
clear: 'Limpiar',
dateFormat: 'dd/mm/yyyy',
timeFormat: 'hh:ii aa',
firstDay: 1
}; })(jQuery);

13
dist/js/i18n/datepicker.fi.js vendored
View File

@ -1,13 +0,0 @@
;(function ($) { $.fn.datepicker.language['fi'] = {
days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
months: ['Tammikuu','Helmikuu','Maaliskuu','Huhtikuu','Toukokuu','Kesäkuu', 'Heinäkuu','Elokuu','Syyskuu','Lokakuu','Marraskuu','Joulukuu'],
monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
today: 'Tänään',
clear: 'Tyhjennä',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};
})(jQuery);

12
dist/js/i18n/datepicker.fr.js vendored
View File

@ -1,12 +0,0 @@
;(function ($) { $.fn.datepicker.language['fr'] = {
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
months: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Decembre'],
monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
today: "Aujourd'hui",
clear: 'Effacer',
dateFormat: 'dd/mm/yyyy',
timeFormat: 'hh:ii',
firstDay: 1
}; })(jQuery);

12
dist/js/i18n/datepicker.hu.js vendored
View File

@ -1,12 +0,0 @@
;(function ($) { ;(function ($) { $.fn.datepicker.language['hu'] = {
days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
today: 'Ma',
clear: 'Törlés',
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii aa',
firstDay: 1
}; })(jQuery); })(jQuery);

13
dist/js/i18n/datepicker.pl.js vendored
View File

@ -1,13 +0,0 @@
;(function ($) { $.fn.datepicker.language['pl'] = {
days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
today: 'Dzisiaj',
clear: 'Wyczyść',
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii:aa',
firstDay: 1
};
})(jQuery);

12
dist/js/i18n/datepicker.sk.js vendored
View File

@ -1,12 +0,0 @@
;(function ($) { $.fn.datepicker.language['sk'] = {
days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
months: ['Január','Február','Marec','Apríl','Máj','Jún', 'Júl','August','September','Október','November','December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
today: 'Dnes',
clear: 'Vymazať',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
}; })(jQuery);

2
docs/css/style.css
View File

File diff suppressed because one or more lines are too long

50
docs/index-ru.html
View File

File diff suppressed because one or more lines are too long

52
docs/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script><script src="js/logger.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><a href="index-ru.html" class="lang-link"><img src="img/ru.png"><span>На русском языке</span></a><h1 class="promo-header">AIR DATEPICKER<span>lightweight cross-browser jQuery datepicker</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo'); <!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><a href="index-ru.html" class="lang-link"><img src="img/ru.png"><span>На русском языке</span></a><h1 class="promo-header">AIR DATEPICKER<span>lightweight cross-browser jQuery datepicker</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
$promo.datepicker({ $promo.datepicker({
language: 'en' language: 'en'
})</script></p><article><h2 id="intro">Description</h2><p>Light (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with<span class="example-inline"><code>es5</code></span>and<span class="example-inline"><code class="js">css flexbox</code></span>.Works in all modern browsers: })</script></p><article><h2 id="intro">Description</h2><p>Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with<span class="example-inline"><code>es5</code></span>and<span class="example-inline"><code class="js">css flexbox</code></span>.Works in all modern browsers:
<strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Installation</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Usage</h2><p>Include styles and scripts from<span class="example-inline"><code>/dist</code></span>directory:</p><pre class="example-code"><code class="html">&lt;html&gt; <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Installation</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Usage</h2><p>Include styles and scripts from<span class="example-inline"><code>/dist</code></span>directory:</p><pre class="example-code"><code class="html">&lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
@ -30,7 +30,7 @@ $('#my-element').data('datepicker')</code></pre></article><article><h2 id="examp
language: 'en', language: 'en',
minDate: new Date() // Now can select only dates, which goes after today minDate: new Date() // Now can select only dates, which goes after today
}) })
</code></pre></div><h3 id="example-range">Range of dates</h3><p>Use<span class="example-inline"><code>{range: true}</code></span>for choosing range of dates. As dates separator<span class="example-inline"><code>multipleDatesSeparator</code></span>will be used.</p><p>For possibility to select same date two times, you should set<span class="example-inline"><code>{toggleSelected: false}</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot; </code></pre></div><h3 id="example-range">Range of dates</h3><p>Use<span class="example-inline"><code>{range: true}</code></span>for choosing range of dates. As dates separator<span class="example-inline"><code>multipleDatesSeparator</code></span>will be used.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
data-range=&quot;true&quot; data-range=&quot;true&quot;
data-multiple-dates-separator=&quot; - &quot; data-multiple-dates-separator=&quot; - &quot;
data-language=&quot;en&quot; data-language=&quot;en&quot;
@ -128,42 +128,7 @@ $picker.datepicker({
// Select initial date from `eventDates` // Select initial date from `eventDates`
var currentDate = currentDate = new Date(); var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10)) $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
</code></pre></div><h3 id="example-show-hide">Showing and hiding calendar</h3><p>For adding some actions while datepicker is showing or hiding, use<span class="example-inline"><code>onShow</code></span>and<span class="example-inline"><code>onHide</code></span>callbacks.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div class="row"><div class="col"><input id="example-show-hide-callbacks" type="text"></div><div class="col"><div id="example-show-hide-log" class="logger"></div></div></div><script>;(function () { </code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
var log = logger('#example-show-hide-log', 'Clear')
$('#example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
})();</script></div><pre class="example-code"><code>$('&#35;example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function(dp, animationCompleted){
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function(dp, animationCompleted){
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})</code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
</code></pre></div><h3 id="timeformat-actions">Actions with time</h3><p>For setting max/min hours or minutes values use<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. You also could set time in<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.</p><p>Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Create start date </code></pre></div><h3 id="timeformat-actions">Actions with time</h3><p>For setting max/min hours or minutes values use<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. You also could set time in<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.</p><p>Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Create start date
var start = new Date(), var start = new Date(),
prevDay, prevDay,
@ -297,9 +262,7 @@ $('.datepicker').datepicker({
} }
})</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If<span class="example-inline"><code>true</code></span>, when timepicker widget will be added.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot; &quot;</code></span></p></header><p>Separator between date and time</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Desirable time format. Taken from localization by default. If value passed here, then it will be used instead. })</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If<span class="example-inline"><code>true</code></span>, when timepicker widget will be added.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot; &quot;</code></span></p></header><p>Separator between date and time</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
For using 12 hours mode, add "aa" or "AA" to your<span class="example-inline"><code class="js">timeFormat</code></span>parameter, e.g.<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Possible values are:</p><ul><li><span class="param-inline"><strong>h</strong></span>- hours</li><li><span class="param-inline"><strong>hh</strong></span>- hours with leading zero</li><li><span class="param-inline"><strong>i</strong></span>- minutes</li><li><span class="param-inline"><strong>ii</strong></span>- minutes with leading zero</li><li><span class="param-inline"><strong>aa</strong></span>- day period - 'am' or 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- day period capitalized</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">23</code></span></p></header><p>Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">59</code></span></p></header><p>Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Hours step in slider.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Minutes step in slider.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object For using 12 hours mode, add "aa" or "AA" to your<span class="example-inline"><code class="js">timeFormat</code></span>parameter, e.g.<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Possible values are:</p><ul><li><span class="param-inline"><strong>h</strong></span>- hours</li><li><span class="param-inline"><strong>hh</strong></span>- hours with leading zero</li><li><span class="param-inline"><strong>i</strong></span>- minutes</li><li><span class="param-inline"><strong>ii</strong></span>- minutes with leading zero</li><li><span class="param-inline"><strong>aa</strong></span>- day period - 'am' or 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- day period capitalized</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">23</code></span></p></header><p>Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">59</code></span></p></header><p>Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Hours step in slider.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Minutes step in slider.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object
if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onShow(inst, animationCompleted)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when calendar is showing.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator. if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</li></ul></div><div class="param"><header class="param-header"><h3>onHide(inst, animationCompleted)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when calendar is hiding.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator.
if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
html: '', // Custom cell content html: '', // Custom cell content
classes: '', // Extra css classes to cell classes: '', // Extra css classes to cell
disabled: '' // true/false, if true, then cell will be disabled disabled: '' // true/false, if true, then cell will be disabled
@ -315,7 +278,7 @@ if its<span class="example-inline"><code>false</code></span>, when animation has
} }
} }
})</code></pre></div></article><article><h2 id="api">API</h2><p>Plugin instance is accessible through<span class="example-inline"><code>data</code></span>attribute.</p><pre class="example-code"><code class="js">var myDatepicker = $('#my-elem').datepicker().data('datepicker'); })</code></pre></div></article><article><h2 id="api">API</h2><p>Plugin instance is accessible through<span class="example-inline"><code>data</code></span>attribute.</p><pre class="example-code"><code class="js">var myDatepicker = $('#my-elem').datepicker().data('datepicker');
myDatepicker.show();</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Shows datepicker.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Hides datepicker.</p></div><div class="param"><header class="param-header"><h3>destroy()</h3></header><p>Destroys datepicker.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Renders next month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Renders previous month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date|Array</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span>, or array of dates.</li></ul><p>Activates passed date or multiple dates if array is passed. If<span class="example-inline"><code class="js">{multipleDates: false}</code></span>and date is already active, then it will be deactivated. If<span class="example-inline"><code class="js">{multipleDates: true}</code></span>then another active date will be added.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Removes selection from passed date.</p></div><div class="param"><header class="param-header"><h3>clear()</h3></header><p>Clears all selected dates.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- field name which must be updated.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- new value.</li></ul><p>This method updates datepicker's options. After calling this method, datepicker will be redrawn. myDatepicker.show();</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Shows datepicker.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Hides datepicker.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Renders next month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Renders previous month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Activates passed date. If<span class="example-inline"><code class="js">{multipleDates: false}</code></span>and date is already active, then it will be deactivated. If<span class="example-inline"><code class="js">{multipleDates: true}</code></span>then another active date will be added.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Removes selection from passed date.</p></div><div class="param"><header class="param-header"><h3>clear()</h3></header><p>Clears all selected dates.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- field name which must be updated.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- new value.</li></ul><p>This method updates datepicker's options. After calling this method, datepicker will be redrawn.
You can update several parameters at one time, just pass in object with necessary fields.</p><pre class="example-code"><code class="js">var datepicker = $('#my-elem').datepicker().data('datepicker'); You can update several parameters at one time, just pass in object with necessary fields.</p><pre class="example-code"><code class="js">var datepicker = $('#my-elem').datepicker().data('datepicker');
// Single parameter update // Single parameter update
datepicker.update('minDate', new Date()) datepicker.update('minDate', new Date())
@ -324,8 +287,7 @@ datepicker.update({
position: "top right", position: "top right",
maxDate: new Date(), maxDate: new Date(),
todayButton: true todayButton: true
})</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Sets new view for datepicker.</p><pre class="example-code"><code class="js">datepicker.view = 'months';</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Sets new viewing date for datepicker, must pass a JavaScript Date object<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date(); })</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Sets new view for datepicker.</p><pre class="example-code"><code class="js">datepicker.view = 'months';</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Sets new viewing date for datepicker, must pass a JavaScript Date object<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date();</code></pre></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
</code></pre></div><div class="param"><header class="param-header"><h3>$el</h3></header><p>Datepicker's DOM element</p></div><div class="param"><header class="param-header"><h3>selectedDates</h3></header><p>Array of selected dates</p></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
$code.each(function (i, el) { $code.each(function (i, el) {
hljs.highlightBlock(el); hljs.highlightBlock(el);
}) })

1
docs/jade/layout.jade
View File

@ -20,7 +20,6 @@ html
script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js') script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
script(src='../dist/js/datepicker.js') script(src='../dist/js/datepicker.js')
script(src='../dist/js/i18n/datepicker.en.js') script(src='../dist/js/i18n/datepicker.en.js')
script(src='js/logger.js')
body body
div.wrapper div.wrapper
main.main(role='main') main.main(role='main')

110
docs/jade/pages/index-ru.jade
View File

@ -17,7 +17,7 @@ block content
article article
h2#intro Описание h2#intro Описание
p p
| Легкий (<i><strong>~36kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием | Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
+example-inline('es5') +example-inline('es5')
| и | и
+example-inline('css flexbox', 'js') +example-inline('css flexbox', 'js')
@ -142,10 +142,6 @@ block content
| для выбора диапазона. В качестве разделителя дат будет использован | для выбора диапазона. В качестве разделителя дат будет использован
+example-inline('multipleDatesSeparator') +example-inline('multipleDatesSeparator')
p Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить
+example-inline('{toggleSelected: false}')
|.
+example +example
+example-content +example-content
@ -281,59 +277,6 @@ block content
var currentDate = currentDate = new Date(); var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10)) $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
h3#example-show-hide Появление и скрытие календаря
p Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции
+example-inline('onShow')
| и
+example-inline('onHide')
+example
+example-content
.row
.col
input#example-show-hide-callbacks(type='text')
.col
div.logger#example-show-hide-log
script.
;(function () {
var log = logger('#example-show-hide-log', 'Очистить')
$('#example-show-hide-callbacks').datepicker({
onShow: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
})();
+example-code
:code
$('#example-show-hide-callbacks').datepicker({
onShow: function(dp, animationCompleted){
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function(dp, animationCompleted){
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
article article
h2#timepicker Выбор времени h2#timepicker Выбор времени
p Для выбора времени используйте опцию p Для выбора времени используйте опцию
@ -874,38 +817,6 @@ block content
+param('inst','object') +param('inst','object')
| - экземпляр плагина. | - экземпляр плагина.
.param
+param-header('onShow(inst, animationCompleted)', 'function', 'null')
p Функция обратного вызова при появлении календаря.
ul
li
+param('inst', 'Object')
| - экземпляр календаря.
li
+param('animationCompleted','boolean')
| - индикатор состояния анимации.
| если
+example-inline('false')
| , то анимация только началась, если
+example-inline('true')
| - уже закончилась.
.param
+param-header('onHide(inst, animationCompleted)', 'function', 'null')
p Функция обратного вызова при скрытии календаря.
ul
li
+param('inst', 'Object')
| - экземпляр календаря.
li
+param('animationCompleted','boolean')
| - индикатор состояния анимации.
| если
+example-inline('false')
| , то анимация только началась, если
+example-inline('true')
| - уже закончилась.
.param .param
+param-header('onChangeMonth(month, year)','function','null') +param-header('onChangeMonth(month, year)','function','null')
p Функция обратного вызова при изменении месяца. p Функция обратного вызова при изменении месяца.
@ -992,10 +903,6 @@ block content
+param-header('hide()') +param-header('hide()')
p Скрывает календарь. p Скрывает календарь.
.param
+param-header('destroy()')
p Удаляет календарь.
.param .param
+param-header('next()') +param-header('next()')
p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
@ -1008,10 +915,11 @@ block content
+param-header('selectDate(date)') +param-header('selectDate(date)')
ul ul
li li
+param('date','Date|Array') +param('date','Date')
| - дата в формате JavaScript, или массив дат | - дата в формате JavaScript
+example-inline('Date()', 'js')
p p
| Выбирает переданную дату или несколько дат, если передан массив с датами. Если | Выбирает переданную дату. Если
+example-inline('{multipleDates: false}','js') +example-inline('{multipleDates: false}','js')
| и уже есть активная дата, то она будет деактивирована. Если | и уже есть активная дата, то она будет деактивирована. Если
+example-inline('{multipleDates: true}','js') +example-inline('{multipleDates: true}','js')
@ -1071,11 +979,3 @@ block content
+example-code('js'). +example-code('js').
datepicker.date = new Date(); datepicker.date = new Date();
.param
+param-header('$el')
p DOM элемент календаря
.param
+param-header('selectedDates')
p Массив выбранных дат

108
docs/jade/pages/index.jade
View File

@ -17,7 +17,7 @@ block content
article article
h2#intro Description h2#intro Description
p p
| Light (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with | Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with
+example-inline('es5') +example-inline('es5')
| and | and
+example-inline('css flexbox', 'js') +example-inline('css flexbox', 'js')
@ -138,10 +138,6 @@ block content
| for choosing range of dates. As dates separator | for choosing range of dates. As dates separator
+example-inline('multipleDatesSeparator') +example-inline('multipleDatesSeparator')
| will be used. | will be used.
p For possibility to select same date two times, you should set
+example-inline('{toggleSelected: false}')
| .
+example +example
+example-content +example-content
input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here
@ -274,60 +270,6 @@ block content
var currentDate = currentDate = new Date(); var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10)) $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
h3#example-show-hide Showing and hiding calendar
p For adding some actions while datepicker is showing or hiding, use
+example-inline('onShow')
| and
+example-inline('onHide')
| callbacks.
+example
+example-content
.row
.col
input#example-show-hide-callbacks(type='text')
.col
div.logger#example-show-hide-log
script.
;(function () {
var log = logger('#example-show-hide-log', 'Clear')
$('#example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
})();
+example-code
:code
$('#example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function(dp, animationCompleted){
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function(dp, animationCompleted){
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
article article
h2#timepicker Timepicker h2#timepicker Timepicker
p To enable timepicker use option p To enable timepicker use option
@ -841,38 +783,6 @@ block content
li li
+param('inst','object') +param('inst','object')
| - plugin instance. | - plugin instance.
.param
+param-header('onShow(inst, animationCompleted)', 'function', 'null')
p Callback when calendar is showing.
ul
li
+param('inst', 'Object')
| - plugin instance.
li
+param('animationCompleted','boolean')
| - animation indicator.
| if its
+example-inline('false')
| , when animation has just begun, if
+example-inline('true')
| - already ended.
.param
+param-header('onHide(inst, animationCompleted)', 'function', 'null')
p Callback when calendar is hiding.
ul
li
+param('inst', 'Object')
| - plugin instance.
li
+param('animationCompleted','boolean')
| - animation indicator.
| if its
+example-inline('false')
| , when animation has just begun, if
+example-inline('true')
| - already ended.
.param .param
+param-header('onChangeMonth(month, year)','function','null') +param-header('onChangeMonth(month, year)','function','null')
p Callback when months are changed. p Callback when months are changed.
@ -950,9 +860,6 @@ block content
.param .param
+param-header('hide()') +param-header('hide()')
p Hides datepicker. p Hides datepicker.
.param
+param-header('destroy()')
p Destroys datepicker.
.param .param
+param-header('next()') +param-header('next()')
p Renders next month, year or decade, depending on current view. p Renders next month, year or decade, depending on current view.
@ -963,12 +870,11 @@ block content
+param-header('selectDate(date)') +param-header('selectDate(date)')
ul ul
li li
+param('date','Date|Array') +param('date','Date')
| - JavaScript | - JavaScript
+example-inline('Date()', 'js') +example-inline('Date()', 'js')
| , or array of dates.
p p
| Activates passed date or multiple dates if array is passed. If | Activates passed date. If
+example-inline('{multipleDates: false}','js') +example-inline('{multipleDates: false}','js')
| and date is already active, then it will be deactivated. If | and date is already active, then it will be deactivated. If
+example-inline('{multipleDates: true}','js') +example-inline('{multipleDates: true}','js')
@ -1021,11 +927,3 @@ block content
+example-inline('Date()') +example-inline('Date()')
+example-code('js'). +example-code('js').
datepicker.date = new Date(); datepicker.date = new Date();
.param
+param-header('$el')
p Datepicker's DOM element
.param
+param-header('selectedDates')
p Array of selected dates

29
docs/js/logger.js
View File

@ -1,29 +0,0 @@
var logger;
(function (window) {
logger = function (el, clearText) {
var $el = $(el);
addContent($el);
addClearButton(clearText, $el);
$('.logger--clear', $el).on('click', clear.bind('', $el));
return function(text) {
var count = $('p', $el).length,
$content = $('.logger--content', $el);
$content.append('<p><span>' + ++count + '.</span> ' + text + '</p>').scrollTop(100000)
}
};
function addClearButton (text, el) {
el.append('<span class="logger--clear">' + text + '</span>')
}
function addContent (el) {
el.html('<div class="logger--content"></div>')
}
function clear (el) {
$('.logger--content', el).html('');
}
})(window);

60
docs/sass/_docs.scss
View File

@ -42,13 +42,6 @@ h4 {
margin: 24px 0 0; margin: 24px 0 0;
} }
.row {
display: flex;
> * {
flex: 1;
}
}
article { article {
h2, h3 { h2, h3 {
position: relative; position: relative;
@ -514,56 +507,3 @@ a {
color: #ddd; color: #ddd;
} }
} }
// Logger
// -------------------------------------------------
.logger {
background: rgba(0, 0, 0, .7);
border-radius: 4px;
font-size: 12px;
font-family: Monospace, monospace;
height: 150px;
overflow: auto;
position: relative;
}
.logger--content {
padding: 4px 8px;
height: 100%;
overflow: auto;
p {
margin: 0;
color: greenyellow;
}
span {
color: #ddd;
}
}
.logger--clear {
color: #333;
border-radius: 4px 4px 0 0;
cursor: pointer;
position: absolute;
height: 32px;
padding: 0 8px;
font-family: 'Tahoma', sans-serif;
font-size: 13px;
display: inline-flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, .5);
right: 24px;
bottom: 0;
&:hover {
background: rgba(255, 255, 255, .8);
}
&:active {
background: rgba(255, 255, 255, .3);
}
}

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "air-datepicker", "name": "air-datepicker",
"version": "2.2.3", "version": "2.0.2",
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.1.0", "autoprefixer": "^6.1.0",
"browserify": "^13.0.0", "browserify": "^13.0.0",
@ -25,7 +25,7 @@
"vinyl-source-stream": "^1.1.0" "vinyl-source-stream": "^1.1.0"
}, },
"dependencies": { "dependencies": {
"jquery": ">=2.0.0 <4.0.0" "jquery": "^2.2.3"
}, },
"description": "Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)\r ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)", "description": "Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)\r ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)",
"main": "src/js/air-datepicker.js", "main": "src/js/air-datepicker.js",

46
src/js/body.js
View File

@ -21,9 +21,7 @@
this.d = d; this.d = d;
this.type = type; this.type = type;
this.opts = opts; this.opts = opts;
this.$el = $('');
if (this.opts.onlyTimepicker) return;
this.init(); this.init();
}; };
@ -62,13 +60,17 @@
var classes = "datepicker--cell datepicker--cell-" + type, var classes = "datepicker--cell datepicker--cell-" + type,
currentDate = new Date(), currentDate = new Date(),
parent = this.d, parent = this.d,
minRange = dp.resetTime(parent.minRange),
maxRange = dp.resetTime(parent.maxRange),
opts = parent.opts, opts = parent.opts,
d = dp.getParsedDate(date), d = dp.getParsedDate(date),
render = {}, render = {},
html = d.date; html = d.date;
if (opts.onRenderCell) {
render = opts.onRenderCell(date, type) || {};
html = render.html ? render.html : html;
classes += render.classes ? ' ' + render.classes : '';
}
switch (type) { switch (type) {
case 'day': case 'day':
if (parent.isWeekend(d.day)) classes += " -weekend-"; if (parent.isWeekend(d.day)) classes += " -weekend-";
@ -103,26 +105,26 @@
} }
if (opts.range) { if (opts.range) {
if (dp.isSame(minRange, date, type)) classes += ' -range-from-'; if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-'; if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
if (parent.selectedDates.length == 1 && parent.focused) { if (parent.selectedDates.length == 1 && parent.focused) {
if ( if (
(dp.bigger(minRange, date) && dp.less(parent.focused, date)) || (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
(dp.less(maxRange, date) && dp.bigger(parent.focused, date))) (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
{ {
classes += ' -in-range-' classes += ' -in-range-'
} }
if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) { if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-from-' classes += ' -range-from-'
} }
if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) { if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-to-' classes += ' -range-to-'
} }
} else if (parent.selectedDates.length == 2) { } else if (parent.selectedDates.length == 2) {
if (dp.bigger(minRange, date) && dp.less(maxRange, date)) { if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
classes += ' -in-range-' classes += ' -in-range-'
} }
} }
@ -245,7 +247,6 @@
}, },
_render: function () { _render: function () {
if (this.opts.onlyTimepicker) return;
this._renderTypes[this.type].bind(this)(); this._renderTypes[this.type].bind(this)();
}, },
@ -264,7 +265,6 @@
}, },
show: function () { show: function () {
if (this.opts.onlyTimepicker) return;
this.$el.addClass('active'); this.$el.addClass('active');
this.acitve = true; this.acitve = true;
}, },
@ -280,11 +280,10 @@
_handleClick: function (el) { _handleClick: function (el) {
var date = el.data('date') || 1, var date = el.data('date') || 1,
month = el.data('month') || 0, month = el.data('month') || 0,
year = el.data('year') || this.d.parsedDate.year, year = el.data('year') || this.d.parsedDate.year;
dp = this.d;
// Change view if min view does not reach yet // Change view if min view does not reach yet
if (dp.view != this.opts.minView) { if (this.d.view != this.opts.minView) {
dp.down(new Date(year, month, date)); this.d.down(new Date(year, month, date));
return; return;
} }
// Select date if min view is reached // Select date if min view is reached
@ -292,11 +291,16 @@
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType); alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
if (!alreadySelected) { if (!alreadySelected) {
dp._trigger('clickCell', selectedDate); this.d._trigger('clickCell', selectedDate);
return; } else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
this.d.lastSelectedDate = alreadySelected;
if (this.d.opts.timepicker) {
this.d.timepicker._setTime(alreadySelected);
this.d.timepicker.update();
}
} }
dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
}, },

170
src/js/datepicker.js
View File

@ -1,6 +1,5 @@
;(function () { ;(function () {
var VERSION = '2.2.3', var pluginName = 'datepicker',
pluginName = 'datepicker',
autoInitSelector = '.datepicker-here', autoInitSelector = '.datepicker-here',
$body, $datepickersContainer, $body, $datepickersContainer,
containerBuilt = false, containerBuilt = false,
@ -63,23 +62,17 @@
// timepicker // timepicker
timepicker: false, timepicker: false,
onlyTimepicker: false,
dateTimeSeparator: ' ', dateTimeSeparator: ' ',
timeFormat: '', timeFormat: '',
minHours: 0, minHours: 0,
maxHours: 24, maxHours: 24,
minMinutes: 0, minMinutes: 0,
maxMinutes: 59, maxMinutes: 59,
minSeconds: 0,
maxSeconds: 59,
hoursStep: 1, hoursStep: 1,
minutesStep: 1, minutesStep: 1,
secondsStep: 1,
// events // events
onSelect: '', onSelect: '',
onShow: '',
onHide: '',
onChangeMonth: '', onChangeMonth: '',
onChangeYear: '', onChangeYear: '',
onChangeDecade: '', onChangeDecade: '',
@ -145,7 +138,6 @@
datepicker = Datepicker; datepicker = Datepicker;
datepicker.prototype = { datepicker.prototype = {
VERSION: VERSION,
viewIndexes: ['days', 'months', 'years'], viewIndexes: ['days', 'months', 'years'],
init: function () { init: function () {
@ -162,7 +154,7 @@
this._setPositionClasses(this.opts.position); this._setPositionClasses(this.opts.position);
this._bindEvents() this._bindEvents()
} }
if (this.opts.keyboardNav && !this.opts.onlyTimepicker) { if (this.opts.keyboardNav) {
this._bindKeyboardEvents(); this._bindKeyboardEvents();
} }
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this)); this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@ -178,10 +170,6 @@
this._bindTimepickerEvents(); this._bindTimepickerEvents();
} }
if (this.opts.onlyTimepicker) {
this.$datepicker.addClass('-only-timepicker-');
}
this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts); this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show(); this.views[this.currentView].show();
this.nav = new $.fn.datepicker.Navigation(this, this.opts); this.nav = new $.fn.datepicker.Navigation(this, this.opts);
@ -251,10 +239,6 @@
this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator); this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
} }
if (this.opts.onlyTimepicker) {
this.loc.dateFormat = this.loc.timeFormat;
}
var boundary = this._getWordBoundaryRegExp; var boundary = this._getWordBoundaryRegExp;
if (this.loc.timeFormat.match(boundary('aa')) || if (this.loc.timeFormat.match(boundary('aa')) ||
this.loc.timeFormat.match(boundary('AA')) this.loc.timeFormat.match(boundary('AA'))
@ -305,8 +289,7 @@
parsedSelected.month, parsedSelected.month,
parsedSelected.date, parsedSelected.date,
parsedSelected.hours, parsedSelected.hours,
parsedSelected.minutes, parsedSelected.minutes
parsedSelected.seconds
); );
formattedDates = selectedDates.map(function (date) { formattedDates = selectedDates.map(function (date) {
@ -322,11 +305,11 @@
parsedDate.month, parsedDate.month,
parsedDate.date, parsedDate.date,
parsedDate.hours, parsedDate.hours,
parsedDate.minutes, parsedDate.minutes
parsedDate.seconds
); );
}) })
} }
this._prevOnSelectValue = formattedDates; this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this); this.opts.onSelect(formattedDates, dates, this);
}, },
@ -379,13 +362,11 @@
d = datepicker.getParsedDate(date), d = datepicker.getParsedDate(date),
fullHours = d.fullHours, fullHours = d.fullHours,
hours = d.hours, hours = d.hours,
ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
dayPeriod = 'am', dayPeriod = 'am',
replacer = this._replacer,
validHours; validHours;
if (this.opts.timepicker && this.timepicker && ampm) { if (this.opts.timepicker && this.timepicker && this.ampm) {
validHours = this.timepicker._getValidHoursFromDate(date, ampm); validHours = this.timepicker._getValidHoursFromDate(date);
fullHours = leadingZero(validHours.hours); fullHours = leadingZero(validHours.hours);
hours = validHours.hours; hours = validHours.hours;
dayPeriod = validHours.dayPeriod; dayPeriod = validHours.dayPeriod;
@ -395,63 +376,50 @@
case /@/.test(result): case /@/.test(result):
result = result.replace(/@/, date.getTime()); result = result.replace(/@/, date.getTime());
case /aa/.test(result): case /aa/.test(result):
result = replacer(result, boundary('aa'), dayPeriod); result = result.replace(boundary('aa'), dayPeriod);
case /AA/.test(result): case /AA/.test(result):
result = replacer(result, boundary('AA'), dayPeriod.toUpperCase()); result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
case /dd/.test(result): case /dd/.test(result):
result = replacer(result, boundary('dd'), d.fullDate); result = result.replace(boundary('dd'), d.fullDate);
case /d/.test(result): case /d/.test(result):
result = replacer(result, boundary('d'), d.date); result = result.replace(boundary('d'), d.date);
case /DD/.test(result): case /DD/.test(result):
result = replacer(result, boundary('DD'), locale.days[d.day]); result = result.replace(boundary('DD'), locale.days[d.day]);
case /D/.test(result): case /D/.test(result):
result = replacer(result, boundary('D'), locale.daysShort[d.day]); result = result.replace(boundary('D'), locale.daysShort[d.day]);
case /mm/.test(result): case /mm/.test(result):
result = replacer(result, boundary('mm'), d.fullMonth); result = result.replace(boundary('mm'), d.fullMonth);
case /m/.test(result): case /m/.test(result):
result = replacer(result, boundary('m'), d.month + 1); result = result.replace(boundary('m'), d.month + 1);
case /MM/.test(result): case /MM/.test(result):
result = replacer(result, boundary('MM'), this.loc.months[d.month]); result = result.replace(boundary('MM'), this.loc.months[d.month]);
case /M/.test(result): case /M/.test(result):
result = replacer(result, boundary('M'), locale.monthsShort[d.month]); result = result.replace(boundary('M'), locale.monthsShort[d.month]);
case /ss/.test(result):
result = replacer(result, boundary('ss'), d.fullSeconds);
case /s/.test(result):
result = replacer(result, boundary('s'), d.seconds);
case /ii/.test(result): case /ii/.test(result):
result = replacer(result, boundary('ii'), d.fullMinutes); result = result.replace(boundary('ii'), d.fullMinutes);
case /i/.test(result): case /i/.test(result):
result = replacer(result, boundary('i'), d.minutes); result = result.replace(boundary('i'), d.minutes);
case /hh/.test(result): case /hh/.test(result):
result = replacer(result, boundary('hh'), fullHours); result = result.replace(boundary('hh'), fullHours);
case /h/.test(result): case /h/.test(result):
result = replacer(result, boundary('h'), hours); result = result.replace(boundary('h'), hours);
case /yyyy/.test(result): case /yyyy/.test(result):
result = replacer(result, boundary('yyyy'), d.year); result = result.replace(boundary('yyyy'), d.year);
case /yyyy1/.test(result): case /yyyy1/.test(result):
result = replacer(result, boundary('yyyy1'), decade[0]); result = result.replace(boundary('yyyy1'), decade[0]);
case /yyyy2/.test(result): case /yyyy2/.test(result):
result = replacer(result, boundary('yyyy2'), decade[1]); result = result.replace(boundary('yyyy2'), decade[1]);
case /yy/.test(result): case /yy/.test(result):
result = replacer(result, boundary('yy'), d.year.toString().slice(-2)); result = result.replace(boundary('yy'), d.year.toString().slice(-2));
} }
return result; return result;
}, },
_replacer: function (str, reg, data) {
return str.replace(reg, function (match, p1,p2,p3) {
return p1 + data + p3;
})
},
_getWordBoundaryRegExp: function (sign) { _getWordBoundaryRegExp: function (sign) {
var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;'; return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
}, },
selectDate: function (date) { selectDate: function (date) {
var _this = this, var _this = this,
opts = _this.opts, opts = _this.opts,
@ -485,7 +453,6 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes) date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
} }
if (_this.view == 'days') { if (_this.view == 'days') {
@ -614,8 +581,7 @@
* @param {String|Number|Object} [value] - new param value * @param {String|Number|Object} [value] - new param value
*/ */
update: function (param, value) { update: function (param, value) {
var len = arguments.length, var len = arguments.length;
lastSelectedDate = this.lastSelectedDate;
if (len == 2) { if (len == 2) {
this.opts[param] = value; this.opts[param] = value;
@ -627,7 +593,7 @@
this._syncWithMinMaxDates(); this._syncWithMinMaxDates();
this._defineLocale(this.opts.language); this._defineLocale(this.opts.language);
this.nav._addButtonsIfNeed(); this.nav._addButtonsIfNeed();
if (!this.opts.onlyTimepicker) this.nav._render(); this.nav._render();
this.views[this.currentView]._render(); this.views[this.currentView]._render();
if (this.elIsInput && !this.opts.inline) { if (this.elIsInput && !this.opts.inline) {
@ -641,19 +607,14 @@
this.$datepicker.addClass(this.opts.classes) this.$datepicker.addClass(this.opts.classes)
} }
if (this.opts.onlyTimepicker) {
this.$datepicker.addClass('-only-timepicker-');
}
if (this.opts.timepicker) { if (this.opts.timepicker) {
if (lastSelectedDate) this.timepicker._handleDate(lastSelectedDate); this.timepicker._handleDate(this.lastSelectedDate);
this.timepicker._updateRanges(); this.timepicker._updateRanges();
this.timepicker._updateCurrentTime(); this.timepicker._updateCurrentTime();
// Change hours and minutes if it's values have been changed through min/max hours/minutes // Change hours and minutes if it's values have been changed through min/max hours/minutes
if (lastSelectedDate) { if (this.lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours); this.lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes); this.lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
} }
} }
@ -819,20 +780,12 @@
}, },
show: function () { show: function () {
var onShow = this.opts.onShow;
this.setPosition(this.opts.position); this.setPosition(this.opts.position);
this.$datepicker.addClass('active'); this.$datepicker.addClass('active');
this.visible = true; this.visible = true;
if (onShow) {
this._bindVisionEvents(onShow)
}
}, },
hide: function () { hide: function () {
var onHide = this.opts.onHide;
this.$datepicker this.$datepicker
.removeClass('active') .removeClass('active')
.css({ .css({
@ -845,10 +798,6 @@
this.inFocus = false; this.inFocus = false;
this.visible = false; this.visible = false;
this.$el.blur(); this.$el.blur();
if (onHide) {
this._bindVisionEvents(onHide)
}
}, },
down: function (date) { down: function (date) {
@ -859,12 +808,6 @@
this._changeView(date, 'up'); this._changeView(date, 'up');
}, },
_bindVisionEvents: function (event) {
this.$datepicker.off('transitionend.dp');
event(this, false);
this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
},
_changeView: function (date, dir) { _changeView: function (date, dir) {
date = date || this.focused || this.date; date = date || this.focused || this.date;
@ -1078,7 +1021,7 @@
} }
$cell = this.views[this.currentView].$el.find(selector); $cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : $(''); return $cell.length ? $cell : '';
}, },
destroy: function () { destroy: function () {
@ -1101,30 +1044,6 @@
} }
}, },
_handleAlreadySelectedDates: function (alreadySelected, selectedDate) {
if (this.opts.range) {
if (!this.opts.toggleSelected) {
// Add possibility to select same date when range is true
if (this.selectedDates.length != 2) {
this._trigger('clickCell', selectedDate);
}
} else {
this.removeDate(selectedDate);
}
} else if (this.opts.toggleSelected){
this.removeDate(selectedDate);
}
// Change last selected date to be able to change time when clicking on this cell
if (!this.opts.toggleSelected) {
this.lastSelectedDate = alreadySelected;
if (this.opts.timepicker) {
this.timepicker._setTime(alreadySelected);
this.timepicker.update();
}
}
},
_onShowEvent: function (e) { _onShowEvent: function (e) {
if (!this.visible) { if (!this.visible) {
this.show(); this.show();
@ -1197,12 +1116,11 @@
if (this.timepicker) { if (this.timepicker) {
this.focused.setHours(this.timepicker.hours); this.focused.setHours(this.timepicker.hours);
this.focused.setMinutes(this.timepicker.minutes); this.focused.setMinutes(this.timepicker.minutes);
this.focused.setSeconds(this.timepicker.seconds);
} }
this.selectDate(this.focused); this.selectDate(this.focused);
return; } else if (alreadySelected && this.opts.toggleSelected){
this.removeDate(this.focused);
} }
this._handleAlreadySelectedDates(alreadySelected, this.focused)
} }
} }
} }
@ -1259,7 +1177,7 @@
this.silent = false; this.silent = false;
}, },
_onTimeChange: function (e, h, m, s) { _onTimeChange: function (e, h, m) {
var date = new Date(), var date = new Date(),
selectedDates = this.selectedDates, selectedDates = this.selectedDates,
selected = false; selected = false;
@ -1271,7 +1189,6 @@
date.setHours(h); date.setHours(h);
date.setMinutes(m); date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) { if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date); this.selectDate(date);
@ -1287,7 +1204,6 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes); date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
} }
this.selectDate(date); this.selectDate(date);
}, },
@ -1411,9 +1327,7 @@
hours: date.getHours(), hours: date.getHours(),
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() , fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
minutes: date.getMinutes(), minutes: date.getMinutes(),
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(), fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
seconds: date.getSeconds(),
fullSeconds: date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
} }
}; };
@ -1460,16 +1374,6 @@
return parseInt(num) < 10 ? '0' + num : num; return parseInt(num) < 10 ? '0' + num : num;
}; };
/**
* Returns copy of date with hours and minutes equals to 0
* @param date {Date}
*/
datepicker.resetTime = function (date) {
if (typeof date != 'object') return;
date = datepicker.getParsedDate(date);
return new Date(date.year, date.month, date.date)
};
$.fn.datepicker = function ( options ) { $.fn.datepicker = function ( options ) {
return this.each(function () { return this.each(function () {
if (!$.data(this, pluginName)) { if (!$.data(this, pluginName)) {

12
src/js/i18n/datepicker.cs.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['cs'] = {
days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
today: 'Dnes',
clear: 'Vymazat',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};

12
src/js/i18n/datepicker.es.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['es'] = {
days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
months: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Augosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
today: 'Hoy',
clear: 'Limpiar',
dateFormat: 'dd/mm/yyyy',
timeFormat: 'hh:ii aa',
firstDay: 1
};

12
src/js/i18n/datepicker.fi.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['fi'] = {
days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
months: ['Tammikuu','Helmikuu','Maaliskuu','Huhtikuu','Toukokuu','Kesäkuu', 'Heinäkuu','Elokuu','Syyskuu','Lokakuu','Marraskuu','Joulukuu'],
monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
today: 'Tänään',
clear: 'Tyhjennä',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};

12
src/js/i18n/datepicker.fr.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['fr'] = {
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
months: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Decembre'],
monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
today: "Aujourd'hui",
clear: 'Effacer',
dateFormat: 'dd/mm/yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};

12
src/js/i18n/datepicker.hu.js
View File

@ -1,12 +0,0 @@
;(function ($) { $.fn.datepicker.language['hu'] = {
days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
today: 'Ma',
clear: 'Törlés',
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii aa',
firstDay: 1
}; })(jQuery);

12
src/js/i18n/datepicker.pl.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['pl'] = {
days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
today: 'Dzisiaj',
clear: 'Wyczyść',
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii:aa',
firstDay: 1
};

12
src/js/i18n/datepicker.sk.js
View File

@ -1,12 +0,0 @@
$.fn.datepicker.language['sk'] = {
days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
months: ['Január','Február','Marec','Apríl','Máj','Jún', 'Júl','August','September','Október','November','December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
today: 'Dnes',
clear: 'Vymazať',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};

11
src/js/navigation.js
View File

@ -30,9 +30,7 @@
}, },
_buildBaseHtml: function () { _buildBaseHtml: function () {
if (!this.opts.onlyTimepicker) {
this._render(); this._render();
}
this._addButtonsIfNeed(); this._addButtonsIfNeed();
}, },
@ -89,10 +87,10 @@
switch (this.d.view) { switch (this.d.view) {
case 'days': case 'days':
if (!this.d._isInRange(new Date(y, m-1, 1), 'month')) { if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev') this._disableNav('prev')
} }
if (!this.d._isInRange(new Date(y, m+1, 1), 'month')) { if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next') this._disableNav('next')
} }
break; break;
@ -105,11 +103,10 @@
} }
break; break;
case 'years': case 'years':
var decade = dp.getDecade(this.d.date); if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
this._disableNav('prev') this._disableNav('prev')
} }
if (!this.d._isInRange(new Date(decade[1] + 1, 0, 1), 'year')) { if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next') this._disableNav('next')
} }
break; break;

74
src/js/timepicker.js
View File

@ -1,11 +1,9 @@
;(function () { ;(function () {
var template = '<div class="datepicker--time">' + var template = '<div class="datepicker--time">' +
'<div class="datepicker--time-current">' + '<div class="datepicker--time-current">' +
' <span class="datepicker--time-current-hours">#{hourVisible}</span>' + ' <span class="datepicker--time-current-hours">#{hourValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' + ' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-minutes">#{minValue}</span>' + ' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
'</div>' + '</div>' +
'<div class="datepicker--time-sliders">' + '<div class="datepicker--time-sliders">' +
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
@ -14,9 +12,6 @@
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' + ' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' + ' </div>' +
' <div class="datepicker--time-row">' +
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
' </div>' +
'</div>' + '</div>' +
'</div>', '</div>',
datepicker = $.fn.datepicker, datepicker = $.fn.datepicker,
@ -52,53 +47,27 @@
this._handleDate(date); this._handleDate(date);
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours; this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes; this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
}, },
/**
* Sets minHours and minMinutes from date (usually it's a minDate)
* Also changes minMinutes if current hours are bigger then @date hours
* @param date {Date}
* @private
*/
_setMinTimeFromDate: function (date) { _setMinTimeFromDate: function (date) {
this.minHours = date.getHours(); this.minHours = date.getHours();
this.minMinutes = date.getMinutes(); this.minMinutes = date.getMinutes();
this.minSeconds = date.getSeconds();
// If, for example, min hours are 10, and current hours are 12,
// update minMinutes to default value, to be able to choose whole range of values
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() > date.getHours()) {
this.minMinutes = this.opts.minMinutes;
}
}
}, },
_setMaxTimeFromDate: function (date) { _setMaxTimeFromDate: function (date) {
this.maxHours = date.getHours(); this.maxHours = date.getHours();
this.maxMinutes = date.getMinutes(); this.maxMinutes = date.getMinutes();
this.maxSeconds = date.getSeconds();
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() < date.getHours()) {
this.maxMinutes = this.opts.maxMinutes;
}
}
}, },
_setDefaultMinMaxTime: function () { _setDefaultMinMaxTime: function () {
var maxHours = 23, var maxHours = 23,
maxMinutes = 59, maxMinutes = 59,
maxSeconds = 59,
opts = this.opts; opts = this.opts;
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours; this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes; this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours; this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes; this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
}, },
/** /**
@ -118,12 +87,6 @@
} else if (this.minutes > this.maxMinutes) { } else if (this.minutes > this.maxMinutes) {
this.minutes = this.maxMinutes; this.minutes = this.maxMinutes;
} }
if (this.seconds < this.minSeconds) {
this.seconds = this.minSeconds;
} else if (this.seconds > this.maxSeconds) {
this.seconds = this.maxSeconds;
}
}, },
_buildHTML: function () { _buildHTML: function () {
@ -132,16 +95,11 @@
hourMin: this.minHours, hourMin: this.minHours,
hourMax: lz(this.maxHours), hourMax: lz(this.maxHours),
hourStep: this.opts.hoursStep, hourStep: this.opts.hoursStep,
hourValue: this.hours, hourValue: lz(this.displayHours),
hourVisible: lz(this.displayHours),
minMin: this.minMinutes, minMin: this.minMinutes,
minMax: lz(this.maxMinutes), minMax: lz(this.maxMinutes),
minStep: this.opts.minutesStep, minStep: this.opts.minutesStep,
minValue: lz(this.minutes), minValue: lz(this.minutes)
secMin: this.minSeconds,
secMax: lz(this.maxSeconds),
secStep: this.opts.secondsStep,
secValue: lz(this.seconds)
}, },
_template = dp.template(template, data); _template = dp.template(template, data);
@ -149,10 +107,8 @@
this.$ranges = $('[type="range"]', this.$timepicker); this.$ranges = $('[type="range"]', this.$timepicker);
this.$hours = $('[name="hours"]', this.$timepicker); this.$hours = $('[name="hours"]', this.$timepicker);
this.$minutes = $('[name="minutes"]', this.$timepicker); this.$minutes = $('[name="minutes"]', this.$timepicker);
this.$seconds = $('[name="seconds"]', this.$timepicker);
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker); this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker); this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm = $('<span class="datepicker--time-current-ampm">') this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -165,12 +121,10 @@
_updateCurrentTime: function () { _updateCurrentTime: function () {
var h = dp.getLeadingZeroNum(this.displayHours), var h = dp.getLeadingZeroNum(this.displayHours),
m = dp.getLeadingZeroNum(this.minutes), m = dp.getLeadingZeroNum(this.minutes);
s = dp.getLeadingZeroNum(this.seconds);
this.$hoursText.html(h); this.$hoursText.html(h);
this.$minutesText.html(m); this.$minutesText.html(m);
this.$secondsText.html(s);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm.html(this.dayPeriod); this.$ampm.html(this.dayPeriod);
@ -186,12 +140,7 @@
this.$minutes.attr({ this.$minutes.attr({
min: this.minMinutes, min: this.minMinutes,
max: this.maxMinutes max: this.maxMinutes
}).val(this.minutes); }).val(this.minutes)
this.$seconds.attr({
min: this.minSeconds,
max: this.maxSeconds
}).val(this.seconds);
}, },
/** /**
@ -202,6 +151,7 @@
*/ */
_handleDate: function (date) { _handleDate: function (date) {
this._setDefaultMinMaxTime(); this._setDefaultMinMaxTime();
if (date) { if (date) {
if (dp.isSame(date, this.d.opts.minDate)) { if (dp.isSame(date, this.d.opts.minDate)) {
this._setMinTimeFromDate(this.d.opts.minDate); this._setMinTimeFromDate(this.d.opts.minDate);
@ -221,11 +171,10 @@
/** /**
* Calculates valid hour value to display in text input and datepicker's body. * Calculates valid hour value to display in text input and datepicker's body.
* @param date {Date|Number} - date or hours * @param date {Date|Number} - date or hours
* @param [ampm] {Boolean} - 12 hours mode
* @returns {{hours: *, dayPeriod: string}} * @returns {{hours: *, dayPeriod: string}}
* @private * @private
*/ */
_getValidHoursFromDate: function (date, ampm) { _getValidHoursFromDate: function (date) {
var d = date, var d = date,
hours = date; hours = date;
@ -234,10 +183,10 @@
hours = d.hours; hours = d.hours;
} }
var _ampm = ampm || this.d.ampm, var ampm = this.d.ampm,
dayPeriod = 'am'; dayPeriod = 'am';
if (_ampm) { if (ampm) {
switch(true) { switch(true) {
case hours == 0: case hours == 0:
hours = 12; hours = 12;
@ -284,10 +233,7 @@
this[name] = $target.val(); this[name] = $target.val();
this._updateCurrentTime(); this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]); this.d._trigger('timeChange', [this.hours, this.minutes])
this._handleDate(this.d.lastSelectedDate);
this.update()
}, },
_onSelectDate: function (e, data) { _onSelectDate: function (e, data) {

60
src/sass/_datepicker-config.scss
View File

@ -1,16 +1,16 @@
$datepickerDayCellSize: 32px !default; $dayCellSize: 32px;
$datepickerWidth: 250px !default; $datepickerWidth: 250px;
$datepickerMinBodyHeight: 170px !default; $datepickerMinBodyHeight: 170px;
$datepickerBorderRadius: 4px !default; $datepickerBorderRadius: 4px;
$datepickerPadding: 4px !default; $datepickerPadding: 4px;
$datepickerZIndex: 100 !default; $datepickerZIndex: 100;
$datepickerFontFamily: Tahoma !default; $fontFamily: Tahoma;
$datepickerFontSize: 14px !default; $fontSize: 14px;
$datepickerYearsPerRow: 4 !default; $yearsPerRow: 4;
$datepickerTextColor: ( $textColor: (
button: #5cc4ef, button: #5cc4ef,
otherMonth: #dedede, otherMonth: #dedede,
otherMonthInRange: #ccc, otherMonthInRange: #ccc,
@ -19,60 +19,60 @@ $datepickerTextColor: (
common: #4a4a4a, common: #4a4a4a,
dayNames: #FF9A19, dayNames: #FF9A19,
navArrows: #9c9c9c navArrows: #9c9c9c
) !default; );
$datepickerBG: ( $bg: (
selected: #5cc4ef, selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5), selectedHover: darken(#5cc4ef, 5),
inRange: rgba(#5cc4ef, .1), inRange: rgba(#5cc4ef, .1),
hover: #f0f0f0 hover: #f0f0f0
) !default; );
$datepickerBorderColor: ( $borderColor: (
nav: #efefef, nav: #efefef,
inline: #d7d7d7, inline: #d7d7d7,
default: #dbdbdb default: #dbdbdb
) !default; );
$datepickerNavigationHeight: 32px !default; $navigationHeight: 32px;
$datepickerNavigationButtonsOffset: 2px !default; $navigationButtonsOffset: 2px;
$datepickerPointerSize: 10px !default; $pointerSize: 10px;
$datepickerPointerOffset: 10px !default; $pointerOffset: 10px;
// Transitions // Transitions
$datepickerTransitionSpeed: .3s !default; $transitionSpeed: .3s;
$datepickerTransitionEase: ease !default; $transitionEase: ease;
$datepickerTransitionOffset: 8px !default; $transitionOffset: 8px;
// Objects // Objects
%otherMonth { %otherMonth {
color: map_get($datepickerTextColor, otherMonth); color: map_get($textColor, otherMonth);
&:hover { &:hover {
color: darken(map_get($datepickerTextColor, otherMonth), 10); color: darken(map_get($textColor, otherMonth), 10);
} }
&.-disabled- { &.-disabled- {
&.-focus- { &.-focus- {
color: map_get($datepickerTextColor, otherMonth); color: map_get($textColor, otherMonth);
} }
} }
&.-selected- { &.-selected- {
color: #fff; color: #fff;
background: lighten(map_get($datepickerBG, selected), 15); background: lighten(map_get($bg, selected), 15);
&.-focus- { &.-focus- {
background: lighten(map_get($datepickerBG, selected), 10); background: lighten(map_get($bg, selected), 10);
} }
} }
&.-in-range- { &.-in-range- {
background-color: map_get($datepickerBG, inRange); background-color: map_get($bg, inRange);
color: darken(map_get($datepickerTextColor, otherMonth), 7); color: darken(map_get($textColor, otherMonth), 7);
&.-focus- { &.-focus- {
background-color: rgba(map_get($datepickerBG, inRange), .2); background-color: rgba(map_get($bg, inRange), .2);
} }
} }

42
src/sass/cell.scss
View File

@ -17,62 +17,62 @@
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $datepickerDayCellSize; height: $dayCellSize;
z-index: 1; z-index: 1;
&.-focus- { &.-focus- {
background: map_get($datepickerBG, hover); background: map_get($bg, hover);
} }
&.-current- { &.-current- {
color: map_get($datepickerTextColor, currentDate); color: map_get($textColor, currentDate);
&.-focus- { &.-focus- {
color: map_get($datepickerTextColor, common); color: map_get($textColor, common);
} }
&.-in-range- { &.-in-range- {
color: map_get($datepickerTextColor, currentDate); color: map_get($textColor, currentDate);
} }
} }
&.-in-range- { &.-in-range- {
background: map_get($datepickerBG, inRange); background: map_get($bg, inRange);
color: map_get($datepickerTextColor, common); color: map_get($textColor, common);
border-radius: 0; border-radius: 0;
&.-focus- { &.-focus- {
background-color: rgba(map_get($datepickerBG, inRange), .2); background-color: rgba(map_get($bg, inRange), .2);
} }
} }
&.-disabled- { &.-disabled- {
cursor: default; cursor: default;
color: map_get($datepickerTextColor, disabled); color: map_get($textColor, disabled);
&.-focus- { &.-focus- {
color: map_get($datepickerTextColor, disabled); color: map_get($textColor, disabled);
} }
&.-in-range- { &.-in-range- {
color: darken(map_get($datepickerTextColor, disabled), 5); color: darken(map_get($textColor, disabled), 5);
} }
&.-current- { &.-current- {
&.-focus- { &.-focus- {
color: map_get($datepickerTextColor, disabled); color: map_get($textColor, disabled);
} }
} }
} }
&.-range-from- { &.-range-from- {
border: 1px solid rgba(map_get($datepickerBG, selected), .5); border: 1px solid rgba(map_get($bg, selected), .5);
background-color: map_get($datepickerBG, inRange); background-color: map_get($bg, inRange);
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius; border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
} }
&.-range-to- { &.-range-to- {
border: 1px solid rgba(map_get($datepickerBG, selected), .5); border: 1px solid rgba(map_get($bg, selected), .5);
background-color: map_get($datepickerBG, inRange); background-color: map_get($bg, inRange);
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0; border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
} }
@ -84,15 +84,15 @@
&.-selected- { &.-selected- {
color: #fff; color: #fff;
border: none; border: none;
background: map_get($datepickerBG, selected); background: map_get($bg, selected);
&.-current- { &.-current- {
color: #fff; color: #fff;
background: map_get($datepickerBG, selected); background: map_get($bg, selected);
} }
&.-focus- { &.-focus- {
background: map_get($datepickerBG, selectedHover); background: map_get($bg, selectedHover);
} }
} }
@ -111,7 +111,7 @@
} }
.datepicker--day-name { .datepicker--day-name {
color: map_get($datepickerTextColor, dayNames); color: map_get($textColor, dayNames);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -164,7 +164,7 @@
// ------------------------- // -------------------------
.datepicker--cell-year { .datepicker--cell-year {
width: 100% / $datepickerYearsPerRow; width: 100% / $yearsPerRow;
height: 33.33%; height: 33.33%;
&.-other-decade- { &.-other-decade- {

48
src/sass/datepicker.scss
View File

@ -16,44 +16,44 @@
.datepicker { .datepicker {
background: #fff; background: #fff;
border: 1px solid map_get($datepickerBorderColor, default); border: 1px solid map_get($borderColor, default);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
box-sizing: content-box; box-sizing: content-box;
font-family: $datepickerFontFamily, sans-serif; font-family: $fontFamily, sans-serif;
font-size: $datepickerFontSize; font-size: $fontSize;
color: map_get($datepickerTextColor, common); color: map_get($textColor, common);
width: $datepickerWidth; width: $datepickerWidth;
position: absolute; position: absolute;
left: -100000px; left: -100000px;
opacity: 0; opacity: 0;
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed; transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
z-index: $datepickerZIndex; z-index: $datepickerZIndex;
&.-from-top- { &.-from-top- {
transform: translateY(-$datepickerTransitionOffset); transform: translateY(-$transitionOffset);
} }
&.-from-right- { &.-from-right- {
transform: translateX($datepickerTransitionOffset); transform: translateX($transitionOffset);
} }
&.-from-bottom- { &.-from-bottom- {
transform: translateY($datepickerTransitionOffset); transform: translateY($transitionOffset);
} }
&.-from-left- { &.-from-left- {
transform: translateX(-$datepickerTransitionOffset); transform: translateX(-$transitionOffset);
} }
&.active { &.active {
opacity: 1; opacity: 1;
transform: translate(0); transform: translate(0);
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s; transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
} }
} }
.datepicker-inline { .datepicker-inline {
.datepicker { .datepicker {
border-color: map-get($datepickerBorderColor, inline); border-color: map-get($borderColor, inline);
box-shadow: none; box-shadow: none;
position: static; position: static;
left: auto; left: auto;
@ -70,23 +70,19 @@
.datepicker--content { .datepicker--content {
box-sizing: content-box; box-sizing: content-box;
padding: $datepickerPadding; padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
} }
// Pointer // Pointer
// ------------------------------------------------- // -------------------------------------------------
$pointerHalfSize: $datepickerPointerSize / 2 - 1; $pointerHalfSize: $pointerSize / 2 - 1;
.datepicker--pointer { .datepicker--pointer {
position: absolute; position: absolute;
background: #fff; background: #fff;
border-top: 1px solid map-get($datepickerBorderColor, default); border-top: 1px solid map-get($borderColor, default);
border-right: 1px solid map-get($datepickerBorderColor, default); border-right: 1px solid map-get($borderColor, default);
width: $datepickerPointerSize; width: $pointerSize;
height: $datepickerPointerSize; height: $pointerSize;
z-index: -1; z-index: -1;
// Main axis // Main axis
@ -116,23 +112,23 @@ $pointerHalfSize: $datepickerPointerSize / 2 - 1;
// ------------------------- // -------------------------
.-top-left- &, .-bottom-left- & { .-top-left- &, .-bottom-left- & {
left: $datepickerPointerOffset; left: $pointerOffset;
} }
.-top-right- &, .-bottom-right- & { .-top-right- &, .-bottom-right- & {
right: $datepickerPointerOffset; right: $pointerOffset;
} }
.-top-center- &, .-bottom-center- & { .-top-center- &, .-bottom-center- & {
left: calc(50% - #{$datepickerPointerSize} / 2); left: calc(50% - #{$pointerSize} / 2);
} }
.-left-top- &, .-right-top- & { .-left-top- &, .-right-top- & {
top: $datepickerPointerOffset; top: $pointerOffset;
} }
.-left-bottom- &, .-right-bottom- & { .-left-bottom- &, .-right-bottom- & {
bottom: $datepickerPointerOffset; bottom: $pointerOffset;
} }
.-left-center- &, .-right-center- & { .-left-center- &, .-right-center- & {
top: calc(50% - #{$datepickerPointerSize} / 2); top: calc(50% - #{$pointerSize} / 2);
} }
} }

26
src/sass/navigation.scss
View File

@ -7,13 +7,9 @@
.datepicker--nav { .datepicker--nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid map_get($datepickerBorderColor, nav); border-bottom: 1px solid map_get($borderColor, nav);
min-height: $datepickerNavigationHeight; min-height: $navigationHeight;
padding: $datepickerPadding; padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
} }
.datepicker--nav-title, .datepicker--nav-title,
@ -25,12 +21,12 @@
} }
.datepicker--nav-action { .datepicker--nav-action {
width: $datepickerDayCellSize; width: $dayCellSize;
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
user-select: none; user-select: none;
&:hover { &:hover {
background: map_get($datepickerBG, hover); background: map_get($bg, hover);
} }
&.-disabled- { &.-disabled- {
@ -44,7 +40,7 @@
path { path {
fill: none; fill: none;
stroke: map_get($datepickerTextColor, navArrows); stroke: map_get($textColor, navArrows);
stroke-width: 2px; stroke-width: 2px;
} }
} }
@ -55,12 +51,12 @@
i { i {
font-style: normal; font-style: normal;
color: map_get($datepickerTextColor, navArrows); color: map_get($textColor, navArrows);
margin-left: 5px; margin-left: 5px;
} }
&:hover { &:hover {
background: map_get($datepickerBG, hover); background: map_get($bg, hover);
} }
&.-disabled- { &.-disabled- {
@ -75,11 +71,11 @@
.datepicker--buttons { .datepicker--buttons {
display: flex; display: flex;
padding: $datepickerPadding; padding: $datepickerPadding;
border-top: 1px solid map_get($datepickerBorderColor, nav); border-top: 1px solid map_get($borderColor, nav);
} }
.datepicker--button { .datepicker--button {
color: map_get($datepickerTextColor, currentDate); color: map_get($textColor, currentDate);
cursor: pointer; cursor: pointer;
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
flex: 1; flex: 1;
@ -89,7 +85,7 @@
height: 32px; height: 32px;
&:hover { &:hover {
color: map_get($datepickerTextColor, common); color: map_get($textColor, common);
background: map_get($datepickerBG, hover); background: map_get($bg, hover);
} }
} }

25
src/sass/timepicker.scss
View File

@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time { .datepicker--time {
border-top: 1px solid map_get($datepickerBorderColor, nav); border-top: 1px solid map_get($borderColor, nav);
display: flex; display: flex;
align-items: center; align-items: center;
@ -71,10 +71,6 @@ $rangeThumbBg: #dedede;
max-width: 138px; max-width: 138px;
} }
} }
.-only-timepicker- & {
border-top: none;
}
} }
.datepicker--time-sliders { .datepicker--time-sliders {
@ -94,7 +90,7 @@ $rangeThumbBg: #dedede;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 0 0 10px;
} }
.datepicker--time-current-colon { .datepicker--time-current-colon {
@ -103,17 +99,16 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time-current-hours, .datepicker--time-current-hours,
.datepicker--time-current-minutes, .datepicker--time-current-minutes {
.datepicker--time-current-seconds {
line-height: 1; line-height: 1;
font-size: 14px; font-size: 19px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative; position: relative;
z-index: 1; z-index: 1;
&:after { &:after {
content: ''; content: '';
background: map_get($datepickerBG, hover); background: map_get($bg, hover);
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
position: absolute; position: absolute;
left: -2px; left: -2px;
@ -133,8 +128,8 @@ $rangeThumbBg: #dedede;
.datepicker--time-current-ampm { .datepicker--time-current-ampm {
text-transform: uppercase; text-transform: uppercase;
align-self: flex-start; align-self: flex-end;
color: map_get($datepickerTextColor, navArrows); color: map_get($textColor, navArrows);
margin-left: 6px; margin-left: 6px;
font-size: 11px; font-size: 11px;
margin-bottom: 1px; margin-bottom: 1px;
@ -178,8 +173,8 @@ $rangeThumbBg: #dedede;
outline: none; outline: none;
@include thumbSelector() { @include thumbSelector() {
background: map_get($datepickerBG, selected); background: map_get($bg, selected);
border-color: map_get($datepickerBG, selected); border-color: map_get($bg, selected);
} }
} }
@ -219,7 +214,7 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time-icon { .datepicker--time-icon {
color: map_get($datepickerTextColor, navArrows); color: map_get($textColor, navArrows);
border: 1px solid; border: 1px solid;
border-radius: 50%; border-radius: 50%;
font-size: 16px; font-size: 16px;

2
tests/index.html
View File

@ -23,7 +23,7 @@
<style type="text/css"> <style type="text/css">
/* Remove transitions to test position options*/ /* Remove transitions to test position options*/
.datepicker { .datepicker {
transition-duration: 0s !important; transition: none !important;
} }
</style> </style>
</head> </head>

34
tests/specs/events.js
View File

@ -15,7 +15,6 @@ var assert = chai.assert,
afterEach(function () { afterEach(function () {
if (dp && destroy) { if (dp && destroy) {
dp.destroy(); dp.destroy();
dp = '';
} }
destroy = true; destroy = true;
@ -80,39 +79,6 @@ var assert = chai.assert,
}) })
}); });
describe('onShow', function () {
it('should add callback when datepicker is showing', function () {
var test = '';
dp = $input.datepicker({
onShow: function (dp, completed) {
if (!completed) {
test = dp;
}
}
}).data('datepicker');
dp.show();
expect(test).to.be.equal(dp);
})
});
describe('onHide', function () {
it('should add callback when datepicker is hiding (after transition completed)', function () {
var test = '';
dp = $input.datepicker({
onHide: function (dp, completed) {
if (!completed) {
test = dp;
}
}
}).data('datepicker');
dp.show();
dp.hide();
expect(test).to.be.equal(dp);
});
});
describe('onRenderCell', function () { describe('onRenderCell', function () {
it('should add callback when cell is rendered', function () { it('should add callback when cell is rendered', function () {
dp = $input.datepicker({ dp = $input.datepicker({

52
tests/specs/options.js
View File

@ -189,36 +189,6 @@ describe('Options', function () {
dp.selectDate(date); dp.selectDate(date);
assert.equal(dp.$altField.val(), '17-12-2015'); assert.equal(dp.$altField.val(), '17-12-2015');
});
it('should support 24 hour mode, even if main date format is in 12', function () {
var date = new Date(2015, 11, 17, 22, 47);
dp = $input.datepicker({
timepicker: true,
timeFormat: 'hh:ii aa',
altField: '.alt-field',
altFieldDateFormat: 'dd-mm-yyyy hh:ii'
}).data('datepicker');
dp.selectDate(date);
assert.equal(dp.$altField.val(), '17-12-2015 22:47');
});
it('should support 12 hour mode', function () {
var date = new Date(2015, 11, 17, 22, 47);
dp = $input.datepicker({
timepicker: true,
timeFormat: 'hh:ii',
altField: '.alt-field',
altFieldDateFormat: 'dd-mm-yyyy hh:ii aa'
}).data('datepicker');
dp.selectDate(date);
assert.equal(dp.$altField.val(), '17-12-2015 10:47 pm');
}) })
}); });
@ -246,7 +216,7 @@ describe('Options', function () {
expect(dp.selectedDates).to.have.length(1) expect(dp.selectedDates).to.have.length(1)
}) })
}); })
describe('keyboardNav', function () { describe('keyboardNav', function () {
var year = 2015, var year = 2015,
@ -856,26 +826,6 @@ describe('Options', function () {
}) })
}); });
describe('onlyTimepicker', function () {
it('only timepicker should be visible', function () {
dp = $input.datepicker({
timepicker: true,
onlyTimepicker: true
}).data('datepicker');
var $time = $('.datepicker--time', dp.$datepicker),
$cells = $('.datepicker--cells', dp.$datepicker),
$nav = $('.datepicker--nav-title', dp.$datepicker),
_class = dp.$datepicker.hasClass('-only-timepicker-');
expect($time).to.have.length(1);
expect($cells).to.have.length(0);
expect($nav).to.have.length(0);
expect(_class).to.be.equal(true);
})
});
describe('dateTimeSeparator', function () { describe('dateTimeSeparator', function () {
it('should define separator between date string and time', function () { it('should define separator between date string and time', function () {
var date = new Date(2016,2,9,11,24); var date = new Date(2016,2,9,11,24);

1
tests/specs/static-methods.js
View File

@ -5,6 +5,7 @@ var assert = chai.assert,
describe('Datepicker', function () { describe('Datepicker', function () {
describe('getDaysCount', function () { describe('getDaysCount', function () {
it('should return 31 days in December', function () { it('should return 31 days in December', function () {
console.log(plugin.getDaysCount);
assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31) assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
}); });
it('should return 30 days in September', function () { it('should return 30 days in September', function () {

40
visual-tests.html
View File

@ -3,9 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Air datepicker visual tests</title> <title>Air datepicker visual tests</title>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/datepicker.js"></script> <script type="text/javascript" src="dist/js/datepicker.js"></script>
<script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
<link rel="stylesheet" href="dist/css/datepicker.css"/> <link rel="stylesheet" href="dist/css/datepicker.css"/>
<link rel="stylesheet" href="docs/css/style.css"/> <link rel="stylesheet" href="docs/css/style.css"/>
<script type="text/javascript"> <script type="text/javascript">
@ -32,7 +31,7 @@
<div class="row"> <div class="row">
<div class="vt-tile"> <div class="vt-tile">
<h2>Default</h2> <h2>Default</h2>
<div class="datepicker-here" data-language="en"></div> <div class="datepicker-here"></div>
</div> </div>
</div> </div>
</article> </article>
@ -42,11 +41,11 @@
<div class="row"> <div class="row">
<div class="vt-tile"> <div class="vt-tile">
<h2>{range: true}</h2> <h2>{range: true}</h2>
<div class="datepicker-here" data-language="en" data-range="true"></div> <div class="datepicker-here" data-range="true"></div>
</div> </div>
<div class="vt-tile"> <div class="vt-tile">
<h2>{range: true, onSelect: ...}</h2> <h2>{range: true, onSelect: ...}</h2>
<div class="datepicker-here" data-language="en" id="dp-3" data-range="true"></div> <div class="datepicker-here" id="dp-3" data-range="true"></div>
<script type="text/javascript"> <script type="text/javascript">
$('#dp-3').datepicker({ $('#dp-3').datepicker({
onSelect: function (fd) { onSelect: function (fd) {
@ -57,7 +56,7 @@
</div> </div>
<div class="vt-tile"> <div class="vt-tile">
<h2>{range: true, onSelect: ...}</h2> <h2>{range: true, onSelect: ...}</h2>
<input class="datepicker-here" data-language="en" id="dp-4" data-range="true"/> <input class="datepicker-here" id="dp-4" data-range="true"/>
<script type="text/javascript"> <script type="text/javascript">
$('#dp-4').datepicker({ $('#dp-4').datepicker({
onSelect: function (fd) { onSelect: function (fd) {
@ -74,29 +73,17 @@
<div class="row"> <div class="row">
<div class="vt-tile"> <div class="vt-tile">
<h2>{timepicker: true}</h2> <h2>{timepicker: true}</h2>
<div id="test" class="datepicker-here" data-language="en" data-timepicker="true"></div> <div class="datepicker-here" data-timepicker="true"></div>
<script type="text/javascript">
$('#test').datepicker({
toggleSelected: false,
inline: true,
timeFormat: 'hh:ii:ss',
onSelect: function (fd) {
console.log(arguments)
log(fd)
}
})
</script>
</div> </div>
<div class="vt-tile"> <div class="vt-tile">
<h2>{onChange: ..., toggleSelected: false, range: true}</h2> <h2>{onChange: ..., toggleSelected: false, range: true}</h2>
<input id="dp-5" class="datepicker-here" data-language="en" data-timepicker="true" /> <input id="dp-5" class="datepicker-here" data-timepicker="true" />
<script type="text/javascript"> <script type="text/javascript">
$('#dp-5').datepicker({ $('#dp-5').datepicker({
toggleSelected: false, toggleSelected: false,
inline: true, inline: true,
range: true, range: true,
onSelect: function (fd) { onSelect: function (fd) {
console.log(arguments)
log(fd) log(fd)
} }
}) })
@ -104,18 +91,7 @@
</div> </div>
<div class="vt-tile"> <div class="vt-tile">
<h2>{timepicker: true}</h2> <h2>{timepicker: true}</h2>
<input class="datepicker-here" data-language="en" data-timepicker="true" /> <input class="datepicker-here" data-timepicker="true" />
</div>
<div class="vt-tile">
<h2>{timepicker: true, minDate: new Date()}</h2>
<input class="datepicker-here" data-language="en" id="dp-6"/>
<script type="text/javascript">
$('#dp-6').datepicker({
minDate: new Date(),
inline: true,
timepicker: true
})
</script>
</div> </div>
</div> </div>
</article> </article>