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

Compare commits

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

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

29 changed files with 2541 additions and 3198 deletions
Show Stats Expand all files Collapse all files

22
README.md
View File

@ -26,28 +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`

4
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "air-datepicker",
"version": "2.2.3",
"version": "2.1.0",
"authors": [
"t1m0n <t1m0n.tr@gmail.com>"
],
@ -30,6 +30,6 @@
"tests"
],
"dependencies": {
"jquery": ">=2.0.0 <4.0.0"
"jquery": "^3.0.0"
}
}

112
dist/css/datepicker.css vendored
View File

@ -18,32 +18,14 @@
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;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@ -51,11 +33,14 @@
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 32px;
@ -106,20 +91,26 @@
cursor: default; }
.datepicker--days-names {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-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;
-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;
@ -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- {
-webkit-transform: translateY(-8px);
transform: translateY(-8px); }
.datepicker.-from-right- {
-webkit-transform: translateX(8px);
transform: translateX(8px); }
.datepicker.-from-bottom- {
-webkit-transform: translateY(8px);
transform: translateY(8px); }
.datepicker.-from-left- {
-webkit-transform: translateX(-8px);
transform: translateX(-8px); }
.datepicker.active {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
.datepicker-inline .datepicker {
border-color: #d7d7d7;
@ -212,6 +212,7 @@
left: auto;
right: auto;
opacity: 1;
-webkit-transform: none;
transform: none; }
.datepicker-inline .datepicker--pointer {
@ -220,8 +221,6 @@
.datepicker--content {
box-sizing: content-box;
padding: 4px; }
.-only-timepicker- .datepicker--content {
display: none; }
.datepicker--pointer {
position: absolute;
@ -233,15 +232,19 @@
z-index: -1; }
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
top: calc(100% - 4px);
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
right: calc(100% - 4px);
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
bottom: calc(100% - 4px);
-webkit-transform: rotate(315deg);
transform: rotate(315deg); }
.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
left: calc(100% - 4px);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
left: 10px; }
@ -285,23 +288,26 @@
Navigation
------------------------------------------------- */
.datepicker--nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-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;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
@ -338,6 +344,7 @@
background: none; }
.datepicker--buttons {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 4px;
@ -347,12 +354,16 @@
color: #4EB5E6;
cursor: pointer;
border-radius: 4px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 32px; }
@ -385,20 +396,22 @@
------------------------------------------------- */
.datepicker--time {
border-top: 1px solid #efefef;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 4px;
position: relative; }
.datepicker--time.-am-pm- .datepicker--time-sliders {
-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 {
-webkit-flex: 0 1 153px;
-ms-flex: 0 1 153px;
flex: 0 1 153px;
margin-right: 10px;
@ -409,31 +422,32 @@
font-size: 12px; }
.datepicker--time-current {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-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,22 +459,24 @@
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;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 11px;
@ -471,6 +487,7 @@
.datepicker--time-row input[type='range'] {
background: none;
cursor: pointer;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
height: 100%;
@ -570,9 +587,30 @@
width: 1px;
left: calc(50% - 1px);
top: calc(50% + 1px);
-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
View File

File diff suppressed because one or more lines are too long

229
dist/js/datepicker.js vendored
View File

@ -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) {
@ -322,11 +305,11 @@
parsedDate.month,
parsedDate.date,
parsedDate.hours,
parsedDate.minutes,
parsedDate.seconds
parsedDate.minutes
);
})
}
this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this);
},
@ -381,7 +364,6 @@
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) {
@ -395,63 +377,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 +454,6 @@
if (this.timepicker) {
date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
}
if (_this.view == 'days') {
@ -627,7 +595,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,10 +609,6 @@
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._updateRanges();
@ -653,7 +617,6 @@
if (lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
}
}
@ -819,20 +782,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 +800,6 @@
this.inFocus = false;
this.visible = false;
this.$el.blur();
if (onHide) {
this._bindVisionEvents(onHide)
}
},
down: function (date) {
@ -859,12 +810,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 +1023,7 @@
}
$cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : $('');
return $cell.length ? $cell : '';
},
destroy: function () {
@ -1101,30 +1046,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 +1118,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 +1179,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 +1191,6 @@
date.setHours(h);
date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date);
@ -1287,7 +1206,6 @@
if (this.timepicker) {
date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
}
this.selectDate(date);
},
@ -1411,9 +1329,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()
}
};
@ -1530,9 +1446,7 @@
this.d = d;
this.type = type;
this.opts = opts;
this.$el = $('');
if (this.opts.onlyTimepicker) return;
this.init();
};
@ -1578,6 +1492,12 @@
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-";
@ -1610,7 +1530,6 @@
html = render.html ? render.html : html;
classes += render.classes ? ' ' + render.classes : '';
}
if (opts.range) {
if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
@ -1754,7 +1673,6 @@
},
_render: function () {
if (this.opts.onlyTimepicker) return;
this._renderTypes[this.type].bind(this)();
},
@ -1773,7 +1691,6 @@
},
show: function () {
if (this.opts.onlyTimepicker) return;
this.$el.addClass('active');
this.acitve = true;
},
@ -1802,11 +1719,27 @@
if (!alreadySelected) {
dp._trigger('clickCell', selectedDate);
return;
}
dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
if (alreadySelected && this.opts.range) {
// Add possibility to select same date when range is true
if (dp.selectedDates.length != 2 && !this.opts.toggleSelected || this.opts.toggleSelected) {
dp._trigger('clickCell', selectedDate);
// Change last selected date to be able to change time on last date
dp.lastSelectedDate = alreadySelected;
}
} else if (alreadySelected && this.opts.toggleSelected){
dp.removeDate(selectedDate);
}
// Change last selected date to be able to change time when clicking on this cell
if (alreadySelected && !this.opts.toggleSelected) {
dp.lastSelectedDate = alreadySelected;
if (dp.opts.timepicker) {
dp.timepicker._setTime(alreadySelected);
dp.timepicker.update();
}
}
},
_onClickCell: function (e) {
@ -1851,9 +1784,7 @@
},
_buildBaseHtml: function () {
if (!this.opts.onlyTimepicker) {
this._render();
}
this._addButtonsIfNeed();
},
@ -1910,10 +1841,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 +1857,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 +1898,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 +1909,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,7 +1944,6 @@
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;
},
/**
@ -2031,7 +1955,6 @@
_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
@ -2045,7 +1968,6 @@
_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()) {
@ -2057,15 +1979,12 @@
_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 +2004,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 +2012,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 +2024,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 +2038,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 +2057,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)
},
/**
@ -2251,7 +2150,7 @@
this[name] = $target.val();
this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
this.d._trigger('timeChange', [this.hours, this.minutes]);
this._handleDate(this.d.lastSelectedDate);
this.update()

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

File diff suppressed because one or more lines are too long

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

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

2
docs/css/style.css
View File

File diff suppressed because one or more lines are too long

50
docs/index-ru.html
View File

File diff suppressed because one or more lines are too long

52
docs/index.html
View File

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

1
docs/jade/layout.jade
View File

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

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

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

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

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

29
docs/js/logger.js
View File

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

60
docs/sass/_docs.scss
View File

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

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "air-datepicker",
"version": "2.2.3",
"version": "2.1.0",
"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": "^3.0.0"
},
"description": "Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)\r ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)",
"main": "src/js/air-datepicker.js",

31
src/js/body.js
View File

@ -21,9 +21,7 @@
this.d = d;
this.type = type;
this.opts = opts;
this.$el = $('');
if (this.opts.onlyTimepicker) return;
this.init();
};
@ -69,6 +67,12 @@
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-";
@ -101,7 +105,6 @@
html = render.html ? render.html : html;
classes += render.classes ? ' ' + render.classes : '';
}
if (opts.range) {
if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
@ -245,7 +248,6 @@
},
_render: function () {
if (this.opts.onlyTimepicker) return;
this._renderTypes[this.type].bind(this)();
},
@ -264,7 +266,6 @@
},
show: function () {
if (this.opts.onlyTimepicker) return;
this.$el.addClass('active');
this.acitve = true;
},
@ -293,11 +294,27 @@
if (!alreadySelected) {
dp._trigger('clickCell', selectedDate);
return;
}
dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
if (alreadySelected && this.opts.range) {
// Add possibility to select same date when range is true
if (dp.selectedDates.length != 2 && !this.opts.toggleSelected || this.opts.toggleSelected) {
dp._trigger('clickCell', selectedDate);
// Change last selected date to be able to change time on last date
dp.lastSelectedDate = alreadySelected;
}
} else if (alreadySelected && this.opts.toggleSelected){
dp.removeDate(selectedDate);
}
// Change last selected date to be able to change time when clicking on this cell
if (alreadySelected && !this.opts.toggleSelected) {
dp.lastSelectedDate = alreadySelected;
if (dp.opts.timepicker) {
dp.timepicker._setTime(alreadySelected);
dp.timepicker.update();
}
}
},
_onClickCell: function (e) {

144
src/js/datepicker.js
View File

@ -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) {
@ -322,11 +305,11 @@
parsedDate.month,
parsedDate.date,
parsedDate.hours,
parsedDate.minutes,
parsedDate.seconds
parsedDate.minutes
);
})
}
this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this);
},
@ -381,7 +364,6 @@
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) {
@ -395,63 +377,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 +454,6 @@
if (this.timepicker) {
date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
}
if (_this.view == 'days') {
@ -627,7 +595,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,10 +609,6 @@
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._updateRanges();
@ -653,7 +617,6 @@
if (lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
}
}
@ -819,20 +782,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 +800,6 @@
this.inFocus = false;
this.visible = false;
this.$el.blur();
if (onHide) {
this._bindVisionEvents(onHide)
}
},
down: function (date) {
@ -859,12 +810,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 +1023,7 @@
}
$cell = this.views[this.currentView].$el.find(selector);
return $cell.length ? $cell : $('');
return $cell.length ? $cell : '';
},
destroy: function () {
@ -1101,30 +1046,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 +1118,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 +1179,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 +1191,6 @@
date.setHours(h);
date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date);
@ -1287,7 +1206,6 @@
if (this.timepicker) {
date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
}
this.selectDate(date);
},
@ -1411,9 +1329,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()
}
};

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

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

11
src/js/navigation.js
View File

@ -30,9 +30,7 @@
},
_buildBaseHtml: function () {
if (!this.opts.onlyTimepicker) {
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;

43
src/js/timepicker.js
View File

@ -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,7 +47,6 @@
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;
},
/**
@ -64,7 +58,6 @@
_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
@ -78,7 +71,6 @@
_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()) {
@ -90,15 +82,12 @@
_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 +107,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 +115,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 +127,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 +141,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 +160,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)
},
/**
@ -284,7 +253,7 @@
this[name] = $target.val();
this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
this.d._trigger('timeChange', [this.hours, this.minutes]);
this._handleDate(this.d.lastSelectedDate);
this.update()

4
src/sass/datepicker.scss
View File

@ -70,10 +70,6 @@
.datepicker--content {
box-sizing: content-box;
padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
}
// Pointer

4
src/sass/navigation.scss
View File

@ -10,10 +10,6 @@
border-bottom: 1px solid map_get($datepickerBorderColor, nav);
min-height: $datepickerNavigationHeight;
padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
}
.datepicker--nav-title,

13
src/sass/timepicker.scss
View File

@ -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,10 +99,9 @@ $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;
@ -133,7 +128,7 @@ $rangeThumbBg: #dedede;
.datepicker--time-current-ampm {
text-transform: uppercase;
align-self: flex-start;
align-self: flex-end;
color: map_get($datepickerTextColor, navArrows);
margin-left: 6px;
font-size: 11px;

2
tests/index.html
View File

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

34
tests/specs/events.js
View File

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

20
tests/specs/options.js
View File

@ -856,26 +856,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);

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

@ -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 () {

31
visual-tests.html
View File

@ -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,11 +91,11 @@
</div>
<div class="vt-tile">
<h2>{timepicker: true}</h2>
<input class="datepicker-here" data-language="en" data-timepicker="true" />
<input class="datepicker-here" data-timepicker="true" />
</div>
<div class="vt-tile">
<h2>{timepicker: true, minDate: new Date()}</h2>
<input class="datepicker-here" data-language="en" id="dp-6"/>
<input class="datepicker-here" id="dp-6"/>
<script type="text/javascript">
$('#dp-6').datepicker({
minDate: new Date(),