mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
Compare commits
No commits in common. "master" and "v2.0.1" have entirely different histories.
21
LICENSE.md
21
LICENSE.md
@ -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.
|
||||
40
README.md
40
README.md
@ -1,6 +1,6 @@
|
||||
# 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+).
|
||||
|
||||
|
||||
|
||||
@ -26,44 +26,6 @@ $('.my-datepicker').datepicker([options])
|
||||
|
||||
## 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
|
||||
* fixed dates array in `onSelect` callback
|
||||
|
||||
### v2.0.1
|
||||
* fixed version for npm
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "air-datepicker",
|
||||
"version": "2.2.3",
|
||||
"version": "2.0.1",
|
||||
"authors": [
|
||||
"t1m0n <t1m0n.tr@gmail.com>"
|
||||
],
|
||||
"description": "A lightweight, customizable, powerful jQuery datepicker",
|
||||
"main": [
|
||||
"dist/js/datepicker.js",
|
||||
"dist/css/datepicker.css"
|
||||
"dist/js/datepicker.min.js",
|
||||
"dist/css/datepicker.min.css"
|
||||
],
|
||||
"keywords": [
|
||||
"datepicker",
|
||||
@ -30,6 +30,6 @@
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=2.0.0 <4.0.0"
|
||||
"jquery": "^2.2.3"
|
||||
}
|
||||
}
|
||||
214
dist/css/datepicker.css
vendored
214
dist/css/datepicker.css
vendored
@ -18,46 +18,31 @@
|
||||
background: 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 {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; }
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.datepicker--cell {
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
z-index: 1; }
|
||||
.datepicker--cell.-focus- {
|
||||
@ -106,22 +91,28 @@
|
||||
cursor: default; }
|
||||
|
||||
.datepicker--days-names {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 8px 0 3px; }
|
||||
|
||||
.datepicker--day-name {
|
||||
color: #FF9A19;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: .8em; }
|
||||
@ -190,20 +181,29 @@
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
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, -webkit-transform 0.3s ease;
|
||||
z-index: 100; }
|
||||
.datepicker.-from-top- {
|
||||
transform: translateY(-8px); }
|
||||
-webkit-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
.datepicker.-from-right- {
|
||||
transform: translateX(8px); }
|
||||
-webkit-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
.datepicker.-from-bottom- {
|
||||
transform: translateY(8px); }
|
||||
-webkit-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
.datepicker.-from-left- {
|
||||
transform: translateX(-8px); }
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
.datepicker.active {
|
||||
opacity: 1;
|
||||
transform: translate(0);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
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 {
|
||||
border-color: #d7d7d7;
|
||||
@ -212,7 +212,8 @@
|
||||
left: auto;
|
||||
right: auto;
|
||||
opacity: 1;
|
||||
transform: none; }
|
||||
-webkit-transform: none;
|
||||
transform: none; }
|
||||
|
||||
.datepicker-inline .datepicker--pointer {
|
||||
display: none; }
|
||||
@ -220,8 +221,6 @@
|
||||
.datepicker--content {
|
||||
box-sizing: content-box;
|
||||
padding: 4px; }
|
||||
.-only-timepicker- .datepicker--content {
|
||||
display: none; }
|
||||
|
||||
.datepicker--pointer {
|
||||
position: absolute;
|
||||
@ -233,16 +232,20 @@
|
||||
z-index: -1; }
|
||||
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
|
||||
top: calc(100% - 4px);
|
||||
transform: rotate(135deg); }
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg); }
|
||||
.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
|
||||
right: calc(100% - 4px);
|
||||
transform: rotate(225deg); }
|
||||
-webkit-transform: rotate(225deg);
|
||||
transform: rotate(225deg); }
|
||||
.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
|
||||
bottom: calc(100% - 4px);
|
||||
transform: rotate(315deg); }
|
||||
-webkit-transform: rotate(315deg);
|
||||
transform: rotate(315deg); }
|
||||
.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
|
||||
left: calc(100% - 4px);
|
||||
transform: rotate(45deg); }
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
|
||||
left: 10px; }
|
||||
.-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
|
||||
@ -285,25 +288,28 @@
|
||||
Navigation
|
||||
------------------------------------------------- */
|
||||
.datepicker--nav {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #efefef;
|
||||
min-height: 32px;
|
||||
padding: 4px; }
|
||||
.-only-timepicker- .datepicker--nav {
|
||||
display: none; }
|
||||
|
||||
.datepicker--nav-title,
|
||||
.datepicker--nav-action {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
|
||||
.datepicker--nav-action {
|
||||
width: 32px;
|
||||
@ -338,6 +344,7 @@
|
||||
background: none; }
|
||||
|
||||
.datepicker--buttons {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
@ -347,14 +354,18 @@
|
||||
color: #4EB5E6;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 32px; }
|
||||
.datepicker--button:hover {
|
||||
color: #4a4a4a;
|
||||
@ -385,22 +396,24 @@
|
||||
------------------------------------------------- */
|
||||
.datepicker--time {
|
||||
border-top: 1px solid #efefef;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
position: relative; }
|
||||
.datepicker--time.-am-pm- .datepicker--time-sliders {
|
||||
-ms-flex: 0 1 138px;
|
||||
flex: 0 1 138px;
|
||||
-webkit-flex: 0 1 138px;
|
||||
-ms-flex: 0 1 138px;
|
||||
flex: 0 1 138px;
|
||||
max-width: 138px; }
|
||||
.-only-timepicker- .datepicker--time {
|
||||
border-top: none; }
|
||||
|
||||
.datepicker--time-sliders {
|
||||
-ms-flex: 0 1 153px;
|
||||
flex: 0 1 153px;
|
||||
-webkit-flex: 0 1 153px;
|
||||
-ms-flex: 0 1 153px;
|
||||
flex: 0 1 153px;
|
||||
margin-right: 10px;
|
||||
max-width: 153px; }
|
||||
|
||||
@ -409,31 +422,32 @@
|
||||
font-size: 12px; }
|
||||
|
||||
.datepicker--time-current {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 0 10px; }
|
||||
margin: 0 0 0 10px; }
|
||||
|
||||
.datepicker--time-current-colon {
|
||||
margin: 0 2px 3px;
|
||||
line-height: 1; }
|
||||
|
||||
.datepicker--time-current-hours,
|
||||
.datepicker--time-current-minutes,
|
||||
.datepicker--time-current-seconds {
|
||||
.datepicker--time-current-minutes {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
font-size: 19px;
|
||||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.datepicker--time-current-hours:after,
|
||||
.datepicker--time-current-minutes:after,
|
||||
.datepicker--time-current-seconds:after {
|
||||
.datepicker--time-current-minutes:after {
|
||||
content: '';
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
@ -445,24 +459,26 @@
|
||||
z-index: -1;
|
||||
opacity: 0; }
|
||||
.datepicker--time-current-hours.-focus-:after,
|
||||
.datepicker--time-current-minutes.-focus-:after,
|
||||
.datepicker--time-current-seconds.-focus-:after {
|
||||
.datepicker--time-current-minutes.-focus-:after {
|
||||
opacity: 1; }
|
||||
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
color: #9c9c9c;
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 1px; }
|
||||
|
||||
.datepicker--time-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
height: 17px;
|
||||
background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
|
||||
@ -471,8 +487,9 @@
|
||||
.datepicker--time-row input[type='range'] {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -570,9 +587,30 @@
|
||||
width: 1px;
|
||||
left: calc(50% - 1px);
|
||||
top: calc(50% + 1px);
|
||||
transform: translateY(-100%); }
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%); }
|
||||
.datepicker--time-icon:before {
|
||||
width: .4em;
|
||||
height: 1px;
|
||||
top: 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
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
311
dist/js/datepicker.js
vendored
311
dist/js/datepicker.js
vendored
@ -1,6 +1,5 @@
|
||||
;(function (window, $, undefined) { ;(function () {
|
||||
var VERSION = '2.2.3',
|
||||
pluginName = 'datepicker',
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
containerBuilt = false,
|
||||
@ -63,23 +62,17 @@
|
||||
|
||||
// timepicker
|
||||
timepicker: false,
|
||||
onlyTimepicker: false,
|
||||
dateTimeSeparator: ' ',
|
||||
timeFormat: '',
|
||||
minHours: 0,
|
||||
maxHours: 24,
|
||||
minMinutes: 0,
|
||||
maxMinutes: 59,
|
||||
minSeconds: 0,
|
||||
maxSeconds: 59,
|
||||
hoursStep: 1,
|
||||
minutesStep: 1,
|
||||
secondsStep: 1,
|
||||
|
||||
// events
|
||||
onSelect: '',
|
||||
onShow: '',
|
||||
onHide: '',
|
||||
onChangeMonth: '',
|
||||
onChangeYear: '',
|
||||
onChangeDecade: '',
|
||||
@ -145,7 +138,6 @@
|
||||
datepicker = Datepicker;
|
||||
|
||||
datepicker.prototype = {
|
||||
VERSION: VERSION,
|
||||
viewIndexes: ['days', 'months', 'years'],
|
||||
|
||||
init: function () {
|
||||
@ -162,7 +154,7 @@
|
||||
this._setPositionClasses(this.opts.position);
|
||||
this._bindEvents()
|
||||
}
|
||||
if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
|
||||
if (this.opts.keyboardNav) {
|
||||
this._bindKeyboardEvents();
|
||||
}
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
@ -178,10 +170,6 @@
|
||||
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].show();
|
||||
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);
|
||||
}
|
||||
|
||||
if (this.opts.onlyTimepicker) {
|
||||
this.loc.dateFormat = this.loc.timeFormat;
|
||||
}
|
||||
|
||||
var boundary = this._getWordBoundaryRegExp;
|
||||
if (this.loc.timeFormat.match(boundary('aa')) ||
|
||||
this.loc.timeFormat.match(boundary('AA'))
|
||||
@ -305,8 +289,7 @@
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes,
|
||||
parsedSelected.seconds
|
||||
parsedSelected.minutes
|
||||
);
|
||||
|
||||
formattedDates = selectedDates.map(function (date) {
|
||||
@ -318,15 +301,15 @@
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(
|
||||
parsedDate.year,
|
||||
parsedDate.month,
|
||||
parsedDate.date,
|
||||
parsedDate.hours,
|
||||
parsedDate.minutes,
|
||||
parsedDate.seconds
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
this._prevOnSelectValue = formattedDates;
|
||||
this.opts.onSelect(formattedDates, dates, this);
|
||||
},
|
||||
@ -379,13 +362,11 @@
|
||||
d = datepicker.getParsedDate(date),
|
||||
fullHours = d.fullHours,
|
||||
hours = d.hours,
|
||||
ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
|
||||
dayPeriod = 'am',
|
||||
replacer = this._replacer,
|
||||
validHours;
|
||||
|
||||
if (this.opts.timepicker && this.timepicker && ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date, ampm);
|
||||
if (this.opts.timepicker && this.timepicker && this.ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date);
|
||||
fullHours = leadingZero(validHours.hours);
|
||||
hours = validHours.hours;
|
||||
dayPeriod = validHours.dayPeriod;
|
||||
@ -395,63 +376,50 @@
|
||||
case /@/.test(result):
|
||||
result = result.replace(/@/, date.getTime());
|
||||
case /aa/.test(result):
|
||||
result = replacer(result, boundary('aa'), dayPeriod);
|
||||
result = result.replace(boundary('aa'), dayPeriod);
|
||||
case /AA/.test(result):
|
||||
result = replacer(result, boundary('AA'), dayPeriod.toUpperCase());
|
||||
result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
|
||||
case /dd/.test(result):
|
||||
result = replacer(result, boundary('dd'), d.fullDate);
|
||||
result = result.replace(boundary('dd'), d.fullDate);
|
||||
case /d/.test(result):
|
||||
result = replacer(result, boundary('d'), d.date);
|
||||
result = result.replace(boundary('d'), d.date);
|
||||
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):
|
||||
result = replacer(result, boundary('D'), locale.daysShort[d.day]);
|
||||
result = result.replace(boundary('D'), locale.daysShort[d.day]);
|
||||
case /mm/.test(result):
|
||||
result = replacer(result, boundary('mm'), d.fullMonth);
|
||||
result = result.replace(boundary('mm'), d.fullMonth);
|
||||
case /m/.test(result):
|
||||
result = replacer(result, boundary('m'), d.month + 1);
|
||||
result = result.replace(boundary('m'), d.month + 1);
|
||||
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):
|
||||
result = replacer(result, 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);
|
||||
result = result.replace(boundary('M'), locale.monthsShort[d.month]);
|
||||
case /ii/.test(result):
|
||||
result = replacer(result, boundary('ii'), d.fullMinutes);
|
||||
result = result.replace(boundary('ii'), d.fullMinutes);
|
||||
case /i/.test(result):
|
||||
result = replacer(result, boundary('i'), d.minutes);
|
||||
result = result.replace(boundary('i'), d.minutes);
|
||||
case /hh/.test(result):
|
||||
result = replacer(result, boundary('hh'), fullHours);
|
||||
result = result.replace(boundary('hh'), fullHours);
|
||||
case /h/.test(result):
|
||||
result = replacer(result, boundary('h'), hours);
|
||||
result = result.replace(boundary('h'), hours);
|
||||
case /yyyy/.test(result):
|
||||
result = replacer(result, boundary('yyyy'), d.year);
|
||||
result = result.replace(boundary('yyyy'), d.year);
|
||||
case /yyyy1/.test(result):
|
||||
result = replacer(result, boundary('yyyy1'), decade[0]);
|
||||
result = result.replace(boundary('yyyy1'), decade[0]);
|
||||
case /yyyy2/.test(result):
|
||||
result = replacer(result, boundary('yyyy2'), decade[1]);
|
||||
result = result.replace(boundary('yyyy2'), decade[1]);
|
||||
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;
|
||||
},
|
||||
|
||||
_replacer: function (str, reg, data) {
|
||||
return str.replace(reg, function (match, p1,p2,p3) {
|
||||
return p1 + data + p3;
|
||||
})
|
||||
},
|
||||
|
||||
_getWordBoundaryRegExp: function (sign) {
|
||||
var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;';
|
||||
|
||||
return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
|
||||
return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
|
||||
},
|
||||
|
||||
|
||||
selectDate: function (date) {
|
||||
var _this = this,
|
||||
opts = _this.opts,
|
||||
@ -485,7 +453,6 @@
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes)
|
||||
date.setSeconds(this.timepicker.seconds)
|
||||
}
|
||||
|
||||
if (_this.view == 'days') {
|
||||
@ -614,8 +581,7 @@
|
||||
* @param {String|Number|Object} [value] - new param value
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length,
|
||||
lastSelectedDate = this.lastSelectedDate;
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
@ -627,7 +593,7 @@
|
||||
this._syncWithMinMaxDates();
|
||||
this._defineLocale(this.opts.language);
|
||||
this.nav._addButtonsIfNeed();
|
||||
if (!this.opts.onlyTimepicker) this.nav._render();
|
||||
this.nav._render();
|
||||
this.views[this.currentView]._render();
|
||||
|
||||
if (this.elIsInput && !this.opts.inline) {
|
||||
@ -641,19 +607,14 @@
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.onlyTimepicker) {
|
||||
this.$datepicker.addClass('-only-timepicker-');
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
if (lastSelectedDate) this.timepicker._handleDate(lastSelectedDate);
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (lastSelectedDate) {
|
||||
lastSelectedDate.setHours(this.timepicker.hours);
|
||||
lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
lastSelectedDate.setSeconds(this.timepicker.seconds);
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
@ -819,20 +780,12 @@
|
||||
},
|
||||
|
||||
show: function () {
|
||||
var onShow = this.opts.onShow;
|
||||
|
||||
this.setPosition(this.opts.position);
|
||||
this.$datepicker.addClass('active');
|
||||
this.visible = true;
|
||||
|
||||
if (onShow) {
|
||||
this._bindVisionEvents(onShow)
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
var onHide = this.opts.onHide;
|
||||
|
||||
this.$datepicker
|
||||
.removeClass('active')
|
||||
.css({
|
||||
@ -845,10 +798,6 @@
|
||||
this.inFocus = false;
|
||||
this.visible = false;
|
||||
this.$el.blur();
|
||||
|
||||
if (onHide) {
|
||||
this._bindVisionEvents(onHide)
|
||||
}
|
||||
},
|
||||
|
||||
down: function (date) {
|
||||
@ -859,12 +808,6 @@
|
||||
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) {
|
||||
date = date || this.focused || this.date;
|
||||
|
||||
@ -1078,7 +1021,7 @@
|
||||
}
|
||||
$cell = this.views[this.currentView].$el.find(selector);
|
||||
|
||||
return $cell.length ? $cell : $('');
|
||||
return $cell.length ? $cell : '';
|
||||
},
|
||||
|
||||
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) {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
@ -1197,12 +1116,11 @@
|
||||
if (this.timepicker) {
|
||||
this.focused.setHours(this.timepicker.hours);
|
||||
this.focused.setMinutes(this.timepicker.minutes);
|
||||
this.focused.setSeconds(this.timepicker.seconds);
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
_onTimeChange: function (e, h, m, s) {
|
||||
_onTimeChange: function (e, h, m) {
|
||||
var date = new Date(),
|
||||
selectedDates = this.selectedDates,
|
||||
selected = false;
|
||||
@ -1271,7 +1189,6 @@
|
||||
|
||||
date.setHours(h);
|
||||
date.setMinutes(m);
|
||||
date.setSeconds(s);
|
||||
|
||||
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
|
||||
this.selectDate(date);
|
||||
@ -1287,7 +1204,6 @@
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes);
|
||||
date.setSeconds(this.timepicker.seconds)
|
||||
}
|
||||
this.selectDate(date);
|
||||
},
|
||||
@ -1411,9 +1327,7 @@
|
||||
hours: date.getHours(),
|
||||
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
|
||||
minutes: date.getMinutes(),
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
|
||||
seconds: date.getSeconds(),
|
||||
fullSeconds: date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
}
|
||||
};
|
||||
|
||||
@ -1460,16 +1374,6 @@
|
||||
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 ) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
@ -1530,9 +1434,7 @@
|
||||
this.d = d;
|
||||
this.type = type;
|
||||
this.opts = opts;
|
||||
this.$el = $('');
|
||||
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this.init();
|
||||
};
|
||||
|
||||
@ -1571,13 +1473,17 @@
|
||||
var classes = "datepicker--cell datepicker--cell-" + type,
|
||||
currentDate = new Date(),
|
||||
parent = this.d,
|
||||
minRange = dp.resetTime(parent.minRange),
|
||||
maxRange = dp.resetTime(parent.maxRange),
|
||||
opts = parent.opts,
|
||||
d = dp.getParsedDate(date),
|
||||
render = {},
|
||||
html = d.date;
|
||||
|
||||
if (opts.onRenderCell) {
|
||||
render = opts.onRenderCell(date, type) || {};
|
||||
html = render.html ? render.html : html;
|
||||
classes += render.classes ? ' ' + render.classes : '';
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'day':
|
||||
if (parent.isWeekend(d.day)) classes += " -weekend-";
|
||||
@ -1612,26 +1518,26 @@
|
||||
}
|
||||
|
||||
if (opts.range) {
|
||||
if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
|
||||
if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
|
||||
if (parent.selectedDates.length == 1 && parent.focused) {
|
||||
if (
|
||||
(dp.bigger(minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
(dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
{
|
||||
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-'
|
||||
}
|
||||
if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-to-'
|
||||
}
|
||||
|
||||
} 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-'
|
||||
}
|
||||
}
|
||||
@ -1754,7 +1660,6 @@
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this._renderTypes[this.type].bind(this)();
|
||||
},
|
||||
|
||||
@ -1773,7 +1678,6 @@
|
||||
},
|
||||
|
||||
show: function () {
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
},
|
||||
@ -1789,11 +1693,10 @@
|
||||
_handleClick: function (el) {
|
||||
var date = el.data('date') || 1,
|
||||
month = el.data('month') || 0,
|
||||
year = el.data('year') || this.d.parsedDate.year,
|
||||
dp = this.d;
|
||||
year = el.data('year') || this.d.parsedDate.year;
|
||||
// Change view if min view does not reach yet
|
||||
if (dp.view != this.opts.minView) {
|
||||
dp.down(new Date(year, month, date));
|
||||
if (this.d.view != this.opts.minView) {
|
||||
this.d.down(new Date(year, month, date));
|
||||
return;
|
||||
}
|
||||
// Select date if min view is reached
|
||||
@ -1801,12 +1704,17 @@
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
dp._trigger('clickCell', selectedDate);
|
||||
return;
|
||||
this.d._trigger('clickCell', selectedDate);
|
||||
} 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)();
|
||||
|
||||
},
|
||||
|
||||
_onClickCell: function (e) {
|
||||
@ -1851,9 +1759,7 @@
|
||||
},
|
||||
|
||||
_buildBaseHtml: function () {
|
||||
if (!this.opts.onlyTimepicker) {
|
||||
this._render();
|
||||
}
|
||||
this._render();
|
||||
this._addButtonsIfNeed();
|
||||
},
|
||||
|
||||
@ -1910,10 +1816,10 @@
|
||||
|
||||
switch (this.d.view) {
|
||||
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')
|
||||
}
|
||||
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')
|
||||
}
|
||||
break;
|
||||
@ -1926,11 +1832,10 @@
|
||||
}
|
||||
break;
|
||||
case 'years':
|
||||
var decade = dp.getDecade(this.d.date);
|
||||
if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
|
||||
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
|
||||
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')
|
||||
}
|
||||
break;
|
||||
@ -1968,11 +1873,9 @@
|
||||
;(function () {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<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-minutes">#{minValue}</span>' +
|
||||
' <span class="datepicker--time-current-colon">:</span>' +
|
||||
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
@ -1981,9 +1884,6 @@
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
datepicker = $.fn.datepicker,
|
||||
@ -2019,53 +1919,27 @@
|
||||
this._handleDate(date);
|
||||
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
|
||||
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) {
|
||||
this.minHours = date.getHours();
|
||||
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) {
|
||||
this.maxHours = date.getHours();
|
||||
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 () {
|
||||
var maxHours = 23,
|
||||
maxMinutes = 59,
|
||||
maxSeconds = 59,
|
||||
opts = this.opts;
|
||||
|
||||
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
|
||||
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
|
||||
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
|
||||
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) {
|
||||
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 () {
|
||||
@ -2099,16 +1967,11 @@
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: this.hours,
|
||||
hourVisible: lz(this.displayHours),
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
minValue: lz(this.minutes),
|
||||
secMin: this.minSeconds,
|
||||
secMax: lz(this.maxSeconds),
|
||||
secStep: this.opts.secondsStep,
|
||||
secValue: lz(this.seconds)
|
||||
minValue: lz(this.minutes)
|
||||
},
|
||||
_template = dp.template(template, data);
|
||||
|
||||
@ -2116,10 +1979,8 @@
|
||||
this.$ranges = $('[type="range"]', this.$timepicker);
|
||||
this.$hours = $('[name="hours"]', this.$timepicker);
|
||||
this.$minutes = $('[name="minutes"]', this.$timepicker);
|
||||
this.$seconds = $('[name="seconds"]', this.$timepicker);
|
||||
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
|
||||
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
|
||||
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
@ -2132,12 +1993,10 @@
|
||||
|
||||
_updateCurrentTime: function () {
|
||||
var h = dp.getLeadingZeroNum(this.displayHours),
|
||||
m = dp.getLeadingZeroNum(this.minutes),
|
||||
s = dp.getLeadingZeroNum(this.seconds);
|
||||
m = dp.getLeadingZeroNum(this.minutes);
|
||||
|
||||
this.$hoursText.html(h);
|
||||
this.$minutesText.html(m);
|
||||
this.$secondsText.html(s);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm.html(this.dayPeriod);
|
||||
@ -2153,12 +2012,7 @@
|
||||
this.$minutes.attr({
|
||||
min: this.minMinutes,
|
||||
max: this.maxMinutes
|
||||
}).val(this.minutes);
|
||||
|
||||
this.$seconds.attr({
|
||||
min: this.minSeconds,
|
||||
max: this.maxSeconds
|
||||
}).val(this.seconds);
|
||||
}).val(this.minutes)
|
||||
},
|
||||
|
||||
/**
|
||||
@ -2169,6 +2023,7 @@
|
||||
*/
|
||||
_handleDate: function (date) {
|
||||
this._setDefaultMinMaxTime();
|
||||
|
||||
if (date) {
|
||||
if (dp.isSame(date, 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.
|
||||
* @param date {Date|Number} - date or hours
|
||||
* @param [ampm] {Boolean} - 12 hours mode
|
||||
* @returns {{hours: *, dayPeriod: string}}
|
||||
* @private
|
||||
*/
|
||||
_getValidHoursFromDate: function (date, ampm) {
|
||||
_getValidHoursFromDate: function (date) {
|
||||
var d = date,
|
||||
hours = date;
|
||||
|
||||
@ -2201,10 +2055,10 @@
|
||||
hours = d.hours;
|
||||
}
|
||||
|
||||
var _ampm = ampm || this.d.ampm,
|
||||
var ampm = this.d.ampm,
|
||||
dayPeriod = 'am';
|
||||
|
||||
if (_ampm) {
|
||||
if (ampm) {
|
||||
switch(true) {
|
||||
case hours == 0:
|
||||
hours = 12;
|
||||
@ -2251,10 +2105,7 @@
|
||||
|
||||
this[name] = $target.val();
|
||||
this._updateCurrentTime();
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
|
||||
|
||||
this._handleDate(this.d.lastSelectedDate);
|
||||
this.update()
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes])
|
||||
},
|
||||
|
||||
_onSelectDate: function (e, data) {
|
||||
|
||||
4
dist/js/datepicker.min.js
vendored
4
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
12
dist/js/i18n/datepicker.cs.js
vendored
12
dist/js/i18n/datepicker.cs.js
vendored
@ -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);
|
||||
6
dist/js/i18n/datepicker.en.js
vendored
6
dist/js/i18n/datepicker.en.js
vendored
@ -1,4 +1,5 @@
|
||||
;(function ($) { $.fn.datepicker.language['en'] = {
|
||||
;(function ($) {
|
||||
$.fn.datepicker.language['en'] = {
|
||||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
@ -9,4 +10,5 @@
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
};
|
||||
})(jQuery);
|
||||
12
dist/js/i18n/datepicker.es.js
vendored
12
dist/js/i18n/datepicker.es.js
vendored
@ -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
13
dist/js/i18n/datepicker.fi.js
vendored
@ -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
12
dist/js/i18n/datepicker.fr.js
vendored
@ -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
12
dist/js/i18n/datepicker.hu.js
vendored
@ -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
13
dist/js/i18n/datepicker.pl.js
vendored
@ -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
12
dist/js/i18n/datepicker.sk.js
vendored
@ -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);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
457
docs/index.html
457
docs/index.html
File diff suppressed because one or more lines are too long
@ -20,7 +20,6 @@ html
|
||||
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/i18n/datepicker.en.js')
|
||||
script(src='js/logger.js')
|
||||
body
|
||||
div.wrapper
|
||||
main.main(role='main')
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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);
|
||||
@ -42,13 +42,6 @@ h4 {
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
h2, h3 {
|
||||
position: relative;
|
||||
@ -513,57 +506,4 @@ a {
|
||||
span {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -31,7 +31,7 @@ gulp.task('watch', function () {
|
||||
});
|
||||
|
||||
gulp.task('dev', ['css','js','i18n', 'cssPage', 'jade-ru', 'jade-en', 'watch']);
|
||||
gulp.task('build', ['css','js','i18n', 'jade-ru', 'jade-en']);
|
||||
gulp.task('build', ['css','js','i18n', 'jade-ru',' jade-en']);
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "air-datepicker",
|
||||
"version": "2.2.3",
|
||||
"version": "2.0.1",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.1.0",
|
||||
"browserify": "^13.0.0",
|
||||
@ -25,7 +25,7 @@
|
||||
"vinyl-source-stream": "^1.1.0"
|
||||
},
|
||||
"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 ",
|
||||
"main": "src/js/air-datepicker.js",
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
this.d = d;
|
||||
this.type = type;
|
||||
this.opts = opts;
|
||||
this.$el = $('');
|
||||
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this.init();
|
||||
};
|
||||
|
||||
@ -62,13 +60,17 @@
|
||||
var classes = "datepicker--cell datepicker--cell-" + type,
|
||||
currentDate = new Date(),
|
||||
parent = this.d,
|
||||
minRange = dp.resetTime(parent.minRange),
|
||||
maxRange = dp.resetTime(parent.maxRange),
|
||||
opts = parent.opts,
|
||||
d = dp.getParsedDate(date),
|
||||
render = {},
|
||||
html = d.date;
|
||||
|
||||
if (opts.onRenderCell) {
|
||||
render = opts.onRenderCell(date, type) || {};
|
||||
html = render.html ? render.html : html;
|
||||
classes += render.classes ? ' ' + render.classes : '';
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'day':
|
||||
if (parent.isWeekend(d.day)) classes += " -weekend-";
|
||||
@ -103,26 +105,26 @@
|
||||
}
|
||||
|
||||
if (opts.range) {
|
||||
if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
|
||||
if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
|
||||
if (parent.selectedDates.length == 1 && parent.focused) {
|
||||
if (
|
||||
(dp.bigger(minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
(dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
{
|
||||
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-'
|
||||
}
|
||||
if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-to-'
|
||||
}
|
||||
|
||||
} 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-'
|
||||
}
|
||||
}
|
||||
@ -245,7 +247,6 @@
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this._renderTypes[this.type].bind(this)();
|
||||
},
|
||||
|
||||
@ -264,7 +265,6 @@
|
||||
},
|
||||
|
||||
show: function () {
|
||||
if (this.opts.onlyTimepicker) return;
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
},
|
||||
@ -280,11 +280,10 @@
|
||||
_handleClick: function (el) {
|
||||
var date = el.data('date') || 1,
|
||||
month = el.data('month') || 0,
|
||||
year = el.data('year') || this.d.parsedDate.year,
|
||||
dp = this.d;
|
||||
year = el.data('year') || this.d.parsedDate.year;
|
||||
// Change view if min view does not reach yet
|
||||
if (dp.view != this.opts.minView) {
|
||||
dp.down(new Date(year, month, date));
|
||||
if (this.d.view != this.opts.minView) {
|
||||
this.d.down(new Date(year, month, date));
|
||||
return;
|
||||
}
|
||||
// Select date if min view is reached
|
||||
@ -292,12 +291,17 @@
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
dp._trigger('clickCell', selectedDate);
|
||||
return;
|
||||
this.d._trigger('clickCell', selectedDate);
|
||||
} 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)();
|
||||
|
||||
},
|
||||
|
||||
_onClickCell: function (e) {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
;(function () {
|
||||
var VERSION = '2.2.3',
|
||||
pluginName = 'datepicker',
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
containerBuilt = false,
|
||||
@ -63,23 +62,17 @@
|
||||
|
||||
// timepicker
|
||||
timepicker: false,
|
||||
onlyTimepicker: false,
|
||||
dateTimeSeparator: ' ',
|
||||
timeFormat: '',
|
||||
minHours: 0,
|
||||
maxHours: 24,
|
||||
minMinutes: 0,
|
||||
maxMinutes: 59,
|
||||
minSeconds: 0,
|
||||
maxSeconds: 59,
|
||||
hoursStep: 1,
|
||||
minutesStep: 1,
|
||||
secondsStep: 1,
|
||||
|
||||
// events
|
||||
onSelect: '',
|
||||
onShow: '',
|
||||
onHide: '',
|
||||
onChangeMonth: '',
|
||||
onChangeYear: '',
|
||||
onChangeDecade: '',
|
||||
@ -145,7 +138,6 @@
|
||||
datepicker = Datepicker;
|
||||
|
||||
datepicker.prototype = {
|
||||
VERSION: VERSION,
|
||||
viewIndexes: ['days', 'months', 'years'],
|
||||
|
||||
init: function () {
|
||||
@ -162,7 +154,7 @@
|
||||
this._setPositionClasses(this.opts.position);
|
||||
this._bindEvents()
|
||||
}
|
||||
if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
|
||||
if (this.opts.keyboardNav) {
|
||||
this._bindKeyboardEvents();
|
||||
}
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
@ -178,10 +170,6 @@
|
||||
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].show();
|
||||
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);
|
||||
}
|
||||
|
||||
if (this.opts.onlyTimepicker) {
|
||||
this.loc.dateFormat = this.loc.timeFormat;
|
||||
}
|
||||
|
||||
var boundary = this._getWordBoundaryRegExp;
|
||||
if (this.loc.timeFormat.match(boundary('aa')) ||
|
||||
this.loc.timeFormat.match(boundary('AA'))
|
||||
@ -305,8 +289,7 @@
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes,
|
||||
parsedSelected.seconds
|
||||
parsedSelected.minutes
|
||||
);
|
||||
|
||||
formattedDates = selectedDates.map(function (date) {
|
||||
@ -318,15 +301,15 @@
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(
|
||||
parsedDate.year,
|
||||
parsedDate.month,
|
||||
parsedDate.date,
|
||||
parsedDate.hours,
|
||||
parsedDate.minutes,
|
||||
parsedDate.seconds
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
this._prevOnSelectValue = formattedDates;
|
||||
this.opts.onSelect(formattedDates, dates, this);
|
||||
},
|
||||
@ -379,13 +362,11 @@
|
||||
d = datepicker.getParsedDate(date),
|
||||
fullHours = d.fullHours,
|
||||
hours = d.hours,
|
||||
ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
|
||||
dayPeriod = 'am',
|
||||
replacer = this._replacer,
|
||||
validHours;
|
||||
|
||||
if (this.opts.timepicker && this.timepicker && ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date, ampm);
|
||||
if (this.opts.timepicker && this.timepicker && this.ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date);
|
||||
fullHours = leadingZero(validHours.hours);
|
||||
hours = validHours.hours;
|
||||
dayPeriod = validHours.dayPeriod;
|
||||
@ -395,63 +376,50 @@
|
||||
case /@/.test(result):
|
||||
result = result.replace(/@/, date.getTime());
|
||||
case /aa/.test(result):
|
||||
result = replacer(result, boundary('aa'), dayPeriod);
|
||||
result = result.replace(boundary('aa'), dayPeriod);
|
||||
case /AA/.test(result):
|
||||
result = replacer(result, boundary('AA'), dayPeriod.toUpperCase());
|
||||
result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
|
||||
case /dd/.test(result):
|
||||
result = replacer(result, boundary('dd'), d.fullDate);
|
||||
result = result.replace(boundary('dd'), d.fullDate);
|
||||
case /d/.test(result):
|
||||
result = replacer(result, boundary('d'), d.date);
|
||||
result = result.replace(boundary('d'), d.date);
|
||||
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):
|
||||
result = replacer(result, boundary('D'), locale.daysShort[d.day]);
|
||||
result = result.replace(boundary('D'), locale.daysShort[d.day]);
|
||||
case /mm/.test(result):
|
||||
result = replacer(result, boundary('mm'), d.fullMonth);
|
||||
result = result.replace(boundary('mm'), d.fullMonth);
|
||||
case /m/.test(result):
|
||||
result = replacer(result, boundary('m'), d.month + 1);
|
||||
result = result.replace(boundary('m'), d.month + 1);
|
||||
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):
|
||||
result = replacer(result, 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);
|
||||
result = result.replace(boundary('M'), locale.monthsShort[d.month]);
|
||||
case /ii/.test(result):
|
||||
result = replacer(result, boundary('ii'), d.fullMinutes);
|
||||
result = result.replace(boundary('ii'), d.fullMinutes);
|
||||
case /i/.test(result):
|
||||
result = replacer(result, boundary('i'), d.minutes);
|
||||
result = result.replace(boundary('i'), d.minutes);
|
||||
case /hh/.test(result):
|
||||
result = replacer(result, boundary('hh'), fullHours);
|
||||
result = result.replace(boundary('hh'), fullHours);
|
||||
case /h/.test(result):
|
||||
result = replacer(result, boundary('h'), hours);
|
||||
result = result.replace(boundary('h'), hours);
|
||||
case /yyyy/.test(result):
|
||||
result = replacer(result, boundary('yyyy'), d.year);
|
||||
result = result.replace(boundary('yyyy'), d.year);
|
||||
case /yyyy1/.test(result):
|
||||
result = replacer(result, boundary('yyyy1'), decade[0]);
|
||||
result = result.replace(boundary('yyyy1'), decade[0]);
|
||||
case /yyyy2/.test(result):
|
||||
result = replacer(result, boundary('yyyy2'), decade[1]);
|
||||
result = result.replace(boundary('yyyy2'), decade[1]);
|
||||
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;
|
||||
},
|
||||
|
||||
_replacer: function (str, reg, data) {
|
||||
return str.replace(reg, function (match, p1,p2,p3) {
|
||||
return p1 + data + p3;
|
||||
})
|
||||
},
|
||||
|
||||
_getWordBoundaryRegExp: function (sign) {
|
||||
var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;';
|
||||
|
||||
return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
|
||||
return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
|
||||
},
|
||||
|
||||
|
||||
selectDate: function (date) {
|
||||
var _this = this,
|
||||
opts = _this.opts,
|
||||
@ -485,7 +453,6 @@
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes)
|
||||
date.setSeconds(this.timepicker.seconds)
|
||||
}
|
||||
|
||||
if (_this.view == 'days') {
|
||||
@ -614,8 +581,7 @@
|
||||
* @param {String|Number|Object} [value] - new param value
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length,
|
||||
lastSelectedDate = this.lastSelectedDate;
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
@ -627,7 +593,7 @@
|
||||
this._syncWithMinMaxDates();
|
||||
this._defineLocale(this.opts.language);
|
||||
this.nav._addButtonsIfNeed();
|
||||
if (!this.opts.onlyTimepicker) this.nav._render();
|
||||
this.nav._render();
|
||||
this.views[this.currentView]._render();
|
||||
|
||||
if (this.elIsInput && !this.opts.inline) {
|
||||
@ -641,19 +607,14 @@
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.onlyTimepicker) {
|
||||
this.$datepicker.addClass('-only-timepicker-');
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
if (lastSelectedDate) this.timepicker._handleDate(lastSelectedDate);
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (lastSelectedDate) {
|
||||
lastSelectedDate.setHours(this.timepicker.hours);
|
||||
lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
lastSelectedDate.setSeconds(this.timepicker.seconds);
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
@ -819,20 +780,12 @@
|
||||
},
|
||||
|
||||
show: function () {
|
||||
var onShow = this.opts.onShow;
|
||||
|
||||
this.setPosition(this.opts.position);
|
||||
this.$datepicker.addClass('active');
|
||||
this.visible = true;
|
||||
|
||||
if (onShow) {
|
||||
this._bindVisionEvents(onShow)
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
var onHide = this.opts.onHide;
|
||||
|
||||
this.$datepicker
|
||||
.removeClass('active')
|
||||
.css({
|
||||
@ -845,10 +798,6 @@
|
||||
this.inFocus = false;
|
||||
this.visible = false;
|
||||
this.$el.blur();
|
||||
|
||||
if (onHide) {
|
||||
this._bindVisionEvents(onHide)
|
||||
}
|
||||
},
|
||||
|
||||
down: function (date) {
|
||||
@ -859,12 +808,6 @@
|
||||
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) {
|
||||
date = date || this.focused || this.date;
|
||||
|
||||
@ -1078,7 +1021,7 @@
|
||||
}
|
||||
$cell = this.views[this.currentView].$el.find(selector);
|
||||
|
||||
return $cell.length ? $cell : $('');
|
||||
return $cell.length ? $cell : '';
|
||||
},
|
||||
|
||||
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) {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
@ -1197,12 +1116,11 @@
|
||||
if (this.timepicker) {
|
||||
this.focused.setHours(this.timepicker.hours);
|
||||
this.focused.setMinutes(this.timepicker.minutes);
|
||||
this.focused.setSeconds(this.timepicker.seconds);
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
_onTimeChange: function (e, h, m, s) {
|
||||
_onTimeChange: function (e, h, m) {
|
||||
var date = new Date(),
|
||||
selectedDates = this.selectedDates,
|
||||
selected = false;
|
||||
@ -1271,7 +1189,6 @@
|
||||
|
||||
date.setHours(h);
|
||||
date.setMinutes(m);
|
||||
date.setSeconds(s);
|
||||
|
||||
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
|
||||
this.selectDate(date);
|
||||
@ -1287,7 +1204,6 @@
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes);
|
||||
date.setSeconds(this.timepicker.seconds)
|
||||
}
|
||||
this.selectDate(date);
|
||||
},
|
||||
@ -1411,9 +1327,7 @@
|
||||
hours: date.getHours(),
|
||||
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
|
||||
minutes: date.getMinutes(),
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
|
||||
seconds: date.getSeconds(),
|
||||
fullSeconds: date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
}
|
||||
};
|
||||
|
||||
@ -1460,16 +1374,6 @@
|
||||
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 ) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
|
||||
@ -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
|
||||
};
|
||||
@ -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
|
||||
};
|
||||
@ -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
|
||||
};
|
||||
@ -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
|
||||
};
|
||||
@ -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);
|
||||
@ -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
|
||||
};
|
||||
@ -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
|
||||
};
|
||||
@ -30,9 +30,7 @@
|
||||
},
|
||||
|
||||
_buildBaseHtml: function () {
|
||||
if (!this.opts.onlyTimepicker) {
|
||||
this._render();
|
||||
}
|
||||
this._render();
|
||||
this._addButtonsIfNeed();
|
||||
},
|
||||
|
||||
@ -89,10 +87,10 @@
|
||||
|
||||
switch (this.d.view) {
|
||||
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')
|
||||
}
|
||||
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')
|
||||
}
|
||||
break;
|
||||
@ -105,11 +103,10 @@
|
||||
}
|
||||
break;
|
||||
case 'years':
|
||||
var decade = dp.getDecade(this.d.date);
|
||||
if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
|
||||
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
|
||||
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')
|
||||
}
|
||||
break;
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
;(function () {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<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-minutes">#{minValue}</span>' +
|
||||
' <span class="datepicker--time-current-colon">:</span>' +
|
||||
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
@ -14,9 +12,6 @@
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
datepicker = $.fn.datepicker,
|
||||
@ -52,53 +47,27 @@
|
||||
this._handleDate(date);
|
||||
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
|
||||
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) {
|
||||
this.minHours = date.getHours();
|
||||
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) {
|
||||
this.maxHours = date.getHours();
|
||||
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 () {
|
||||
var maxHours = 23,
|
||||
maxMinutes = 59,
|
||||
maxSeconds = 59,
|
||||
opts = this.opts;
|
||||
|
||||
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
|
||||
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
|
||||
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
|
||||
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) {
|
||||
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 () {
|
||||
@ -132,16 +95,11 @@
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: this.hours,
|
||||
hourVisible: lz(this.displayHours),
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
minValue: lz(this.minutes),
|
||||
secMin: this.minSeconds,
|
||||
secMax: lz(this.maxSeconds),
|
||||
secStep: this.opts.secondsStep,
|
||||
secValue: lz(this.seconds)
|
||||
minValue: lz(this.minutes)
|
||||
},
|
||||
_template = dp.template(template, data);
|
||||
|
||||
@ -149,10 +107,8 @@
|
||||
this.$ranges = $('[type="range"]', this.$timepicker);
|
||||
this.$hours = $('[name="hours"]', this.$timepicker);
|
||||
this.$minutes = $('[name="minutes"]', this.$timepicker);
|
||||
this.$seconds = $('[name="seconds"]', this.$timepicker);
|
||||
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
|
||||
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
|
||||
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
@ -165,12 +121,10 @@
|
||||
|
||||
_updateCurrentTime: function () {
|
||||
var h = dp.getLeadingZeroNum(this.displayHours),
|
||||
m = dp.getLeadingZeroNum(this.minutes),
|
||||
s = dp.getLeadingZeroNum(this.seconds);
|
||||
m = dp.getLeadingZeroNum(this.minutes);
|
||||
|
||||
this.$hoursText.html(h);
|
||||
this.$minutesText.html(m);
|
||||
this.$secondsText.html(s);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm.html(this.dayPeriod);
|
||||
@ -186,12 +140,7 @@
|
||||
this.$minutes.attr({
|
||||
min: this.minMinutes,
|
||||
max: this.maxMinutes
|
||||
}).val(this.minutes);
|
||||
|
||||
this.$seconds.attr({
|
||||
min: this.minSeconds,
|
||||
max: this.maxSeconds
|
||||
}).val(this.seconds);
|
||||
}).val(this.minutes)
|
||||
},
|
||||
|
||||
/**
|
||||
@ -202,6 +151,7 @@
|
||||
*/
|
||||
_handleDate: function (date) {
|
||||
this._setDefaultMinMaxTime();
|
||||
|
||||
if (date) {
|
||||
if (dp.isSame(date, 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.
|
||||
* @param date {Date|Number} - date or hours
|
||||
* @param [ampm] {Boolean} - 12 hours mode
|
||||
* @returns {{hours: *, dayPeriod: string}}
|
||||
* @private
|
||||
*/
|
||||
_getValidHoursFromDate: function (date, ampm) {
|
||||
_getValidHoursFromDate: function (date) {
|
||||
var d = date,
|
||||
hours = date;
|
||||
|
||||
@ -234,10 +183,10 @@
|
||||
hours = d.hours;
|
||||
}
|
||||
|
||||
var _ampm = ampm || this.d.ampm,
|
||||
var ampm = this.d.ampm,
|
||||
dayPeriod = 'am';
|
||||
|
||||
if (_ampm) {
|
||||
if (ampm) {
|
||||
switch(true) {
|
||||
case hours == 0:
|
||||
hours = 12;
|
||||
@ -284,10 +233,7 @@
|
||||
|
||||
this[name] = $target.val();
|
||||
this._updateCurrentTime();
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
|
||||
|
||||
this._handleDate(this.d.lastSelectedDate);
|
||||
this.update()
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes])
|
||||
},
|
||||
|
||||
_onSelectDate: function (e, data) {
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
$datepickerDayCellSize: 32px !default;
|
||||
$datepickerWidth: 250px !default;
|
||||
$datepickerMinBodyHeight: 170px !default;
|
||||
$datepickerBorderRadius: 4px !default;
|
||||
$datepickerPadding: 4px !default;
|
||||
$datepickerZIndex: 100 !default;
|
||||
$dayCellSize: 32px;
|
||||
$datepickerWidth: 250px;
|
||||
$datepickerMinBodyHeight: 170px;
|
||||
$datepickerBorderRadius: 4px;
|
||||
$datepickerPadding: 4px;
|
||||
$datepickerZIndex: 100;
|
||||
|
||||
$datepickerFontFamily: Tahoma !default;
|
||||
$datepickerFontSize: 14px !default;
|
||||
$fontFamily: Tahoma;
|
||||
$fontSize: 14px;
|
||||
|
||||
$datepickerYearsPerRow: 4 !default;
|
||||
$yearsPerRow: 4;
|
||||
|
||||
$datepickerTextColor: (
|
||||
$textColor: (
|
||||
button: #5cc4ef,
|
||||
otherMonth: #dedede,
|
||||
otherMonthInRange: #ccc,
|
||||
@ -19,60 +19,60 @@ $datepickerTextColor: (
|
||||
common: #4a4a4a,
|
||||
dayNames: #FF9A19,
|
||||
navArrows: #9c9c9c
|
||||
) !default;
|
||||
);
|
||||
|
||||
$datepickerBG: (
|
||||
$bg: (
|
||||
selected: #5cc4ef,
|
||||
selectedHover: darken(#5cc4ef, 5),
|
||||
inRange: rgba(#5cc4ef, .1),
|
||||
hover: #f0f0f0
|
||||
) !default;
|
||||
);
|
||||
|
||||
$datepickerBorderColor: (
|
||||
$borderColor: (
|
||||
nav: #efefef,
|
||||
inline: #d7d7d7,
|
||||
default: #dbdbdb
|
||||
) !default;
|
||||
);
|
||||
|
||||
$datepickerNavigationHeight: 32px !default;
|
||||
$datepickerNavigationButtonsOffset: 2px !default;
|
||||
$navigationHeight: 32px;
|
||||
$navigationButtonsOffset: 2px;
|
||||
|
||||
$datepickerPointerSize: 10px !default;
|
||||
$datepickerPointerOffset: 10px !default;
|
||||
$pointerSize: 10px;
|
||||
$pointerOffset: 10px;
|
||||
|
||||
// Transitions
|
||||
$datepickerTransitionSpeed: .3s !default;
|
||||
$datepickerTransitionEase: ease !default;
|
||||
$datepickerTransitionOffset: 8px !default;
|
||||
$transitionSpeed: .3s;
|
||||
$transitionEase: ease;
|
||||
$transitionOffset: 8px;
|
||||
|
||||
// Objects
|
||||
%otherMonth {
|
||||
color: map_get($datepickerTextColor, otherMonth);
|
||||
color: map_get($textColor, otherMonth);
|
||||
|
||||
&:hover {
|
||||
color: darken(map_get($datepickerTextColor, otherMonth), 10);
|
||||
color: darken(map_get($textColor, otherMonth), 10);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
&.-focus- {
|
||||
color: map_get($datepickerTextColor, otherMonth);
|
||||
color: map_get($textColor, otherMonth);
|
||||
}
|
||||
}
|
||||
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
background: lighten(map_get($datepickerBG, selected), 15);
|
||||
background: lighten(map_get($bg, selected), 15);
|
||||
&.-focus- {
|
||||
background: lighten(map_get($datepickerBG, selected), 10);
|
||||
background: lighten(map_get($bg, selected), 10);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background-color: map_get($datepickerBG, inRange);
|
||||
color: darken(map_get($datepickerTextColor, otherMonth), 7);
|
||||
background-color: map_get($bg, inRange);
|
||||
color: darken(map_get($textColor, otherMonth), 7);
|
||||
|
||||
&.-focus- {
|
||||
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,62 +17,62 @@
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $datepickerDayCellSize;
|
||||
height: $dayCellSize;
|
||||
z-index: 1;
|
||||
|
||||
&.-focus- {
|
||||
background: map_get($datepickerBG, hover);
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
color: map_get($textColor, currentDate);
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($datepickerTextColor, common);
|
||||
color: map_get($textColor, common);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
color: map_get($textColor, currentDate);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background: map_get($datepickerBG, inRange);
|
||||
color: map_get($datepickerTextColor, common);
|
||||
background: map_get($bg, inRange);
|
||||
color: map_get($textColor, common);
|
||||
border-radius: 0;
|
||||
|
||||
&.-focus- {
|
||||
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
cursor: default;
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
color: map_get($textColor, disabled);
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
color: map_get($textColor, disabled);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
color: darken(map_get($datepickerTextColor, disabled), 5);
|
||||
color: darken(map_get($textColor, disabled), 5);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
&.-focus- {
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
color: map_get($textColor, disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-range-from- {
|
||||
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
|
||||
background-color: map_get($datepickerBG, inRange);
|
||||
border: 1px solid rgba(map_get($bg, selected), .5);
|
||||
background-color: map_get($bg, inRange);
|
||||
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
|
||||
}
|
||||
&.-range-to- {
|
||||
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
|
||||
background-color: map_get($datepickerBG, inRange);
|
||||
border: 1px solid rgba(map_get($bg, selected), .5);
|
||||
background-color: map_get($bg, inRange);
|
||||
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
|
||||
}
|
||||
|
||||
@ -84,15 +84,15 @@
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: map_get($datepickerBG, selected);
|
||||
background: map_get($bg, selected);
|
||||
|
||||
&.-current- {
|
||||
color: #fff;
|
||||
background: map_get($datepickerBG, selected);
|
||||
background: map_get($bg, selected);
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
background: map_get($datepickerBG, selectedHover);
|
||||
background: map_get($bg, selectedHover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
.datepicker--day-name {
|
||||
color: map_get($datepickerTextColor, dayNames);
|
||||
color: map_get($textColor, dayNames);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -164,7 +164,7 @@
|
||||
// -------------------------
|
||||
|
||||
.datepicker--cell-year {
|
||||
width: 100% / $datepickerYearsPerRow;
|
||||
width: 100% / $yearsPerRow;
|
||||
height: 33.33%;
|
||||
|
||||
&.-other-decade- {
|
||||
|
||||
@ -16,44 +16,44 @@
|
||||
|
||||
.datepicker {
|
||||
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);
|
||||
border-radius: $datepickerBorderRadius;
|
||||
box-sizing: content-box;
|
||||
font-family: $datepickerFontFamily, sans-serif;
|
||||
font-size: $datepickerFontSize;
|
||||
color: map_get($datepickerTextColor, common);
|
||||
font-family: $fontFamily, sans-serif;
|
||||
font-size: $fontSize;
|
||||
color: map_get($textColor, common);
|
||||
width: $datepickerWidth;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
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;
|
||||
|
||||
&.-from-top- {
|
||||
transform: translateY(-$datepickerTransitionOffset);
|
||||
transform: translateY(-$transitionOffset);
|
||||
}
|
||||
&.-from-right- {
|
||||
transform: translateX($datepickerTransitionOffset);
|
||||
transform: translateX($transitionOffset);
|
||||
}
|
||||
&.-from-bottom- {
|
||||
transform: translateY($datepickerTransitionOffset);
|
||||
transform: translateY($transitionOffset);
|
||||
}
|
||||
&.-from-left- {
|
||||
transform: translateX(-$datepickerTransitionOffset);
|
||||
transform: translateX(-$transitionOffset);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
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 {
|
||||
border-color: map-get($datepickerBorderColor, inline);
|
||||
border-color: map-get($borderColor, inline);
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
left: auto;
|
||||
@ -70,23 +70,19 @@
|
||||
.datepicker--content {
|
||||
box-sizing: content-box;
|
||||
padding: $datepickerPadding;
|
||||
|
||||
.-only-timepicker- & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pointer
|
||||
// -------------------------------------------------
|
||||
$pointerHalfSize: $datepickerPointerSize / 2 - 1;
|
||||
$pointerHalfSize: $pointerSize / 2 - 1;
|
||||
|
||||
.datepicker--pointer {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border-top: 1px solid map-get($datepickerBorderColor, default);
|
||||
border-right: 1px solid map-get($datepickerBorderColor, default);
|
||||
width: $datepickerPointerSize;
|
||||
height: $datepickerPointerSize;
|
||||
border-top: 1px solid map-get($borderColor, default);
|
||||
border-right: 1px solid map-get($borderColor, default);
|
||||
width: $pointerSize;
|
||||
height: $pointerSize;
|
||||
z-index: -1;
|
||||
|
||||
// Main axis
|
||||
@ -116,23 +112,23 @@ $pointerHalfSize: $datepickerPointerSize / 2 - 1;
|
||||
// -------------------------
|
||||
|
||||
.-top-left- &, .-bottom-left- & {
|
||||
left: $datepickerPointerOffset;
|
||||
left: $pointerOffset;
|
||||
}
|
||||
.-top-right- &, .-bottom-right- & {
|
||||
right: $datepickerPointerOffset;
|
||||
right: $pointerOffset;
|
||||
}
|
||||
.-top-center- &, .-bottom-center- & {
|
||||
left: calc(50% - #{$datepickerPointerSize} / 2);
|
||||
left: calc(50% - #{$pointerSize} / 2);
|
||||
}
|
||||
|
||||
.-left-top- &, .-right-top- & {
|
||||
top: $datepickerPointerOffset;
|
||||
top: $pointerOffset;
|
||||
}
|
||||
.-left-bottom- &, .-right-bottom- & {
|
||||
bottom: $datepickerPointerOffset;
|
||||
bottom: $pointerOffset;
|
||||
}
|
||||
.-left-center- &, .-right-center- & {
|
||||
top: calc(50% - #{$datepickerPointerSize} / 2);
|
||||
top: calc(50% - #{$pointerSize} / 2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,13 +7,9 @@
|
||||
.datepicker--nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid map_get($datepickerBorderColor, nav);
|
||||
min-height: $datepickerNavigationHeight;
|
||||
border-bottom: 1px solid map_get($borderColor, nav);
|
||||
min-height: $navigationHeight;
|
||||
padding: $datepickerPadding;
|
||||
|
||||
.-only-timepicker- & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav-title,
|
||||
@ -25,12 +21,12 @@
|
||||
}
|
||||
|
||||
.datepicker--nav-action {
|
||||
width: $datepickerDayCellSize;
|
||||
width: $dayCellSize;
|
||||
border-radius: $datepickerBorderRadius;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: map_get($datepickerBG, hover);
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
@ -44,7 +40,7 @@
|
||||
|
||||
path {
|
||||
fill: none;
|
||||
stroke: map_get($datepickerTextColor, navArrows);
|
||||
stroke: map_get($textColor, navArrows);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
@ -55,12 +51,12 @@
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
color: map_get($textColor, navArrows);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: map_get($datepickerBG, hover);
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
@ -75,11 +71,11 @@
|
||||
.datepicker--buttons {
|
||||
display: flex;
|
||||
padding: $datepickerPadding;
|
||||
border-top: 1px solid map_get($datepickerBorderColor, nav);
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
}
|
||||
|
||||
.datepicker--button {
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
color: map_get($textColor, currentDate);
|
||||
cursor: pointer;
|
||||
border-radius: $datepickerBorderRadius;
|
||||
flex: 1;
|
||||
@ -89,7 +85,7 @@
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
color: map_get($datepickerTextColor, common);
|
||||
background: map_get($datepickerBG, hover);
|
||||
color: map_get($textColor, common);
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
}
|
||||
@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
|
||||
}
|
||||
|
||||
.datepicker--time {
|
||||
border-top: 1px solid map_get($datepickerBorderColor, nav);
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -71,10 +71,6 @@ $rangeThumbBg: #dedede;
|
||||
max-width: 138px;
|
||||
}
|
||||
}
|
||||
|
||||
.-only-timepicker- & {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--time-sliders {
|
||||
@ -94,7 +90,7 @@ $rangeThumbBg: #dedede;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.datepicker--time-current-colon {
|
||||
@ -103,17 +99,16 @@ $rangeThumbBg: #dedede;
|
||||
}
|
||||
|
||||
.datepicker--time-current-hours,
|
||||
.datepicker--time-current-minutes,
|
||||
.datepicker--time-current-seconds {
|
||||
.datepicker--time-current-minutes {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
font-size: 19px;
|
||||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: map_get($datepickerBG, hover);
|
||||
background: map_get($bg, hover);
|
||||
border-radius: $datepickerBorderRadius;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
@ -133,8 +128,8 @@ $rangeThumbBg: #dedede;
|
||||
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
align-self: flex-start;
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
align-self: flex-end;
|
||||
color: map_get($textColor, navArrows);
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 1px;
|
||||
@ -178,8 +173,8 @@ $rangeThumbBg: #dedede;
|
||||
outline: none;
|
||||
|
||||
@include thumbSelector() {
|
||||
background: map_get($datepickerBG, selected);
|
||||
border-color: map_get($datepickerBG, selected);
|
||||
background: map_get($bg, selected);
|
||||
border-color: map_get($bg, selected);
|
||||
}
|
||||
}
|
||||
|
||||
@ -219,7 +214,7 @@ $rangeThumbBg: #dedede;
|
||||
}
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
color: map_get($textColor, navArrows);
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<style type="text/css">
|
||||
/* Remove transitions to test position options*/
|
||||
.datepicker {
|
||||
transition-duration: 0s !important;
|
||||
transition: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -15,7 +15,6 @@ var assert = chai.assert,
|
||||
afterEach(function () {
|
||||
if (dp && destroy) {
|
||||
dp.destroy();
|
||||
dp = '';
|
||||
}
|
||||
|
||||
destroy = true;
|
||||
@ -79,39 +78,6 @@ var assert = chai.assert,
|
||||
expect(dates).to.have.length(2)
|
||||
})
|
||||
});
|
||||
|
||||
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 () {
|
||||
it('should add callback when cell is rendered', function () {
|
||||
|
||||
@ -189,36 +189,6 @@ describe('Options', function () {
|
||||
dp.selectDate(date);
|
||||
|
||||
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)
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
describe('keyboardNav', function () {
|
||||
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 () {
|
||||
it('should define separator between date string and time', function () {
|
||||
var date = new Date(2016,2,9,11,24);
|
||||
|
||||
@ -5,6 +5,7 @@ var assert = chai.assert,
|
||||
describe('Datepicker', function () {
|
||||
describe('getDaysCount', function () {
|
||||
it('should return 31 days in December', function () {
|
||||
console.log(plugin.getDaysCount);
|
||||
assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
|
||||
});
|
||||
it('should return 30 days in September', function () {
|
||||
|
||||
@ -3,9 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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/i18n/datepicker.en.js"></script>
|
||||
<link rel="stylesheet" href="dist/css/datepicker.css"/>
|
||||
<link rel="stylesheet" href="docs/css/style.css"/>
|
||||
<script type="text/javascript">
|
||||
@ -32,7 +31,7 @@
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<h2>Default</h2>
|
||||
<div class="datepicker-here" data-language="en"></div>
|
||||
<div class="datepicker-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -42,11 +41,11 @@
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<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 class="vt-tile">
|
||||
<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">
|
||||
$('#dp-3').datepicker({
|
||||
onSelect: function (fd) {
|
||||
@ -57,7 +56,7 @@
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<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">
|
||||
$('#dp-4').datepicker({
|
||||
onSelect: function (fd) {
|
||||
@ -74,29 +73,17 @@
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<h2>{timepicker: true}</h2>
|
||||
<div id="test" class="datepicker-here" data-language="en" 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 class="datepicker-here" data-timepicker="true"></div>
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<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">
|
||||
$('#dp-5').datepicker({
|
||||
toggleSelected: false,
|
||||
inline: true,
|
||||
range: true,
|
||||
onSelect: function (fd) {
|
||||
console.log(arguments)
|
||||
log(fd)
|
||||
}
|
||||
})
|
||||
@ -104,18 +91,7 @@
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<h2>{timepicker: true}</h2>
|
||||
<input class="datepicker-here" data-language="en" 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>
|
||||
<input class="datepicker-here" data-timepicker="true" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user