mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
Merge branch 'develop'
Conflicts: bower.json
This commit is contained in:
t1m0n
commit
0c67a769da
7
.npmignore
Normal file
7
.npmignore
Normal file
@ -0,0 +1,7 @@
|
||||
.idea
|
||||
tests
|
||||
docs
|
||||
bower_components
|
||||
bower.json
|
||||
static-server.js
|
||||
visual-tests.html
|
||||
24
README.md
24
README.md
@ -1,12 +1,19 @@
|
||||
# Air Datepicker
|
||||
|
||||
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+)
|
||||
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+).
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
### bower
|
||||
```
|
||||
bower i --save air-datepicker
|
||||
```
|
||||
### npm
|
||||
```
|
||||
npm i --save air-datepicker
|
||||
```
|
||||
|
||||
## Usage
|
||||
```javascript
|
||||
@ -19,6 +26,21 @@ $('.my-datepicker').datepicker([options])
|
||||
|
||||
## Change log
|
||||
|
||||
### v2.0.0
|
||||
* added timepicker (see [docs](http://t1m0n.name/air-datepicker/docs#timepicker) for more info)
|
||||
* added possibility to set `Date` in `todayButton`
|
||||
* global variable `Datepicker` has been removed, now all placed in `$.fn.datepicker`
|
||||
* improved `selectDate` method, now one can pass an array of dates to select
|
||||
* added `npm` package
|
||||
* fixed issue caused by `placeholder` on `readonly` inputs in IE
|
||||
* fixed issue when `range` is true and first selected date is bigger than second
|
||||
* added new languages:
|
||||
- `da` thanks to [bjarnef](https://github.com/bjarnef)
|
||||
- `nl` thanks to [JaZo](https://github.com/JaZo)
|
||||
- `pt` thanks to [cmpscabral](https://github.com/cmpscabral)
|
||||
- `pt-BR` thanks to [dowglaz](https://github.com/dowglaz)
|
||||
- `ro` thanks to [tourniquet](https://github.com/tourniquet)
|
||||
|
||||
### v1.2.4
|
||||
* fixed '$ is not defined' problem.
|
||||
|
||||
|
||||
16
bower.json
16
bower.json
@ -1,18 +1,20 @@
|
||||
{
|
||||
"name": "air-datepicker",
|
||||
"version": "1.2.4",
|
||||
"version": "2.0.0",
|
||||
"authors": [
|
||||
"t1m0n <t1m0n.tr@gmail.com>"
|
||||
],
|
||||
"description": "A lightweight jQuery datepicker",
|
||||
"description": "A lightweight, customizable, powerful jQuery datepicker",
|
||||
"main": [
|
||||
"dist/js/datepicker.js",
|
||||
"dist/css/datepicker.css"
|
||||
"dist/js/datepicker.min.js",
|
||||
"dist/css/datepicker.min.css"
|
||||
],
|
||||
"keywords": [
|
||||
"datepicker",
|
||||
"calendar",
|
||||
"lightweight"
|
||||
"timepicker",
|
||||
"plugin",
|
||||
"customizable",
|
||||
"powerful"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
@ -28,6 +30,6 @@
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "~2.1.4"
|
||||
"jquery": "^2.2.3"
|
||||
}
|
||||
}
|
||||
267
dist/css/datepicker.css
vendored
267
dist/css/datepicker.css
vendored
@ -18,26 +18,6 @@
|
||||
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
|
||||
------------------------------------------------- */
|
||||
@ -184,6 +164,9 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
@media print {
|
||||
.datepickers-container {
|
||||
display: none; } }
|
||||
|
||||
.datepicker {
|
||||
background: #fff;
|
||||
@ -387,3 +370,247 @@
|
||||
.datepicker--button:hover {
|
||||
color: #4a4a4a;
|
||||
background: #f0f0f0; }
|
||||
|
||||
.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; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
.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; }
|
||||
|
||||
.datepicker--time-sliders {
|
||||
-webkit-flex: 0 1 153px;
|
||||
-ms-flex: 0 1 153px;
|
||||
flex: 0 1 153px;
|
||||
margin-right: 10px;
|
||||
max-width: 153px; }
|
||||
|
||||
.datepicker--time-label {
|
||||
display: none;
|
||||
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 0 0 10px; }
|
||||
|
||||
.datepicker--time-current-colon {
|
||||
margin: 0 2px 3px;
|
||||
line-height: 1; }
|
||||
|
||||
.datepicker--time-current-hours,
|
||||
.datepicker--time-current-minutes {
|
||||
line-height: 1;
|
||||
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 {
|
||||
content: '';
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
z-index: -1;
|
||||
opacity: 0; }
|
||||
.datepicker--time-current-hours.-focus-:after,
|
||||
.datepicker--time-current-minutes.-focus-:after {
|
||||
opacity: 1; }
|
||||
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
-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;
|
||||
height: 17px;
|
||||
background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
|
||||
.datepicker--time-row:first-child {
|
||||
margin-bottom: 4px; }
|
||||
.datepicker--time-row input[type='range'] {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-ms-tooltip {
|
||||
display: none; }
|
||||
.datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:hover::-moz-range-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:hover::-ms-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:focus {
|
||||
outline: none; }
|
||||
.datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']:focus::-moz-range-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']:focus::-ms-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-ms-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
margin-top: -6px; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-lower {
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-upper {
|
||||
background: transparent; }
|
||||
.datepicker--time-row span {
|
||||
padding: 0 12px; }
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: #9c9c9c;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin: 0 5px -1px 0;
|
||||
width: 1em;
|
||||
height: 1em; }
|
||||
.datepicker--time-icon:after, .datepicker--time-icon:before {
|
||||
content: '';
|
||||
background: currentColor;
|
||||
position: absolute; }
|
||||
.datepicker--time-icon:after {
|
||||
height: .4em;
|
||||
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
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
581
dist/js/datepicker.js
vendored
581
dist/js/datepicker.js
vendored
@ -1,6 +1,4 @@
|
||||
;(function (window, $, undefined) { window.Datepicker = '';
|
||||
|
||||
(function () {
|
||||
;(function (window, $, undefined) { ;(function () {
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
@ -62,6 +60,17 @@
|
||||
years: 'yyyy1 - yyyy2'
|
||||
},
|
||||
|
||||
// timepicker
|
||||
timepicker: false,
|
||||
dateTimeSeparator: ' ',
|
||||
timeFormat: '',
|
||||
minHours: 0,
|
||||
maxHours: 24,
|
||||
minMinutes: 0,
|
||||
maxMinutes: 59,
|
||||
hoursStep: 1,
|
||||
minutesStep: 1,
|
||||
|
||||
// events
|
||||
onSelect: '',
|
||||
onChangeMonth: '',
|
||||
@ -87,7 +96,7 @@
|
||||
},
|
||||
datepicker;
|
||||
|
||||
Datepicker = function (el, options) {
|
||||
var Datepicker = function (el, options) {
|
||||
this.el = el;
|
||||
this.$el = $(el);
|
||||
|
||||
@ -121,6 +130,7 @@
|
||||
this.keys = [];
|
||||
this.minRange = '';
|
||||
this.maxRange = '';
|
||||
this._prevOnSelectValue = '';
|
||||
|
||||
this.init()
|
||||
};
|
||||
@ -155,11 +165,17 @@
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new $.fn.datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
|
||||
this.views[this.currentView].show();
|
||||
this.nav = new Datepicker.Navigation(this, this.opts);
|
||||
this.nav = new $.fn.datepicker.Navigation(this, this.opts);
|
||||
this.view = this.currentView;
|
||||
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
|
||||
this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
|
||||
|
||||
@ -173,9 +189,11 @@
|
||||
|
||||
_bindEvents : function () {
|
||||
this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
|
||||
this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
|
||||
this.$el.on('blur.adp', this._onBlur.bind(this));
|
||||
this.$el.on('input.adp', this._onInput.bind(this));
|
||||
this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
|
||||
$(window).on('resize.adp', this._onResize.bind(this));
|
||||
$('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
|
||||
},
|
||||
|
||||
_bindKeyboardEvents: function () {
|
||||
@ -184,30 +202,49 @@
|
||||
this.$el.on('hotKey.adp', this._onHotKey.bind(this));
|
||||
},
|
||||
|
||||
_bindTimepickerEvents: function () {
|
||||
this.$el.on('timeChange.adp', this._onTimeChange.bind(this));
|
||||
},
|
||||
|
||||
isWeekend: function (day) {
|
||||
return this.opts.weekends.indexOf(day) !== -1;
|
||||
},
|
||||
|
||||
_defineLocale: function (lang) {
|
||||
if (typeof lang == 'string') {
|
||||
this.loc = Datepicker.language[lang];
|
||||
this.loc = $.fn.datepicker.language[lang];
|
||||
if (!this.loc) {
|
||||
console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru)
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru)
|
||||
}
|
||||
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, $.fn.datepicker.language[lang])
|
||||
} else {
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, lang)
|
||||
}
|
||||
|
||||
if (this.opts.dateFormat) {
|
||||
this.loc.dateFormat = this.opts.dateFormat
|
||||
}
|
||||
|
||||
if (this.opts.timeFormat) {
|
||||
this.loc.timeFormat = this.opts.timeFormat
|
||||
}
|
||||
|
||||
if (this.opts.firstDay !== '') {
|
||||
this.loc.firstDay = this.opts.firstDay
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
|
||||
}
|
||||
|
||||
var boundary = this._getWordBoundaryRegExp;
|
||||
if (this.loc.timeFormat.match(boundary('aa')) ||
|
||||
this.loc.timeFormat.match(boundary('AA'))
|
||||
) {
|
||||
this.ampm = true;
|
||||
}
|
||||
},
|
||||
|
||||
_buildDatepickersContainer: function () {
|
||||
@ -237,6 +274,9 @@
|
||||
|
||||
_triggerOnChange: function () {
|
||||
if (!this.selectedDates.length) {
|
||||
// Prevent from triggering multiple onSelect callback with same argument (empty string) in IE10-11
|
||||
if (this._prevOnSelectValue === '') return;
|
||||
this._prevOnSelectValue = '';
|
||||
return this.opts.onSelect('', '', this);
|
||||
}
|
||||
|
||||
@ -244,7 +284,13 @@
|
||||
parsedSelected = datepicker.getParsedDate(selectedDates[0]),
|
||||
formattedDates,
|
||||
_this = this,
|
||||
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
|
||||
dates = new Date(
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
|
||||
formattedDates = selectedDates.map(function (date) {
|
||||
return _this.formatDate(_this.loc.dateFormat, date)
|
||||
@ -254,10 +300,17 @@
|
||||
if (this.opts.multipleDates || this.opts.range) {
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
|
||||
return new Date(
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
this._prevOnSelectValue = formattedDates;
|
||||
this.opts.onSelect(formattedDates, dates, this);
|
||||
},
|
||||
|
||||
@ -304,12 +357,28 @@
|
||||
var result = string,
|
||||
boundary = this._getWordBoundaryRegExp,
|
||||
locale = this.loc,
|
||||
leadingZero = datepicker.getLeadingZeroNum,
|
||||
decade = datepicker.getDecade(date),
|
||||
d = datepicker.getParsedDate(date);
|
||||
d = datepicker.getParsedDate(date),
|
||||
fullHours = d.fullHours,
|
||||
hours = d.hours,
|
||||
dayPeriod = 'am',
|
||||
validHours;
|
||||
|
||||
if (this.opts.timepicker && this.timepicker && this.ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date);
|
||||
fullHours = leadingZero(validHours.hours);
|
||||
hours = validHours.hours;
|
||||
dayPeriod = validHours.dayPeriod;
|
||||
}
|
||||
|
||||
switch (true) {
|
||||
case /@/.test(result):
|
||||
result = result.replace(/@/, date.getTime());
|
||||
case /aa/.test(result):
|
||||
result = result.replace(boundary('aa'), dayPeriod);
|
||||
case /AA/.test(result):
|
||||
result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
|
||||
case /dd/.test(result):
|
||||
result = result.replace(boundary('dd'), d.fullDate);
|
||||
case /d/.test(result):
|
||||
@ -326,6 +395,14 @@
|
||||
result = result.replace(boundary('MM'), this.loc.months[d.month]);
|
||||
case /M/.test(result):
|
||||
result = result.replace(boundary('M'), locale.monthsShort[d.month]);
|
||||
case /ii/.test(result):
|
||||
result = result.replace(boundary('ii'), d.fullMinutes);
|
||||
case /i/.test(result):
|
||||
result = result.replace(boundary('i'), d.minutes);
|
||||
case /hh/.test(result):
|
||||
result = result.replace(boundary('hh'), fullHours);
|
||||
case /h/.test(result):
|
||||
result = result.replace(boundary('h'), hours);
|
||||
case /yyyy/.test(result):
|
||||
result = result.replace(boundary('yyyy'), d.year);
|
||||
case /yyyy1/.test(result):
|
||||
@ -351,8 +428,33 @@
|
||||
len = selectedDates.length,
|
||||
newDate = '';
|
||||
|
||||
if (Array.isArray(date)) {
|
||||
date.forEach(function (d) {
|
||||
_this.selectDate(d)
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(date instanceof Date)) return;
|
||||
|
||||
this.lastSelectedDate = date;
|
||||
|
||||
// Set new time values from Date
|
||||
if (this.timepicker) {
|
||||
this.timepicker._setTime(date);
|
||||
}
|
||||
|
||||
// On this step timepicker will set valid values in it's instance
|
||||
_this._trigger('selectDate', date);
|
||||
|
||||
// Set correct time values after timepicker's validation
|
||||
// Prevent from setting hours or minutes which values are lesser then `min` value or
|
||||
// greater then `max` value
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes)
|
||||
}
|
||||
|
||||
if (_this.view == 'days') {
|
||||
if (date.getMonth() != d.month && opts.moveToOtherMonthsOnSelect) {
|
||||
newDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||||
@ -389,6 +491,11 @@
|
||||
} else {
|
||||
_this.minRange = date;
|
||||
}
|
||||
// Swap dates if they were selected via dp.selectDate() and second date was smaller then first
|
||||
if (datepicker.bigger(_this.maxRange, _this.minRange)) {
|
||||
_this.maxRange = _this.minRange;
|
||||
_this.minRange = date;
|
||||
}
|
||||
_this.selectedDates = [_this.minRange, _this.maxRange]
|
||||
|
||||
} else {
|
||||
@ -405,7 +512,7 @@
|
||||
_this._triggerOnChange();
|
||||
}
|
||||
|
||||
if (opts.autoClose) {
|
||||
if (opts.autoClose && !this.timepickerIsActive) {
|
||||
if (!opts.multipleDates && !opts.range) {
|
||||
_this.hide();
|
||||
} else if (opts.range && _this.selectedDates.length == 2) {
|
||||
@ -429,6 +536,9 @@
|
||||
if (!_this.selectedDates.length) {
|
||||
_this.minRange = '';
|
||||
_this.maxRange = '';
|
||||
_this.lastSelectedDate = '';
|
||||
} else {
|
||||
_this.lastSelectedDate = _this.selectedDates[_this.selectedDates.length - 1];
|
||||
}
|
||||
|
||||
_this.views[_this.currentView]._render();
|
||||
@ -448,6 +558,10 @@
|
||||
this.view = this.opts.minView;
|
||||
this.silent = false;
|
||||
this.date = new Date();
|
||||
|
||||
if (this.opts.todayButton instanceof Date) {
|
||||
this.selectDate(this.opts.todayButton)
|
||||
}
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
@ -468,6 +582,7 @@
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
} else if (len == 1 && typeof param == 'object') {
|
||||
@ -492,6 +607,19 @@
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -509,9 +637,14 @@
|
||||
},
|
||||
|
||||
_isSelected: function (checkDate, cellType) {
|
||||
return this.selectedDates.some(function (date) {
|
||||
return datepicker.isSame(date, checkDate, cellType)
|
||||
})
|
||||
var res = false;
|
||||
this.selectedDates.some(function (date) {
|
||||
if (datepicker.isSame(date, checkDate, cellType)) {
|
||||
res = date;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
|
||||
_setInputValue: function () {
|
||||
@ -911,7 +1044,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
_onShowEvent: function () {
|
||||
_onShowEvent: function (e) {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
}
|
||||
@ -929,10 +1062,11 @@
|
||||
|
||||
_onMouseUpDatepicker: function (e) {
|
||||
this.inFocus = false;
|
||||
this.$el.focus()
|
||||
e.originalEvent.inFocus = true;
|
||||
if (!e.originalEvent.timepickerFocus) this.$el.focus();
|
||||
},
|
||||
|
||||
_onInput: function () {
|
||||
_onKeyUpGeneral: function (e) {
|
||||
var val = this.$el.val();
|
||||
|
||||
if (!val) {
|
||||
@ -946,6 +1080,19 @@
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseUpBody: function (e) {
|
||||
if (e.originalEvent.inFocus) return;
|
||||
|
||||
if (this.visible && !this.inFocus) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseUpEl: function (e) {
|
||||
e.originalEvent.inFocus = true;
|
||||
setTimeout(this._onKeyUpGeneral.bind(this),4);
|
||||
},
|
||||
|
||||
_onKeyDown: function (e) {
|
||||
var code = e.which;
|
||||
this._registerKey(code);
|
||||
@ -966,6 +1113,10 @@
|
||||
var alreadySelected = this._isSelected(this.focused, this.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
if (this.timepicker) {
|
||||
this.focused.setHours(this.timepicker.hours);
|
||||
this.focused.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
this.selectDate(this.focused);
|
||||
} else if (alreadySelected && this.opts.toggleSelected){
|
||||
this.removeDate(this.focused);
|
||||
@ -1026,6 +1177,37 @@
|
||||
this.silent = false;
|
||||
},
|
||||
|
||||
_onTimeChange: function (e, h, m) {
|
||||
var date = new Date(),
|
||||
selectedDates = this.selectedDates,
|
||||
selected = false;
|
||||
|
||||
if (selectedDates.length) {
|
||||
selected = true;
|
||||
date = this.lastSelectedDate;
|
||||
}
|
||||
|
||||
date.setHours(h);
|
||||
date.setMinutes(m);
|
||||
|
||||
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
|
||||
this.selectDate(date);
|
||||
} else {
|
||||
this._setInputValue();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onClickCell: function (e, date) {
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
this.selectDate(date);
|
||||
},
|
||||
|
||||
set focused(val) {
|
||||
if (!val && this.focused) {
|
||||
var $cell = this._getCell(this.focused);
|
||||
@ -1086,7 +1268,7 @@
|
||||
|
||||
if (this.inited) {
|
||||
if (!this.views[val]) {
|
||||
this.views[val] = new Datepicker.Body(this, val, this.opts)
|
||||
this.views[val] = new $.fn.datepicker.Body(this, val, this.opts)
|
||||
} else {
|
||||
this.views[val]._render();
|
||||
}
|
||||
@ -1141,7 +1323,11 @@
|
||||
fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
|
||||
date: date.getDate(),
|
||||
fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
|
||||
day: date.getDay()
|
||||
day: date.getDay(),
|
||||
hours: date.getHours(),
|
||||
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
|
||||
minutes: date.getMinutes(),
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
}
|
||||
};
|
||||
|
||||
@ -1184,21 +1370,11 @@
|
||||
return date.getTime() > dateCompareTo.getTime();
|
||||
};
|
||||
|
||||
Datepicker.language = {
|
||||
ru: {
|
||||
days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
|
||||
monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
firstDay: 1
|
||||
}
|
||||
datepicker.getLeadingZeroNum = function (num) {
|
||||
return parseInt(num) < 10 ? '0' + num : num;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
$.fn.datepicker = function ( options ) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName,
|
||||
@ -1212,11 +1388,29 @@
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.datepicker.Constructor = Datepicker;
|
||||
|
||||
$.fn.datepicker.language = {
|
||||
ru: {
|
||||
days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
|
||||
monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$(autoInitSelector).datepicker();
|
||||
})
|
||||
|
||||
})();
|
||||
|
||||
;(function () {
|
||||
var templates = {
|
||||
days:'' +
|
||||
@ -1233,9 +1427,10 @@
|
||||
'<div class="datepicker--cells datepicker--cells-years"></div>' +
|
||||
'</div>'
|
||||
},
|
||||
D = Datepicker;
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
D.Body = function (d, type, opts) {
|
||||
datepicker.Body = function (d, type, opts) {
|
||||
this.d = d;
|
||||
this.type = type;
|
||||
this.opts = opts;
|
||||
@ -1243,7 +1438,7 @@
|
||||
this.init();
|
||||
};
|
||||
|
||||
D.Body.prototype = {
|
||||
datepicker.Body.prototype = {
|
||||
init: function () {
|
||||
this._buildBaseHtml();
|
||||
this._render();
|
||||
@ -1279,7 +1474,7 @@
|
||||
currentDate = new Date(),
|
||||
parent = this.d,
|
||||
opts = parent.opts,
|
||||
d = D.getParsedDate(date),
|
||||
d = dp.getParsedDate(date),
|
||||
render = {},
|
||||
html = d.date;
|
||||
|
||||
@ -1323,34 +1518,34 @@
|
||||
}
|
||||
|
||||
if (opts.range) {
|
||||
if (D.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (D.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
|
||||
if (parent.selectedDates.length == 1 && parent.focused) {
|
||||
if (
|
||||
(D.bigger(parent.minRange, date) && D.less(parent.focused, date)) ||
|
||||
(D.less(parent.maxRange, date) && D.bigger(parent.focused, date)))
|
||||
(dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
{
|
||||
classes += ' -in-range-'
|
||||
}
|
||||
|
||||
if (D.less(parent.maxRange, date) && D.isSame(parent.focused, date)) {
|
||||
if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-from-'
|
||||
}
|
||||
if (D.bigger(parent.minRange, date) && D.isSame(parent.focused, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-to-'
|
||||
}
|
||||
|
||||
} else if (parent.selectedDates.length == 2) {
|
||||
if (D.bigger(parent.minRange, date) && D.less(parent.maxRange, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
|
||||
classes += ' -in-range-'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (D.isSame(currentDate, date, type)) classes += ' -current-';
|
||||
if (parent.focused && D.isSame(date, parent.focused, type)) classes += ' -focus-';
|
||||
if (dp.isSame(currentDate, date, type)) classes += ' -current-';
|
||||
if (parent.focused && dp.isSame(date, parent.focused, type)) classes += ' -focus-';
|
||||
if (parent._isSelected(date, type)) classes += ' -selected-';
|
||||
if (!parent._isInRange(date, type) || render.disabled) classes += ' -disabled-';
|
||||
|
||||
@ -1367,7 +1562,7 @@
|
||||
* @private
|
||||
*/
|
||||
_getDaysHtml: function (date) {
|
||||
var totalMonthDays = D.getDaysCount(date),
|
||||
var totalMonthDays = dp.getDaysCount(date),
|
||||
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
|
||||
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
|
||||
daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
|
||||
@ -1407,7 +1602,7 @@
|
||||
*/
|
||||
_getMonthsHtml: function (date) {
|
||||
var html = '',
|
||||
d = D.getParsedDate(date),
|
||||
d = dp.getParsedDate(date),
|
||||
i = 0;
|
||||
|
||||
while(i < 12) {
|
||||
@ -1425,8 +1620,8 @@
|
||||
},
|
||||
|
||||
_getYearsHtml: function (date) {
|
||||
var d = D.getParsedDate(date),
|
||||
decade = D.getDecade(date),
|
||||
var d = dp.getParsedDate(date),
|
||||
decade = dp.getDecade(date),
|
||||
firstYear = decade[0] - 1,
|
||||
html = '',
|
||||
i = firstYear;
|
||||
@ -1509,9 +1704,15 @@
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
this.d.selectDate(selectedDate);
|
||||
this.d._trigger('clickCell', selectedDate);
|
||||
} else if (alreadySelected && this.opts.toggleSelected){
|
||||
this.d.removeDate(selectedDate);
|
||||
} else if (alreadySelected && !this.opts.toggleSelected) {
|
||||
this.d.lastSelectedDate = alreadySelected;
|
||||
if (this.d.opts.timepicker) {
|
||||
this.d.timepicker._setTime(alreadySelected);
|
||||
this.d.timepicker.update();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
@ -1532,9 +1733,11 @@
|
||||
'<div class="datepicker--nav-title">#{title}</div>' +
|
||||
'<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
|
||||
buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
|
||||
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
|
||||
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>',
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
Datepicker.Navigation = function (d, opts) {
|
||||
datepicker.Navigation = function (d, opts) {
|
||||
this.d = d;
|
||||
this.opts = opts;
|
||||
|
||||
@ -1543,7 +1746,7 @@
|
||||
this.init();
|
||||
};
|
||||
|
||||
Datepicker.Navigation.prototype = {
|
||||
datepicker.Navigation.prototype = {
|
||||
init: function () {
|
||||
this._buildBaseHtml();
|
||||
this._bindEvents();
|
||||
@ -1571,7 +1774,7 @@
|
||||
|
||||
_render: function () {
|
||||
var title = this._getTitle(this.d.currentDate),
|
||||
html = Datepicker.template(template, $.extend({title: title}, this.opts));
|
||||
html = dp.template(template, $.extend({title: title}, this.opts));
|
||||
this.d.$nav.html(html);
|
||||
if (this.d.view == 'years') {
|
||||
$('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
|
||||
@ -1592,7 +1795,7 @@
|
||||
action: type,
|
||||
label: this.d.loc[type]
|
||||
},
|
||||
html = Datepicker.template(button, data);
|
||||
html = dp.template(button, data);
|
||||
|
||||
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
|
||||
this.$buttonsContainer.append(html);
|
||||
@ -1665,5 +1868,265 @@
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
;(function () {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<div class="datepicker--time-current">' +
|
||||
' <span class="datepicker--time-current-hours">#{hourValue}</span>' +
|
||||
' <span class="datepicker--time-current-colon">:</span>' +
|
||||
' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
' </div>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
datepicker.Timepicker = function (inst, opts) {
|
||||
this.d = inst;
|
||||
this.opts = opts;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
datepicker.Timepicker.prototype = {
|
||||
init: function () {
|
||||
var input = 'input';
|
||||
this._setTime(this.d.date);
|
||||
this._buildHTML();
|
||||
|
||||
if (navigator.userAgent.match(/trident/gi)) {
|
||||
input = 'change';
|
||||
}
|
||||
|
||||
this.d.$el.on('selectDate', this._onSelectDate.bind(this));
|
||||
this.$ranges.on(input, this._onChangeRange.bind(this));
|
||||
this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
|
||||
this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
|
||||
this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
|
||||
},
|
||||
|
||||
_setTime: function (date) {
|
||||
var _date = dp.getParsedDate(date);
|
||||
|
||||
this._handleDate(date);
|
||||
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
|
||||
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
|
||||
},
|
||||
|
||||
_setMinTimeFromDate: function (date) {
|
||||
this.minHours = date.getHours();
|
||||
this.minMinutes = date.getMinutes();
|
||||
},
|
||||
|
||||
_setMaxTimeFromDate: function (date) {
|
||||
this.maxHours = date.getHours();
|
||||
this.maxMinutes = date.getMinutes();
|
||||
},
|
||||
|
||||
_setDefaultMinMaxTime: function () {
|
||||
var maxHours = 23,
|
||||
maxMinutes = 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;
|
||||
},
|
||||
|
||||
/**
|
||||
* Looks for min/max hours/minutes and if current values
|
||||
* are out of range sets valid values.
|
||||
* @private
|
||||
*/
|
||||
_validateHoursMinutes: function (date) {
|
||||
if (this.hours < this.minHours) {
|
||||
this.hours = this.minHours;
|
||||
} else if (this.hours > this.maxHours) {
|
||||
this.hours = this.maxHours;
|
||||
}
|
||||
|
||||
if (this.minutes < this.minMinutes) {
|
||||
this.minutes = this.minMinutes;
|
||||
} else if (this.minutes > this.maxMinutes) {
|
||||
this.minutes = this.maxMinutes;
|
||||
}
|
||||
},
|
||||
|
||||
_buildHTML: function () {
|
||||
var lz = dp.getLeadingZeroNum,
|
||||
data = {
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
minValue: lz(this.minutes)
|
||||
},
|
||||
_template = dp.template(template, data);
|
||||
|
||||
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
|
||||
this.$ranges = $('[type="range"]', this.$timepicker);
|
||||
this.$hours = $('[name="hours"]', this.$timepicker);
|
||||
this.$minutes = $('[name="minutes"]', this.$timepicker);
|
||||
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
|
||||
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker))
|
||||
.html(this.dayPeriod);
|
||||
|
||||
this.$timepicker.addClass('-am-pm-');
|
||||
}
|
||||
},
|
||||
|
||||
_updateCurrentTime: function () {
|
||||
var h = dp.getLeadingZeroNum(this.displayHours),
|
||||
m = dp.getLeadingZeroNum(this.minutes);
|
||||
|
||||
this.$hoursText.html(h);
|
||||
this.$minutesText.html(m);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm.html(this.dayPeriod);
|
||||
}
|
||||
},
|
||||
|
||||
_updateRanges: function () {
|
||||
this.$hours.attr({
|
||||
min: this.minHours,
|
||||
max: this.maxHours
|
||||
}).val(this.hours);
|
||||
|
||||
this.$minutes.attr({
|
||||
min: this.minMinutes,
|
||||
max: this.maxMinutes
|
||||
}).val(this.minutes)
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets minHours, minMinutes etc. from date. If date is not passed, than sets
|
||||
* values from options
|
||||
* @param [date] {object} - Date object, to get values from
|
||||
* @private
|
||||
*/
|
||||
_handleDate: function (date) {
|
||||
this._setDefaultMinMaxTime();
|
||||
|
||||
if (date) {
|
||||
if (dp.isSame(date, this.d.opts.minDate)) {
|
||||
this._setMinTimeFromDate(this.d.opts.minDate);
|
||||
} else if (dp.isSame(date, this.d.opts.maxDate)) {
|
||||
this._setMaxTimeFromDate(this.d.opts.maxDate);
|
||||
}
|
||||
}
|
||||
|
||||
this._validateHoursMinutes(date);
|
||||
},
|
||||
|
||||
update: function () {
|
||||
this._updateRanges();
|
||||
this._updateCurrentTime();
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates valid hour value to display in text input and datepicker's body.
|
||||
* @param date {Date|Number} - date or hours
|
||||
* @returns {{hours: *, dayPeriod: string}}
|
||||
* @private
|
||||
*/
|
||||
_getValidHoursFromDate: function (date) {
|
||||
var d = date,
|
||||
hours = date;
|
||||
|
||||
if (date instanceof Date) {
|
||||
d = dp.getParsedDate(date);
|
||||
hours = d.hours;
|
||||
}
|
||||
|
||||
var ampm = this.d.ampm,
|
||||
dayPeriod = 'am';
|
||||
|
||||
if (ampm) {
|
||||
switch(true) {
|
||||
case hours == 0:
|
||||
hours = 12;
|
||||
break;
|
||||
case hours == 12:
|
||||
dayPeriod = 'pm';
|
||||
break;
|
||||
case hours > 11:
|
||||
hours = hours - 12;
|
||||
dayPeriod = 'pm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hours: hours,
|
||||
dayPeriod: dayPeriod
|
||||
}
|
||||
},
|
||||
|
||||
set hours (val) {
|
||||
this._hours = val;
|
||||
|
||||
var displayHours = this._getValidHoursFromDate(val);
|
||||
|
||||
this.displayHours = displayHours.hours;
|
||||
this.dayPeriod = displayHours.dayPeriod;
|
||||
},
|
||||
|
||||
get hours() {
|
||||
return this._hours;
|
||||
},
|
||||
|
||||
// Events
|
||||
// -------------------------------------------------
|
||||
|
||||
_onChangeRange: function (e) {
|
||||
var $target = $(e.target),
|
||||
name = $target.attr('name');
|
||||
|
||||
this.d.timepickerIsActive = true;
|
||||
|
||||
this[name] = $target.val();
|
||||
this._updateCurrentTime();
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes])
|
||||
},
|
||||
|
||||
_onSelectDate: function (e, data) {
|
||||
this._handleDate(data);
|
||||
this.update();
|
||||
},
|
||||
|
||||
_onMouseEnterRange: function (e) {
|
||||
var name = $(e.target).attr('name');
|
||||
$('.datepicker--time-current-' + name, this.$timepicker).addClass('-focus-');
|
||||
},
|
||||
|
||||
_onMouseOutRange: function (e) {
|
||||
var name = $(e.target).attr('name');
|
||||
if (this.d.inFocus) return; // Prevent removing focus when mouse out of range slider
|
||||
$('.datepicker--time-current-' + name, this.$timepicker).removeClass('-focus-');
|
||||
},
|
||||
|
||||
_onMouseUpRange: function (e) {
|
||||
this.d.timepickerIsActive = false;
|
||||
}
|
||||
};
|
||||
})();
|
||||
})(window, jQuery);
|
||||
3
dist/js/datepicker.min.js
vendored
3
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
12
dist/js/i18n/datepicker.da.js
vendored
Normal file
12
dist/js/i18n/datepicker.da.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['da'] = {
|
||||
days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
|
||||
daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
|
||||
daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
|
||||
months: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'I dag',
|
||||
clear: 'Nulstil',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
4
dist/js/i18n/datepicker.de.js
vendored
4
dist/js/i18n/datepicker.de.js
vendored
@ -1,4 +1,4 @@
|
||||
Datepicker.language['de'] = {
|
||||
;(function ($) { $.fn.datepicker.language['de'] = {
|
||||
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
|
||||
daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
|
||||
daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
|
||||
@ -7,5 +7,7 @@ Datepicker.language['de'] = {
|
||||
today: 'Heute',
|
||||
clear: 'Aufräumen',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
9
dist/js/i18n/datepicker.en.js
vendored
9
dist/js/i18n/datepicker.en.js
vendored
@ -1,4 +1,5 @@
|
||||
Datepicker.language['en'] = {
|
||||
;(function ($) {
|
||||
$.fn.datepicker.language['en'] = {
|
||||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
@ -6,6 +7,8 @@ Datepicker.language['en'] = {
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy',
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 0
|
||||
};
|
||||
};
|
||||
})(jQuery);
|
||||
12
dist/js/i18n/datepicker.nl.js
vendored
Normal file
12
dist/js/i18n/datepicker.nl.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['nl'] = {
|
||||
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
|
||||
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'Vandaag',
|
||||
clear: 'Legen',
|
||||
dateFormat: 'dd-MM-yy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
12
dist/js/i18n/datepicker.pt-BR.js
vendored
Normal file
12
dist/js/i18n/datepicker.pt-BR.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['pt-BR'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
12
dist/js/i18n/datepicker.pt.js
vendored
Normal file
12
dist/js/i18n/datepicker.pt.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['pt'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
13
dist/js/i18n/datepicker.ro.js
vendored
Normal file
13
dist/js/i18n/datepicker.ro.js
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
;(function ($) { $.fn.datepicker.language['ro'] = {
|
||||
days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
|
||||
daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
|
||||
daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
|
||||
months: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
|
||||
monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Azi',
|
||||
clear: 'Şterge',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
5
dist/js/i18n/datepicker.zh.js
vendored
5
dist/js/i18n/datepicker.zh.js
vendored
@ -1,4 +1,4 @@
|
||||
Datepicker.language['zh'] = {
|
||||
;(function ($) { $.fn.datepicker.language['zh'] = {
|
||||
days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
daysShort: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
@ -7,5 +7,6 @@ Datepicker.language['zh'] = {
|
||||
today: '今天',
|
||||
clear: '清除',
|
||||
dateFormat: 'yyyy-mm-dd',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
}; })(jQuery);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,10 +1,10 @@
|
||||
mixin param-header(name, type, defaults)
|
||||
mixin param-header(name, type, defaults, id)
|
||||
-var typeLabel = 'Тип';
|
||||
-var defaultLabel = 'Значение по умолчанию';
|
||||
-if (lang == 'en') {typeLabel = 'Type'; defaultLabel = 'Defaults'};
|
||||
|
||||
header.param-header
|
||||
h3= name
|
||||
h3(id = id)= name
|
||||
if type
|
||||
p.param-header--row
|
||||
span.param-header--label= typeLabel
|
||||
|
||||
@ -17,7 +17,7 @@ block content
|
||||
article
|
||||
h2#intro Описание
|
||||
p
|
||||
| Легкий (<i><strong>~26kb</strong> минифицированный js файл и <strong>~7kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
|
||||
| Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
|
||||
+example-inline('es5')
|
||||
| и
|
||||
+example-inline('css flexbox', 'js')
|
||||
@ -277,6 +277,147 @@ block content
|
||||
var currentDate = currentDate = new Date();
|
||||
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
|
||||
|
||||
article
|
||||
h2#timepicker Выбор времени
|
||||
p Для выбора времени используйте опцию
|
||||
+example-inline('{timepicker: true}', 'js')
|
||||
| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
|
||||
p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
|
||||
+example-inline('startDate', 'js')
|
||||
|.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
div.datepicker-here(data-timepicker='true')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true"></div>
|
||||
p
|
||||
i Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker' class='nav-link'>Опциях</a>.
|
||||
|
||||
|
||||
h3#timepicker-format Формат времени
|
||||
p Формат времени задается в объекте локализации, либо в парамтре
|
||||
+example-inline('timeFormat', 'js')
|
||||
|. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
||||
+example-inline('timeFormat', 'js')
|
||||
| нужно добавить символ
|
||||
+example-inline('aa', 'js')
|
||||
| или
|
||||
+example-inline('AA', 'js')
|
||||
| . После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
||||
|
||||
h3#timeformat-actions Действия со временем
|
||||
p Для задания максимально/минимально возможных значений часов или минут используйте параметры
|
||||
+example-inline('maxHours','js')
|
||||
|,
|
||||
+example-inline('minHours','js')
|
||||
|,
|
||||
+example-inline('maxMinutes','js')
|
||||
|,
|
||||
+example-inline('minMinutes','js')
|
||||
|. Также время можно указывать в парамтерах
|
||||
+example-inline('minDate','js')
|
||||
| и
|
||||
+example-inline('maxDate','js')
|
||||
p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input(type='text')#timepicker-actions-exmpl
|
||||
script.
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// Если сегодня суббота или воскресенье - 10:00
|
||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function(fd, d, picker) {
|
||||
// Ничего не делаем если выделение было снято
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
+example-code
|
||||
:code
|
||||
<input type='text' id='timepicker-actions-exmpl' />
|
||||
<script>
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// Если сегодня суббота или воскресенье - 10:00
|
||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function(fd, d, picker) {
|
||||
// Ничего не делаем если выделение было снято
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
article
|
||||
h2#localization Локализация
|
||||
p
|
||||
@ -317,6 +458,7 @@ block content
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
|
||||
@ -526,8 +668,13 @@ block content
|
||||
p Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован
|
||||
+example-inline('multipleDatesSeparator')
|
||||
.param
|
||||
+param-header('todayButton', 'boolean', 'false')
|
||||
p Если true, то будет отображена кнопка "Сегодня".
|
||||
+param-header('todayButton', 'boolean|Date', 'false')
|
||||
p Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.
|
||||
+example-code('js').
|
||||
// Выбор сегодняшнего дня
|
||||
$('.datepicker').datepicker({
|
||||
todayButton: new Date()
|
||||
})
|
||||
|
||||
.param
|
||||
+param-header('clearButton', 'boolean', 'false')
|
||||
@ -575,6 +722,69 @@ block content
|
||||
+example-inline('view = "months"', 'js')
|
||||
| .
|
||||
|
||||
.param
|
||||
+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
|
||||
p Если
|
||||
+example-inline('true')
|
||||
| , то будет добавлена возомжность выбора времени.
|
||||
|
||||
.param
|
||||
+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
|
||||
p Разделитель между датой и временем.
|
||||
|
||||
.param
|
||||
+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
|
||||
p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
|
||||
| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
|
||||
+example-inline('timeFormat','js')
|
||||
|, например
|
||||
+example-inline('{timeFormat: "hh:ii AA"}','js')
|
||||
| Возможные варианты:
|
||||
ul
|
||||
li
|
||||
+param('h')
|
||||
| - часы
|
||||
li
|
||||
+param('hh')
|
||||
| - часы, с лидирующим нулем
|
||||
li
|
||||
+param('i')
|
||||
| - минуты
|
||||
li
|
||||
+param('ii')
|
||||
| - минуты, с лидирующим нулем
|
||||
li
|
||||
+param('aa')
|
||||
| - период дня - 'am' или 'pm'
|
||||
li
|
||||
+param('AA')
|
||||
| - период дня заглавными буквами
|
||||
|
||||
.param
|
||||
+param-header('minHours', 'number', '0', 'opts-minHours')
|
||||
p Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.
|
||||
|
||||
.param
|
||||
+param-header('maxHours', 'number', '23', 'opts-maxHours')
|
||||
p Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.
|
||||
|
||||
.param
|
||||
+param-header('minMinutes', 'number', '0', 'opts-minMinutes')
|
||||
p Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.
|
||||
|
||||
.param
|
||||
+param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
|
||||
p Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.
|
||||
|
||||
.param
|
||||
+param-header('hoursStep', 'number', '1', 'opts-hoursStep')
|
||||
p Шаг выбора часов.
|
||||
|
||||
.param
|
||||
+param-header('minutesStep', 'number', '1', 'opts-minutesStep')
|
||||
p Шаг выбора минут.
|
||||
|
||||
|
||||
article
|
||||
h2#events События
|
||||
.param
|
||||
|
||||
@ -17,7 +17,7 @@ block content
|
||||
article
|
||||
h2#intro Description
|
||||
p
|
||||
| Light (<i><strong>~26kb</strong> minified js file and <strong>~7kb</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')
|
||||
@ -270,6 +270,151 @@ block content
|
||||
var currentDate = currentDate = new Date();
|
||||
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
|
||||
|
||||
article
|
||||
h2#timepicker Timepicker
|
||||
p To enable timepicker use option
|
||||
+example-inline('{timepicker: true}', 'js')
|
||||
| - it will add current time and a couple of range sliders by which one can pick time.
|
||||
p By default current user time will be set. This value can be changed by
|
||||
+example-inline('startDate', 'js')
|
||||
| parameter.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
div.datepicker-here(data-timepicker='true', data-language='en')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
|
||||
p
|
||||
i More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.
|
||||
|
||||
|
||||
h3#timepicker-format Time format
|
||||
p Time format is defined in localization object or in
|
||||
+example-inline('timeFormat', 'js')
|
||||
| parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add
|
||||
+example-inline('aa', 'js')
|
||||
| or
|
||||
+example-inline('AA', 'js')
|
||||
| symbol in
|
||||
+example-inline('timeFormat', 'js')
|
||||
|. After what 'AM' and 'PM' sings will appear in timepicker widget.
|
||||
|
||||
p Lets use 12 hours mode in Russian language:
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
|
||||
+example-code
|
||||
:code
|
||||
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
||||
|
||||
h3#timeformat-actions Actions with time
|
||||
p For setting max/min hours or minutes values use
|
||||
+example-inline('maxHours','js')
|
||||
| ,
|
||||
+example-inline('minHours','js')
|
||||
| ,
|
||||
+example-inline('maxMinutes','js')
|
||||
| ,
|
||||
+example-inline('minMinutes','js')
|
||||
| . You also could set time in
|
||||
+example-inline('minDate','js')
|
||||
| and
|
||||
+example-inline('maxDate','js')
|
||||
|. 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 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.
|
||||
|
||||
+example
|
||||
+example-content
|
||||
input(type='text')#timepicker-actions-exmpl
|
||||
script.
|
||||
// Create start date
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00 AM
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// If today is Saturday or Sunday set 10:00 AM
|
||||
if ([6, 0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
language: 'en',
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function (fd, d, picker) {
|
||||
// Do nothing if selection was cleared
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// If chosen day is Saturday or Sunday when set
|
||||
// hour value for weekends, else restore defaults
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
+example-code
|
||||
:code
|
||||
<input type='text' id='timepicker-actions-exmpl' />
|
||||
<script>
|
||||
// Create start date
|
||||
var start = new Date(),
|
||||
startHours = 9;
|
||||
|
||||
// 09:00 AM
|
||||
start.setHours(9);
|
||||
start.setMinutes(0);
|
||||
|
||||
// If today is Saturday or Sunday set 10:00 AM
|
||||
if ([6, 0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
|
||||
$('#timepicker-actions-exmpl').datepicker({
|
||||
timepicker: true,
|
||||
language: 'en',
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function (fd, d, picker) {
|
||||
// Do nothing if selection was cleared
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
// If chosen day is Saturday or Sunday when set
|
||||
// hour value for weekends, else restore defaults
|
||||
if (day == 6 || day == 0) {
|
||||
picker.update({
|
||||
minHours: 10,
|
||||
maxHours: 16
|
||||
})
|
||||
} else {
|
||||
picker.update({
|
||||
minHours: 9,
|
||||
maxHours: 18
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
article
|
||||
h2#localization Localization
|
||||
p
|
||||
@ -306,7 +451,8 @@ block content
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy',
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa'
|
||||
firstDay: 0
|
||||
};
|
||||
p Available localizations located in
|
||||
@ -499,8 +645,13 @@ block content
|
||||
+example-inline('multipleDatesSeparator')
|
||||
| will be used as dates separator.
|
||||
.param
|
||||
+param-header('todayButton', 'boolean', 'false')
|
||||
p If true, then button "Today" will be visible.
|
||||
+param-header('todayButton', 'boolean|Date', 'false')
|
||||
p If true, then button "Today" will be visible. If Date is passed then click event will also select passed date.
|
||||
+example-code('js').
|
||||
// Select today
|
||||
$('.datepicker').datepicker({
|
||||
todayButton: new Date()
|
||||
})
|
||||
.param
|
||||
+param-header('clearButton', 'boolean', 'false')
|
||||
p If true, then button "Clear" will be visible.
|
||||
@ -540,6 +691,69 @@ block content
|
||||
+param-header('monthsField','string','"monthsShort"')
|
||||
p Field name from localization object which should be used as months names, when view is 'months'.
|
||||
|
||||
.param
|
||||
+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
|
||||
p If
|
||||
+example-inline('true')
|
||||
| , when timepicker widget will be added.
|
||||
|
||||
.param
|
||||
+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
|
||||
p Separator between date and time
|
||||
|
||||
.param
|
||||
+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
|
||||
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
|
||||
+example-inline('timeFormat','js')
|
||||
| parameter, e.g.
|
||||
+example-inline('{timeFormat: "hh:ii AA"}','js')
|
||||
| Possible values are:
|
||||
ul
|
||||
li
|
||||
+param('h')
|
||||
| - hours
|
||||
li
|
||||
+param('hh')
|
||||
| - hours with leading zero
|
||||
li
|
||||
+param('i')
|
||||
| - minutes
|
||||
li
|
||||
+param('ii')
|
||||
| - minutes with leading zero
|
||||
li
|
||||
+param('aa')
|
||||
| - day period - 'am' or 'pm'
|
||||
li
|
||||
+param('AA')
|
||||
| - day period capitalized
|
||||
|
||||
.param
|
||||
+param-header('minHours', 'number', '0', 'opts-minHours')
|
||||
p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
|
||||
|
||||
.param
|
||||
+param-header('maxHours', 'number', '23', 'opts-maxHours')
|
||||
p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
|
||||
|
||||
.param
|
||||
+param-header('minMinutes', 'number', '0', 'opts-minMinutes')
|
||||
p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
|
||||
|
||||
.param
|
||||
+param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
|
||||
p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
|
||||
|
||||
.param
|
||||
+param-header('hoursStep', 'number', '1', 'opts-hoursStep')
|
||||
p Hours step in slider.
|
||||
|
||||
.param
|
||||
+param-header('minutesStep', 'number', '1', 'opts-minutesStep')
|
||||
p Minutes step in slider.
|
||||
|
||||
article
|
||||
h2#events Events
|
||||
.param
|
||||
|
||||
@ -60,7 +60,6 @@ var navigation;
|
||||
var id,
|
||||
title,
|
||||
subTitles,
|
||||
subId,
|
||||
$subTitle,
|
||||
$current;
|
||||
|
||||
@ -80,8 +79,13 @@ var navigation;
|
||||
cache[id].subSections = {};
|
||||
|
||||
subTitles.each(function () {
|
||||
subId = idPrefix + idCounter++;
|
||||
$subTitle = $(this).attr('id', subId);
|
||||
var $subTitle = $(this),
|
||||
subId = $(this).attr('id');
|
||||
|
||||
if (!subId) {
|
||||
subId = idPrefix + idCounter++;
|
||||
$subTitle.attr('id', subId);
|
||||
}
|
||||
|
||||
cache[id].subSections[subId] = {
|
||||
title: $subTitle.text(),
|
||||
|
||||
@ -438,4 +438,72 @@ a {
|
||||
background: #fff;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
// Visual tests
|
||||
// -------------------------------------------------
|
||||
|
||||
.visual-tests {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 120px;
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
article:last-child {
|
||||
.row {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vt-tile {
|
||||
padding: 16px;
|
||||
width: 284px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
margin: 0 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.v-log {
|
||||
position: fixed;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
z-index: 10;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: greenyellow;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
@ -30,6 +30,9 @@ gulp.task('watch', function () {
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('dev', ['css','js','i18n', 'cssPage', 'jade-ru', 'jade-en', 'watch']);
|
||||
gulp.task('build', ['css','js','i18n', 'jade-ru',' jade-en']);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
35
package.json
35
package.json
@ -1,8 +1,9 @@
|
||||
{
|
||||
"name": "air-datepicker",
|
||||
"version": "1.2.1",
|
||||
"version": "2.0.0",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.1.0",
|
||||
"browserify": "^13.0.0",
|
||||
"chai": "^3.4.1",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-clone": "^1.0.0",
|
||||
@ -19,6 +20,34 @@
|
||||
"gulp-watch": "^4.3.5",
|
||||
"gulp-wrap": "^0.11.0",
|
||||
"jade": "^1.11.0",
|
||||
"mocha": "^2.3.4"
|
||||
}
|
||||
"mocha": "^2.3.4",
|
||||
"node-static": "^0.7.7",
|
||||
"vinyl-source-stream": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^2.2.3"
|
||||
},
|
||||
"description": "Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)\r ",
|
||||
"main": "src/js/air-datepicker.js",
|
||||
"directories": {
|
||||
"doc": "docs",
|
||||
"test": "tests"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/t1m0n/air-datepicker.git"
|
||||
},
|
||||
"keywords": [
|
||||
"datepicker",
|
||||
"timepicker",
|
||||
"plugin",
|
||||
"customizable",
|
||||
"powerful"
|
||||
],
|
||||
"author": "t1m0n <t1m0n.tr@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/t1m0n/air-datepicker/issues"
|
||||
},
|
||||
"homepage": "http://t1m0n.name/air-datepicker/docs/"
|
||||
}
|
||||
|
||||
4
src/js/air-datepicker.js
Normal file
4
src/js/air-datepicker.js
Normal file
@ -0,0 +1,4 @@
|
||||
require('./datepicker');
|
||||
require('./body');
|
||||
require('./navigation');
|
||||
require('./timepicker');
|
||||
@ -14,9 +14,10 @@
|
||||
'<div class="datepicker--cells datepicker--cells-years"></div>' +
|
||||
'</div>'
|
||||
},
|
||||
D = Datepicker;
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
D.Body = function (d, type, opts) {
|
||||
datepicker.Body = function (d, type, opts) {
|
||||
this.d = d;
|
||||
this.type = type;
|
||||
this.opts = opts;
|
||||
@ -24,7 +25,7 @@
|
||||
this.init();
|
||||
};
|
||||
|
||||
D.Body.prototype = {
|
||||
datepicker.Body.prototype = {
|
||||
init: function () {
|
||||
this._buildBaseHtml();
|
||||
this._render();
|
||||
@ -60,7 +61,7 @@
|
||||
currentDate = new Date(),
|
||||
parent = this.d,
|
||||
opts = parent.opts,
|
||||
d = D.getParsedDate(date),
|
||||
d = dp.getParsedDate(date),
|
||||
render = {},
|
||||
html = d.date;
|
||||
|
||||
@ -104,34 +105,34 @@
|
||||
}
|
||||
|
||||
if (opts.range) {
|
||||
if (D.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (D.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
|
||||
if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
|
||||
|
||||
if (parent.selectedDates.length == 1 && parent.focused) {
|
||||
if (
|
||||
(D.bigger(parent.minRange, date) && D.less(parent.focused, date)) ||
|
||||
(D.less(parent.maxRange, date) && D.bigger(parent.focused, date)))
|
||||
(dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
|
||||
(dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
|
||||
{
|
||||
classes += ' -in-range-'
|
||||
}
|
||||
|
||||
if (D.less(parent.maxRange, date) && D.isSame(parent.focused, date)) {
|
||||
if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-from-'
|
||||
}
|
||||
if (D.bigger(parent.minRange, date) && D.isSame(parent.focused, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
|
||||
classes += ' -range-to-'
|
||||
}
|
||||
|
||||
} else if (parent.selectedDates.length == 2) {
|
||||
if (D.bigger(parent.minRange, date) && D.less(parent.maxRange, date)) {
|
||||
if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
|
||||
classes += ' -in-range-'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (D.isSame(currentDate, date, type)) classes += ' -current-';
|
||||
if (parent.focused && D.isSame(date, parent.focused, type)) classes += ' -focus-';
|
||||
if (dp.isSame(currentDate, date, type)) classes += ' -current-';
|
||||
if (parent.focused && dp.isSame(date, parent.focused, type)) classes += ' -focus-';
|
||||
if (parent._isSelected(date, type)) classes += ' -selected-';
|
||||
if (!parent._isInRange(date, type) || render.disabled) classes += ' -disabled-';
|
||||
|
||||
@ -148,7 +149,7 @@
|
||||
* @private
|
||||
*/
|
||||
_getDaysHtml: function (date) {
|
||||
var totalMonthDays = D.getDaysCount(date),
|
||||
var totalMonthDays = dp.getDaysCount(date),
|
||||
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
|
||||
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
|
||||
daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
|
||||
@ -188,7 +189,7 @@
|
||||
*/
|
||||
_getMonthsHtml: function (date) {
|
||||
var html = '',
|
||||
d = D.getParsedDate(date),
|
||||
d = dp.getParsedDate(date),
|
||||
i = 0;
|
||||
|
||||
while(i < 12) {
|
||||
@ -206,8 +207,8 @@
|
||||
},
|
||||
|
||||
_getYearsHtml: function (date) {
|
||||
var d = D.getParsedDate(date),
|
||||
decade = D.getDecade(date),
|
||||
var d = dp.getParsedDate(date),
|
||||
decade = dp.getDecade(date),
|
||||
firstYear = decade[0] - 1,
|
||||
html = '',
|
||||
i = firstYear;
|
||||
@ -290,9 +291,15 @@
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
this.d.selectDate(selectedDate);
|
||||
this.d._trigger('clickCell', selectedDate);
|
||||
} else if (alreadySelected && this.opts.toggleSelected){
|
||||
this.d.removeDate(selectedDate);
|
||||
} else if (alreadySelected && !this.opts.toggleSelected) {
|
||||
this.d.lastSelectedDate = alreadySelected;
|
||||
if (this.d.opts.timepicker) {
|
||||
this.d.timepicker._setTime(alreadySelected);
|
||||
this.d.timepicker.update();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
window.Datepicker = '';
|
||||
|
||||
(function () {
|
||||
;(function () {
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
@ -62,6 +60,17 @@ window.Datepicker = '';
|
||||
years: 'yyyy1 - yyyy2'
|
||||
},
|
||||
|
||||
// timepicker
|
||||
timepicker: false,
|
||||
dateTimeSeparator: ' ',
|
||||
timeFormat: '',
|
||||
minHours: 0,
|
||||
maxHours: 24,
|
||||
minMinutes: 0,
|
||||
maxMinutes: 59,
|
||||
hoursStep: 1,
|
||||
minutesStep: 1,
|
||||
|
||||
// events
|
||||
onSelect: '',
|
||||
onChangeMonth: '',
|
||||
@ -87,7 +96,7 @@ window.Datepicker = '';
|
||||
},
|
||||
datepicker;
|
||||
|
||||
Datepicker = function (el, options) {
|
||||
var Datepicker = function (el, options) {
|
||||
this.el = el;
|
||||
this.$el = $(el);
|
||||
|
||||
@ -121,6 +130,7 @@ window.Datepicker = '';
|
||||
this.keys = [];
|
||||
this.minRange = '';
|
||||
this.maxRange = '';
|
||||
this._prevOnSelectValue = '';
|
||||
|
||||
this.init()
|
||||
};
|
||||
@ -155,11 +165,17 @@ window.Datepicker = '';
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker = new $.fn.datepicker.Timepicker(this, this.opts);
|
||||
this._bindTimepickerEvents();
|
||||
}
|
||||
|
||||
this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
|
||||
this.views[this.currentView].show();
|
||||
this.nav = new Datepicker.Navigation(this, this.opts);
|
||||
this.nav = new $.fn.datepicker.Navigation(this, this.opts);
|
||||
this.view = this.currentView;
|
||||
|
||||
this.$el.on('clickCell.adp', this._onClickCell.bind(this));
|
||||
this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
|
||||
this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
|
||||
|
||||
@ -173,9 +189,11 @@ window.Datepicker = '';
|
||||
|
||||
_bindEvents : function () {
|
||||
this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
|
||||
this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
|
||||
this.$el.on('blur.adp', this._onBlur.bind(this));
|
||||
this.$el.on('input.adp', this._onInput.bind(this));
|
||||
this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
|
||||
$(window).on('resize.adp', this._onResize.bind(this));
|
||||
$('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
|
||||
},
|
||||
|
||||
_bindKeyboardEvents: function () {
|
||||
@ -184,30 +202,49 @@ window.Datepicker = '';
|
||||
this.$el.on('hotKey.adp', this._onHotKey.bind(this));
|
||||
},
|
||||
|
||||
_bindTimepickerEvents: function () {
|
||||
this.$el.on('timeChange.adp', this._onTimeChange.bind(this));
|
||||
},
|
||||
|
||||
isWeekend: function (day) {
|
||||
return this.opts.weekends.indexOf(day) !== -1;
|
||||
},
|
||||
|
||||
_defineLocale: function (lang) {
|
||||
if (typeof lang == 'string') {
|
||||
this.loc = Datepicker.language[lang];
|
||||
this.loc = $.fn.datepicker.language[lang];
|
||||
if (!this.loc) {
|
||||
console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru)
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru)
|
||||
}
|
||||
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, $.fn.datepicker.language[lang])
|
||||
} else {
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
|
||||
this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, lang)
|
||||
}
|
||||
|
||||
if (this.opts.dateFormat) {
|
||||
this.loc.dateFormat = this.opts.dateFormat
|
||||
}
|
||||
|
||||
if (this.opts.timeFormat) {
|
||||
this.loc.timeFormat = this.opts.timeFormat
|
||||
}
|
||||
|
||||
if (this.opts.firstDay !== '') {
|
||||
this.loc.firstDay = this.opts.firstDay
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
|
||||
}
|
||||
|
||||
var boundary = this._getWordBoundaryRegExp;
|
||||
if (this.loc.timeFormat.match(boundary('aa')) ||
|
||||
this.loc.timeFormat.match(boundary('AA'))
|
||||
) {
|
||||
this.ampm = true;
|
||||
}
|
||||
},
|
||||
|
||||
_buildDatepickersContainer: function () {
|
||||
@ -237,6 +274,9 @@ window.Datepicker = '';
|
||||
|
||||
_triggerOnChange: function () {
|
||||
if (!this.selectedDates.length) {
|
||||
// Prevent from triggering multiple onSelect callback with same argument (empty string) in IE10-11
|
||||
if (this._prevOnSelectValue === '') return;
|
||||
this._prevOnSelectValue = '';
|
||||
return this.opts.onSelect('', '', this);
|
||||
}
|
||||
|
||||
@ -244,7 +284,13 @@ window.Datepicker = '';
|
||||
parsedSelected = datepicker.getParsedDate(selectedDates[0]),
|
||||
formattedDates,
|
||||
_this = this,
|
||||
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
|
||||
dates = new Date(
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
|
||||
formattedDates = selectedDates.map(function (date) {
|
||||
return _this.formatDate(_this.loc.dateFormat, date)
|
||||
@ -254,10 +300,17 @@ window.Datepicker = '';
|
||||
if (this.opts.multipleDates || this.opts.range) {
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
|
||||
return new Date(
|
||||
parsedSelected.year,
|
||||
parsedSelected.month,
|
||||
parsedSelected.date,
|
||||
parsedSelected.hours,
|
||||
parsedSelected.minutes
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
this._prevOnSelectValue = formattedDates;
|
||||
this.opts.onSelect(formattedDates, dates, this);
|
||||
},
|
||||
|
||||
@ -304,12 +357,28 @@ window.Datepicker = '';
|
||||
var result = string,
|
||||
boundary = this._getWordBoundaryRegExp,
|
||||
locale = this.loc,
|
||||
leadingZero = datepicker.getLeadingZeroNum,
|
||||
decade = datepicker.getDecade(date),
|
||||
d = datepicker.getParsedDate(date);
|
||||
d = datepicker.getParsedDate(date),
|
||||
fullHours = d.fullHours,
|
||||
hours = d.hours,
|
||||
dayPeriod = 'am',
|
||||
validHours;
|
||||
|
||||
if (this.opts.timepicker && this.timepicker && this.ampm) {
|
||||
validHours = this.timepicker._getValidHoursFromDate(date);
|
||||
fullHours = leadingZero(validHours.hours);
|
||||
hours = validHours.hours;
|
||||
dayPeriod = validHours.dayPeriod;
|
||||
}
|
||||
|
||||
switch (true) {
|
||||
case /@/.test(result):
|
||||
result = result.replace(/@/, date.getTime());
|
||||
case /aa/.test(result):
|
||||
result = result.replace(boundary('aa'), dayPeriod);
|
||||
case /AA/.test(result):
|
||||
result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
|
||||
case /dd/.test(result):
|
||||
result = result.replace(boundary('dd'), d.fullDate);
|
||||
case /d/.test(result):
|
||||
@ -326,6 +395,14 @@ window.Datepicker = '';
|
||||
result = result.replace(boundary('MM'), this.loc.months[d.month]);
|
||||
case /M/.test(result):
|
||||
result = result.replace(boundary('M'), locale.monthsShort[d.month]);
|
||||
case /ii/.test(result):
|
||||
result = result.replace(boundary('ii'), d.fullMinutes);
|
||||
case /i/.test(result):
|
||||
result = result.replace(boundary('i'), d.minutes);
|
||||
case /hh/.test(result):
|
||||
result = result.replace(boundary('hh'), fullHours);
|
||||
case /h/.test(result):
|
||||
result = result.replace(boundary('h'), hours);
|
||||
case /yyyy/.test(result):
|
||||
result = result.replace(boundary('yyyy'), d.year);
|
||||
case /yyyy1/.test(result):
|
||||
@ -351,8 +428,33 @@ window.Datepicker = '';
|
||||
len = selectedDates.length,
|
||||
newDate = '';
|
||||
|
||||
if (Array.isArray(date)) {
|
||||
date.forEach(function (d) {
|
||||
_this.selectDate(d)
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(date instanceof Date)) return;
|
||||
|
||||
this.lastSelectedDate = date;
|
||||
|
||||
// Set new time values from Date
|
||||
if (this.timepicker) {
|
||||
this.timepicker._setTime(date);
|
||||
}
|
||||
|
||||
// On this step timepicker will set valid values in it's instance
|
||||
_this._trigger('selectDate', date);
|
||||
|
||||
// Set correct time values after timepicker's validation
|
||||
// Prevent from setting hours or minutes which values are lesser then `min` value or
|
||||
// greater then `max` value
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes)
|
||||
}
|
||||
|
||||
if (_this.view == 'days') {
|
||||
if (date.getMonth() != d.month && opts.moveToOtherMonthsOnSelect) {
|
||||
newDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||||
@ -389,6 +491,11 @@ window.Datepicker = '';
|
||||
} else {
|
||||
_this.minRange = date;
|
||||
}
|
||||
// Swap dates if they were selected via dp.selectDate() and second date was smaller then first
|
||||
if (datepicker.bigger(_this.maxRange, _this.minRange)) {
|
||||
_this.maxRange = _this.minRange;
|
||||
_this.minRange = date;
|
||||
}
|
||||
_this.selectedDates = [_this.minRange, _this.maxRange]
|
||||
|
||||
} else {
|
||||
@ -405,7 +512,7 @@ window.Datepicker = '';
|
||||
_this._triggerOnChange();
|
||||
}
|
||||
|
||||
if (opts.autoClose) {
|
||||
if (opts.autoClose && !this.timepickerIsActive) {
|
||||
if (!opts.multipleDates && !opts.range) {
|
||||
_this.hide();
|
||||
} else if (opts.range && _this.selectedDates.length == 2) {
|
||||
@ -429,6 +536,9 @@ window.Datepicker = '';
|
||||
if (!_this.selectedDates.length) {
|
||||
_this.minRange = '';
|
||||
_this.maxRange = '';
|
||||
_this.lastSelectedDate = '';
|
||||
} else {
|
||||
_this.lastSelectedDate = _this.selectedDates[_this.selectedDates.length - 1];
|
||||
}
|
||||
|
||||
_this.views[_this.currentView]._render();
|
||||
@ -448,6 +558,10 @@ window.Datepicker = '';
|
||||
this.view = this.opts.minView;
|
||||
this.silent = false;
|
||||
this.date = new Date();
|
||||
|
||||
if (this.opts.todayButton instanceof Date) {
|
||||
this.selectDate(this.opts.todayButton)
|
||||
}
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
@ -468,6 +582,7 @@ window.Datepicker = '';
|
||||
*/
|
||||
update: function (param, value) {
|
||||
var len = arguments.length;
|
||||
|
||||
if (len == 2) {
|
||||
this.opts[param] = value;
|
||||
} else if (len == 1 && typeof param == 'object') {
|
||||
@ -492,6 +607,19 @@ window.Datepicker = '';
|
||||
this.$datepicker.addClass(this.opts.classes)
|
||||
}
|
||||
|
||||
if (this.opts.timepicker) {
|
||||
this.timepicker._handleDate(this.lastSelectedDate);
|
||||
this.timepicker._updateRanges();
|
||||
this.timepicker._updateCurrentTime();
|
||||
// Change hours and minutes if it's values have been changed through min/max hours/minutes
|
||||
if (this.lastSelectedDate) {
|
||||
this.lastSelectedDate.setHours(this.timepicker.hours);
|
||||
this.lastSelectedDate.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -509,9 +637,14 @@ window.Datepicker = '';
|
||||
},
|
||||
|
||||
_isSelected: function (checkDate, cellType) {
|
||||
return this.selectedDates.some(function (date) {
|
||||
return datepicker.isSame(date, checkDate, cellType)
|
||||
})
|
||||
var res = false;
|
||||
this.selectedDates.some(function (date) {
|
||||
if (datepicker.isSame(date, checkDate, cellType)) {
|
||||
res = date;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
return res;
|
||||
},
|
||||
|
||||
_setInputValue: function () {
|
||||
@ -911,7 +1044,7 @@ window.Datepicker = '';
|
||||
}
|
||||
},
|
||||
|
||||
_onShowEvent: function () {
|
||||
_onShowEvent: function (e) {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
}
|
||||
@ -929,10 +1062,11 @@ window.Datepicker = '';
|
||||
|
||||
_onMouseUpDatepicker: function (e) {
|
||||
this.inFocus = false;
|
||||
this.$el.focus()
|
||||
e.originalEvent.inFocus = true;
|
||||
if (!e.originalEvent.timepickerFocus) this.$el.focus();
|
||||
},
|
||||
|
||||
_onInput: function () {
|
||||
_onKeyUpGeneral: function (e) {
|
||||
var val = this.$el.val();
|
||||
|
||||
if (!val) {
|
||||
@ -946,6 +1080,19 @@ window.Datepicker = '';
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseUpBody: function (e) {
|
||||
if (e.originalEvent.inFocus) return;
|
||||
|
||||
if (this.visible && !this.inFocus) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseUpEl: function (e) {
|
||||
e.originalEvent.inFocus = true;
|
||||
setTimeout(this._onKeyUpGeneral.bind(this),4);
|
||||
},
|
||||
|
||||
_onKeyDown: function (e) {
|
||||
var code = e.which;
|
||||
this._registerKey(code);
|
||||
@ -966,6 +1113,10 @@ window.Datepicker = '';
|
||||
var alreadySelected = this._isSelected(this.focused, this.cellType);
|
||||
|
||||
if (!alreadySelected) {
|
||||
if (this.timepicker) {
|
||||
this.focused.setHours(this.timepicker.hours);
|
||||
this.focused.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
this.selectDate(this.focused);
|
||||
} else if (alreadySelected && this.opts.toggleSelected){
|
||||
this.removeDate(this.focused);
|
||||
@ -1026,6 +1177,37 @@ window.Datepicker = '';
|
||||
this.silent = false;
|
||||
},
|
||||
|
||||
_onTimeChange: function (e, h, m) {
|
||||
var date = new Date(),
|
||||
selectedDates = this.selectedDates,
|
||||
selected = false;
|
||||
|
||||
if (selectedDates.length) {
|
||||
selected = true;
|
||||
date = this.lastSelectedDate;
|
||||
}
|
||||
|
||||
date.setHours(h);
|
||||
date.setMinutes(m);
|
||||
|
||||
if (!selected && !this._getCell(date).hasClass('-disabled-')) {
|
||||
this.selectDate(date);
|
||||
} else {
|
||||
this._setInputValue();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onClickCell: function (e, date) {
|
||||
if (this.timepicker) {
|
||||
date.setHours(this.timepicker.hours);
|
||||
date.setMinutes(this.timepicker.minutes);
|
||||
}
|
||||
this.selectDate(date);
|
||||
},
|
||||
|
||||
set focused(val) {
|
||||
if (!val && this.focused) {
|
||||
var $cell = this._getCell(this.focused);
|
||||
@ -1086,7 +1268,7 @@ window.Datepicker = '';
|
||||
|
||||
if (this.inited) {
|
||||
if (!this.views[val]) {
|
||||
this.views[val] = new Datepicker.Body(this, val, this.opts)
|
||||
this.views[val] = new $.fn.datepicker.Body(this, val, this.opts)
|
||||
} else {
|
||||
this.views[val]._render();
|
||||
}
|
||||
@ -1141,7 +1323,11 @@ window.Datepicker = '';
|
||||
fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
|
||||
date: date.getDate(),
|
||||
fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
|
||||
day: date.getDay()
|
||||
day: date.getDay(),
|
||||
hours: date.getHours(),
|
||||
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
|
||||
minutes: date.getMinutes(),
|
||||
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
}
|
||||
};
|
||||
|
||||
@ -1184,21 +1370,11 @@ window.Datepicker = '';
|
||||
return date.getTime() > dateCompareTo.getTime();
|
||||
};
|
||||
|
||||
Datepicker.language = {
|
||||
ru: {
|
||||
days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
|
||||
monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
firstDay: 1
|
||||
}
|
||||
datepicker.getLeadingZeroNum = function (num) {
|
||||
return parseInt(num) < 10 ? '0' + num : num;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
$.fn.datepicker = function ( options ) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName,
|
||||
@ -1212,8 +1388,25 @@ window.Datepicker = '';
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.datepicker.Constructor = Datepicker;
|
||||
|
||||
$.fn.datepicker.language = {
|
||||
ru: {
|
||||
days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
|
||||
monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$(autoInitSelector).datepicker();
|
||||
})
|
||||
|
||||
})();
|
||||
})();
|
||||
|
||||
12
src/js/i18n/datepicker.da.js
Normal file
12
src/js/i18n/datepicker.da.js
Normal file
@ -0,0 +1,12 @@
|
||||
$.fn.datepicker.language['da'] = {
|
||||
days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
|
||||
daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
|
||||
daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
|
||||
months: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'I dag',
|
||||
clear: 'Nulstil',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
Datepicker.language['de'] = {
|
||||
$.fn.datepicker.language['de'] = {
|
||||
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
|
||||
daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
|
||||
daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
|
||||
@ -7,5 +7,6 @@ Datepicker.language['de'] = {
|
||||
today: 'Heute',
|
||||
clear: 'Aufräumen',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
Datepicker.language['en'] = {
|
||||
$.fn.datepicker.language['en'] = {
|
||||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
@ -6,6 +6,7 @@ Datepicker.language['en'] = {
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yy',
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 0
|
||||
};
|
||||
12
src/js/i18n/datepicker.nl.js
Normal file
12
src/js/i18n/datepicker.nl.js
Normal file
@ -0,0 +1,12 @@
|
||||
$.fn.datepicker.language['nl'] = {
|
||||
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
|
||||
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'Vandaag',
|
||||
clear: 'Legen',
|
||||
dateFormat: 'dd-MM-yy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
};
|
||||
12
src/js/i18n/datepicker.pt-BR.js
Normal file
12
src/js/i18n/datepicker.pt-BR.js
Normal file
@ -0,0 +1,12 @@
|
||||
$.fn.datepicker.language['pt-BR'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
};
|
||||
12
src/js/i18n/datepicker.pt.js
Normal file
12
src/js/i18n/datepicker.pt.js
Normal file
@ -0,0 +1,12 @@
|
||||
$.fn.datepicker.language['pt'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
12
src/js/i18n/datepicker.ro.js
Normal file
12
src/js/i18n/datepicker.ro.js
Normal file
@ -0,0 +1,12 @@
|
||||
$.fn.datepicker.language['ro'] = {
|
||||
days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
|
||||
daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
|
||||
daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
|
||||
months: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
|
||||
monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Azi',
|
||||
clear: 'Şterge',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
Datepicker.language['zh'] = {
|
||||
$.fn.datepicker.language['zh'] = {
|
||||
days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
daysShort: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
@ -7,5 +7,6 @@ Datepicker.language['zh'] = {
|
||||
today: '今天',
|
||||
clear: '清除',
|
||||
dateFormat: 'yyyy-mm-dd',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
@ -4,9 +4,11 @@
|
||||
'<div class="datepicker--nav-title">#{title}</div>' +
|
||||
'<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
|
||||
buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
|
||||
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
|
||||
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>',
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
Datepicker.Navigation = function (d, opts) {
|
||||
datepicker.Navigation = function (d, opts) {
|
||||
this.d = d;
|
||||
this.opts = opts;
|
||||
|
||||
@ -15,7 +17,7 @@
|
||||
this.init();
|
||||
};
|
||||
|
||||
Datepicker.Navigation.prototype = {
|
||||
datepicker.Navigation.prototype = {
|
||||
init: function () {
|
||||
this._buildBaseHtml();
|
||||
this._bindEvents();
|
||||
@ -43,7 +45,7 @@
|
||||
|
||||
_render: function () {
|
||||
var title = this._getTitle(this.d.currentDate),
|
||||
html = Datepicker.template(template, $.extend({title: title}, this.opts));
|
||||
html = dp.template(template, $.extend({title: title}, this.opts));
|
||||
this.d.$nav.html(html);
|
||||
if (this.d.view == 'years') {
|
||||
$('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
|
||||
@ -64,7 +66,7 @@
|
||||
action: type,
|
||||
label: this.d.loc[type]
|
||||
},
|
||||
html = Datepicker.template(button, data);
|
||||
html = dp.template(button, data);
|
||||
|
||||
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
|
||||
this.$buttonsContainer.append(html);
|
||||
|
||||
259
src/js/timepicker.js
Normal file
259
src/js/timepicker.js
Normal file
@ -0,0 +1,259 @@
|
||||
;(function () {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<div class="datepicker--time-current">' +
|
||||
' <span class="datepicker--time-current-hours">#{hourValue}</span>' +
|
||||
' <span class="datepicker--time-current-colon">:</span>' +
|
||||
' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
' </div>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
datepicker = $.fn.datepicker,
|
||||
dp = datepicker.Constructor;
|
||||
|
||||
datepicker.Timepicker = function (inst, opts) {
|
||||
this.d = inst;
|
||||
this.opts = opts;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
datepicker.Timepicker.prototype = {
|
||||
init: function () {
|
||||
var input = 'input';
|
||||
this._setTime(this.d.date);
|
||||
this._buildHTML();
|
||||
|
||||
if (navigator.userAgent.match(/trident/gi)) {
|
||||
input = 'change';
|
||||
}
|
||||
|
||||
this.d.$el.on('selectDate', this._onSelectDate.bind(this));
|
||||
this.$ranges.on(input, this._onChangeRange.bind(this));
|
||||
this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
|
||||
this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
|
||||
this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
|
||||
},
|
||||
|
||||
_setTime: function (date) {
|
||||
var _date = dp.getParsedDate(date);
|
||||
|
||||
this._handleDate(date);
|
||||
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
|
||||
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
|
||||
},
|
||||
|
||||
_setMinTimeFromDate: function (date) {
|
||||
this.minHours = date.getHours();
|
||||
this.minMinutes = date.getMinutes();
|
||||
},
|
||||
|
||||
_setMaxTimeFromDate: function (date) {
|
||||
this.maxHours = date.getHours();
|
||||
this.maxMinutes = date.getMinutes();
|
||||
},
|
||||
|
||||
_setDefaultMinMaxTime: function () {
|
||||
var maxHours = 23,
|
||||
maxMinutes = 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;
|
||||
},
|
||||
|
||||
/**
|
||||
* Looks for min/max hours/minutes and if current values
|
||||
* are out of range sets valid values.
|
||||
* @private
|
||||
*/
|
||||
_validateHoursMinutes: function (date) {
|
||||
if (this.hours < this.minHours) {
|
||||
this.hours = this.minHours;
|
||||
} else if (this.hours > this.maxHours) {
|
||||
this.hours = this.maxHours;
|
||||
}
|
||||
|
||||
if (this.minutes < this.minMinutes) {
|
||||
this.minutes = this.minMinutes;
|
||||
} else if (this.minutes > this.maxMinutes) {
|
||||
this.minutes = this.maxMinutes;
|
||||
}
|
||||
},
|
||||
|
||||
_buildHTML: function () {
|
||||
var lz = dp.getLeadingZeroNum,
|
||||
data = {
|
||||
hourMin: this.minHours,
|
||||
hourMax: lz(this.maxHours),
|
||||
hourStep: this.opts.hoursStep,
|
||||
hourValue: lz(this.displayHours),
|
||||
minMin: this.minMinutes,
|
||||
minMax: lz(this.maxMinutes),
|
||||
minStep: this.opts.minutesStep,
|
||||
minValue: lz(this.minutes)
|
||||
},
|
||||
_template = dp.template(template, data);
|
||||
|
||||
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
|
||||
this.$ranges = $('[type="range"]', this.$timepicker);
|
||||
this.$hours = $('[name="hours"]', this.$timepicker);
|
||||
this.$minutes = $('[name="minutes"]', this.$timepicker);
|
||||
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
|
||||
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm = $('<span class="datepicker--time-current-ampm">')
|
||||
.appendTo($('.datepicker--time-current', this.$timepicker))
|
||||
.html(this.dayPeriod);
|
||||
|
||||
this.$timepicker.addClass('-am-pm-');
|
||||
}
|
||||
},
|
||||
|
||||
_updateCurrentTime: function () {
|
||||
var h = dp.getLeadingZeroNum(this.displayHours),
|
||||
m = dp.getLeadingZeroNum(this.minutes);
|
||||
|
||||
this.$hoursText.html(h);
|
||||
this.$minutesText.html(m);
|
||||
|
||||
if (this.d.ampm) {
|
||||
this.$ampm.html(this.dayPeriod);
|
||||
}
|
||||
},
|
||||
|
||||
_updateRanges: function () {
|
||||
this.$hours.attr({
|
||||
min: this.minHours,
|
||||
max: this.maxHours
|
||||
}).val(this.hours);
|
||||
|
||||
this.$minutes.attr({
|
||||
min: this.minMinutes,
|
||||
max: this.maxMinutes
|
||||
}).val(this.minutes)
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets minHours, minMinutes etc. from date. If date is not passed, than sets
|
||||
* values from options
|
||||
* @param [date] {object} - Date object, to get values from
|
||||
* @private
|
||||
*/
|
||||
_handleDate: function (date) {
|
||||
this._setDefaultMinMaxTime();
|
||||
|
||||
if (date) {
|
||||
if (dp.isSame(date, this.d.opts.minDate)) {
|
||||
this._setMinTimeFromDate(this.d.opts.minDate);
|
||||
} else if (dp.isSame(date, this.d.opts.maxDate)) {
|
||||
this._setMaxTimeFromDate(this.d.opts.maxDate);
|
||||
}
|
||||
}
|
||||
|
||||
this._validateHoursMinutes(date);
|
||||
},
|
||||
|
||||
update: function () {
|
||||
this._updateRanges();
|
||||
this._updateCurrentTime();
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates valid hour value to display in text input and datepicker's body.
|
||||
* @param date {Date|Number} - date or hours
|
||||
* @returns {{hours: *, dayPeriod: string}}
|
||||
* @private
|
||||
*/
|
||||
_getValidHoursFromDate: function (date) {
|
||||
var d = date,
|
||||
hours = date;
|
||||
|
||||
if (date instanceof Date) {
|
||||
d = dp.getParsedDate(date);
|
||||
hours = d.hours;
|
||||
}
|
||||
|
||||
var ampm = this.d.ampm,
|
||||
dayPeriod = 'am';
|
||||
|
||||
if (ampm) {
|
||||
switch(true) {
|
||||
case hours == 0:
|
||||
hours = 12;
|
||||
break;
|
||||
case hours == 12:
|
||||
dayPeriod = 'pm';
|
||||
break;
|
||||
case hours > 11:
|
||||
hours = hours - 12;
|
||||
dayPeriod = 'pm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hours: hours,
|
||||
dayPeriod: dayPeriod
|
||||
}
|
||||
},
|
||||
|
||||
set hours (val) {
|
||||
this._hours = val;
|
||||
|
||||
var displayHours = this._getValidHoursFromDate(val);
|
||||
|
||||
this.displayHours = displayHours.hours;
|
||||
this.dayPeriod = displayHours.dayPeriod;
|
||||
},
|
||||
|
||||
get hours() {
|
||||
return this._hours;
|
||||
},
|
||||
|
||||
// Events
|
||||
// -------------------------------------------------
|
||||
|
||||
_onChangeRange: function (e) {
|
||||
var $target = $(e.target),
|
||||
name = $target.attr('name');
|
||||
|
||||
this.d.timepickerIsActive = true;
|
||||
|
||||
this[name] = $target.val();
|
||||
this._updateCurrentTime();
|
||||
this.d._trigger('timeChange', [this.hours, this.minutes])
|
||||
},
|
||||
|
||||
_onSelectDate: function (e, data) {
|
||||
this._handleDate(data);
|
||||
this.update();
|
||||
},
|
||||
|
||||
_onMouseEnterRange: function (e) {
|
||||
var name = $(e.target).attr('name');
|
||||
$('.datepicker--time-current-' + name, this.$timepicker).addClass('-focus-');
|
||||
},
|
||||
|
||||
_onMouseOutRange: function (e) {
|
||||
var name = $(e.target).attr('name');
|
||||
if (this.d.inFocus) return; // Prevent removing focus when mouse out of range slider
|
||||
$('.datepicker--time-current-' + name, this.$timepicker).removeClass('-focus-');
|
||||
},
|
||||
|
||||
_onMouseUpRange: function (e) {
|
||||
this.d.timepickerIsActive = false;
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -8,6 +8,10 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
|
||||
247
src/sass/timepicker.scss
Normal file
247
src/sass/timepicker.scss
Normal file
@ -0,0 +1,247 @@
|
||||
@import "datepicker-config";
|
||||
|
||||
/* -------------------------------------------------
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
|
||||
$rangeTrackHeight: 1px;
|
||||
$rangeTrackBg: #dedede;
|
||||
$rangeThumbSize: 12px;
|
||||
$rangeThumbBg: #dedede;
|
||||
|
||||
@mixin trackSelector {
|
||||
&::-webkit-slider-runnable-track {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumbSelector {
|
||||
&::-webkit-slider-thumb {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumb {
|
||||
box-sizing: border-box;
|
||||
height: $rangeThumbSize;
|
||||
width: $rangeThumbSize;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $rangeTrackBg;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
border: none;
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.datepicker--time {
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: $datepickerPadding;
|
||||
position: relative;
|
||||
|
||||
&.-am-pm- {
|
||||
.datepicker--time-sliders {
|
||||
flex: 0 1 138px;
|
||||
max-width: 138px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--time-sliders {
|
||||
flex: 0 1 153px;
|
||||
margin-right: 10px;
|
||||
max-width: 153px;
|
||||
}
|
||||
|
||||
.datepicker--time-label {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.datepicker--time-current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.datepicker--time-current-colon {
|
||||
margin: 0 2px 3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.datepicker--time-current-hours,
|
||||
.datepicker--time-current-minutes {
|
||||
line-height: 1;
|
||||
font-size: 19px;
|
||||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: map_get($bg, hover);
|
||||
border-radius: $datepickerBorderRadius;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
align-self: flex-end;
|
||||
color: map_get($textColor, navArrows);
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.datepicker--time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
height: 17px;
|
||||
background: linear-gradient(to right,$rangeTrackBg, $rangeTrackBg) left 50%/100% $rangeTrackHeight no-repeat;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include thumbSelector() {
|
||||
border-color: darken($rangeTrackBg, 15);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
@include thumbSelector() {
|
||||
background: map_get($bg, selected);
|
||||
border-color: map_get($bg, selected);
|
||||
}
|
||||
}
|
||||
|
||||
// Thumb
|
||||
// -------------------------------------------------
|
||||
|
||||
@include thumbSelector() {
|
||||
@include thumb;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-top: -$rangeThumbSize/2;
|
||||
}
|
||||
|
||||
// Track
|
||||
// -------------------------------------------------
|
||||
@include trackSelector() {
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
&:focus::-ms-fill-lower {
|
||||
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: transparent;
|
||||
}
|
||||
&:focus::-ms-fill-upper {
|
||||
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: map_get($textColor, navArrows);
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin: 0 5px -1px 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
&:after, &:before {
|
||||
content: '';
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: .4em;
|
||||
width: 1px;
|
||||
left: calc(50% - 1px);
|
||||
top: calc(50% + 1px);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: .4em;
|
||||
height: 1px;
|
||||
top: calc(50% + 1px);
|
||||
left: calc(50% - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
10
static-server.js
Normal file
10
static-server.js
Normal file
@ -0,0 +1,10 @@
|
||||
var static = require('node-static'),
|
||||
http = require('http');
|
||||
|
||||
var file = new static.Server('.');
|
||||
|
||||
http.createServer(function (request, response) {
|
||||
request.addListener('end', function () {
|
||||
file.serve(request, response);
|
||||
}).resume();
|
||||
}).listen(3000);
|
||||
@ -1,11 +1,12 @@
|
||||
var gulp = require('gulp'),
|
||||
rename = require('gulp-rename'),
|
||||
uglify = require('gulp-uglify'),
|
||||
wrap = require('gulp-wrap'),
|
||||
sass = require('gulp-sass'),
|
||||
clone = require('gulp-clone'),
|
||||
concat = require('gulp-concat');
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('src/js/i18n/*.js')
|
||||
.pipe(wrap(';(function ($) { <%=contents%> })(jQuery);'))
|
||||
.pipe(gulp.dest('dist/js/i18n'))
|
||||
};
|
||||
|
||||
@ -9,7 +9,8 @@ module.exports = function () {
|
||||
var stream = gulp.src([
|
||||
'src/js/datepicker.js',
|
||||
'src/js/body.js',
|
||||
'src/js/navigation.js'
|
||||
'src/js/navigation.js',
|
||||
'src/js/timepicker.js'
|
||||
])
|
||||
.pipe(concat('datepicker.js'))
|
||||
.pipe(wrap(';(function (window, $, undefined) { <%=contents%> })(window, jQuery);'));
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
<script type="text/javascript" src="specs/options.js"></script>
|
||||
<script type="text/javascript" src="specs/events.js"></script>
|
||||
<script type="text/javascript" src="specs/static-methods.js"></script>
|
||||
<script type="text/javascript" src="specs/api.js"></script>
|
||||
<style type="text/css">
|
||||
/* Remove transitions to test position options*/
|
||||
.datepicker {
|
||||
|
||||
65
tests/specs/api.js
Normal file
65
tests/specs/api.js
Normal file
@ -0,0 +1,65 @@
|
||||
describe('API', function () {
|
||||
|
||||
var assert = chai.assert,
|
||||
expect = chai.expect,
|
||||
destroy = true,
|
||||
$altInput,
|
||||
$input, dp;
|
||||
|
||||
before(function () {
|
||||
$input = $('<input>').appendTo('#container');
|
||||
$altInput = $('<input class="alt-field">').appendTo('#container');
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
if (dp && destroy) {
|
||||
dp.destroy();
|
||||
}
|
||||
|
||||
destroy = true;
|
||||
});
|
||||
|
||||
after(function () {
|
||||
$input.remove();
|
||||
$altInput.remove();
|
||||
});
|
||||
|
||||
describe('selectDate', function () {
|
||||
it('should select passed date', function () {
|
||||
dp = $input.datepicker().data('datepicker');
|
||||
|
||||
var date = new Date();
|
||||
|
||||
dp.selectDate(date);
|
||||
|
||||
expect(dp.selectedDates).to.have.length(1);
|
||||
expect(dp.selectedDates[0]).to.be.equal(date)
|
||||
});
|
||||
it('should select multiple dates if {multipleDates: true}', function () {
|
||||
dp = $input.datepicker({
|
||||
multipleDates: true
|
||||
}).data('datepicker');
|
||||
|
||||
var date = new Date(2016, 4, 16),
|
||||
date2 = new Date(2016, 4, 18);
|
||||
|
||||
dp.selectDate(date);
|
||||
dp.selectDate(date2);
|
||||
|
||||
expect(dp.selectedDates).to.have.length(2);
|
||||
});
|
||||
it('should swap dates if {range: true} and second date is smaller then first', function () {
|
||||
dp = $input.datepicker({
|
||||
range: true
|
||||
}).data('datepicker');
|
||||
|
||||
var date = new Date(2016, 4, 18),
|
||||
date2 = new Date(2016, 4, 16);
|
||||
|
||||
dp.selectDate(date);
|
||||
dp.selectDate(date2);
|
||||
|
||||
expect(dp.selectedDates[0]).to.be.equal(date2);
|
||||
})
|
||||
});
|
||||
});
|
||||
@ -34,7 +34,7 @@ var assert = chai.assert,
|
||||
onSelect: function (fd, d, inst) {
|
||||
expect(fd).to.be.equal('13.01.2016');
|
||||
expect(d).to.be.instanceof(Date);
|
||||
expect(inst).to.be.instanceof(Datepicker);
|
||||
expect(inst).to.be.instanceof($.fn.datepicker.Constructor);
|
||||
}
|
||||
}).data('datepicker');
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ describe('Options', function () {
|
||||
language: 'en'
|
||||
}).data('datepicker');
|
||||
|
||||
expect(dp.loc.days).to.eql(Datepicker.language.en.days);
|
||||
expect(dp.loc.days).to.eql($.fn.datepicker.language.en.days);
|
||||
});
|
||||
it('should change language to custom if object is passed', function () {
|
||||
var daysMin = ['В','П','В','С','Ч','П','С'];
|
||||
@ -69,7 +69,7 @@ describe('Options', function () {
|
||||
}).data('datepicker');
|
||||
|
||||
expect(dp.loc.daysMin).to.eql(daysMin);
|
||||
expect(dp.loc.days).to.eql(Datepicker.language.ru.days);
|
||||
expect(dp.loc.days).to.eql($.fn.datepicker.language.ru.days);
|
||||
})
|
||||
});
|
||||
|
||||
@ -121,9 +121,15 @@ describe('Options', function () {
|
||||
});
|
||||
|
||||
describe('dateFormat', function () {
|
||||
var date = new Date(2015, 6, 4),
|
||||
var date = new Date(2015, 6, 4, 11, 5),
|
||||
formats = {
|
||||
'@': date.getTime(),
|
||||
'aa': 'am',
|
||||
'AA': 'AM',
|
||||
'h': 11,
|
||||
'hh': 11,
|
||||
'i': 5,
|
||||
'ii': '05',
|
||||
'dd': '04',
|
||||
'd': 4,
|
||||
'DD': 'Суббота',
|
||||
@ -807,4 +813,111 @@ describe('Options', function () {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('timepicker', function () {
|
||||
it('should add timepicker to calendar', function () {
|
||||
dp = $input.datepicker({
|
||||
timepicker: true
|
||||
}).data('datepicker');
|
||||
|
||||
var $time = $('.datepicker--time', dp.$datepicker);
|
||||
expect($time).to.have.length(1)
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
describe('dateTimeSeparator', function () {
|
||||
it('should define separator between date string and time', function () {
|
||||
var date = new Date(2016,2,9,11,24);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
onSelect: function (fd, d) {
|
||||
expect(fd).to.be.equal('09.03.2016 time separator 11:24')
|
||||
},
|
||||
dateTimeSeparator: ' time separator '
|
||||
}).data('datepicker');
|
||||
|
||||
dp.selectDate(date);
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
describe('timeFormat', function () {
|
||||
it('should define time format', function () {
|
||||
var date = new Date(2016,2,9,9,4);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
timeFormat: 'h - ii',
|
||||
onSelect: function (fd, d) {
|
||||
expect(fd).to.be.equal('09.03.2016 9 - 04')
|
||||
}
|
||||
}).data('datepicker');
|
||||
|
||||
dp.selectDate(date);
|
||||
})
|
||||
});
|
||||
|
||||
describe('minHours', function () {
|
||||
it('should set minimum hours value', function () {
|
||||
var date = new Date();
|
||||
date.setHours(9);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
minHours: 10,
|
||||
onSelect: function (fd, d) {
|
||||
var hours = d.getHours();
|
||||
expect(hours).to.be.equal(10)
|
||||
}
|
||||
}).data('datepicker');
|
||||
dp.selectDate(date);
|
||||
})
|
||||
});
|
||||
|
||||
describe('minMinutes', function () {
|
||||
it('should set minimum minutes value', function () {
|
||||
var date = new Date();
|
||||
date.setMinutes(20);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
minMinutes: 30,
|
||||
onSelect: function (fd, d) {
|
||||
var minutes = d.getMinutes();
|
||||
expect(minutes).to.be.equal(30)
|
||||
}
|
||||
}).data('datepicker');
|
||||
dp.selectDate(date);
|
||||
})
|
||||
});
|
||||
|
||||
describe('maxHours', function () {
|
||||
it('should set maximum hours value', function () {
|
||||
var date = new Date();
|
||||
date.setHours(20);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
maxHours: 18,
|
||||
onSelect: function (fd, d) {
|
||||
var hours = d.getHours();
|
||||
expect(hours).to.be.equal(18)
|
||||
}
|
||||
}).data('datepicker');
|
||||
dp.selectDate(date);
|
||||
})
|
||||
});
|
||||
|
||||
describe('maxMinutes', function () {
|
||||
it('should set maximum minutes value', function () {
|
||||
var date = new Date();
|
||||
date.setMinutes(50);
|
||||
dp = $input.datepicker({
|
||||
timepicker: true,
|
||||
maxMinutes: 30,
|
||||
onSelect: function (fd, d) {
|
||||
var minutes = d.getMinutes();
|
||||
expect(minutes).to.be.equal(30)
|
||||
}
|
||||
}).data('datepicker');
|
||||
dp.selectDate(date);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
var assert = chai.assert,
|
||||
expect = chai.expect;
|
||||
expect = chai.expect,
|
||||
plugin = $.fn.datepicker.Constructor;
|
||||
|
||||
describe('Datepicker', function () {
|
||||
describe('getDaysCount', function () {
|
||||
it('should return 31 days in December', function () {
|
||||
assert.equal(Datepicker.getDaysCount(new Date(2015, 11)), 31)
|
||||
console.log(plugin.getDaysCount);
|
||||
assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
|
||||
});
|
||||
it('should return 30 days in September', function () {
|
||||
assert.equal(Datepicker.getDaysCount(new Date(2015, 8)), 30)
|
||||
assert.equal(plugin.getDaysCount(new Date(2015, 8)), 30)
|
||||
});
|
||||
it('should return 28 days in February', function () {
|
||||
assert.equal(Datepicker.getDaysCount(new Date(2015, 1)), 28)
|
||||
assert.equal(plugin.getDaysCount(new Date(2015, 1)), 28)
|
||||
})
|
||||
});
|
||||
|
||||
describe('getParsedDate', function () {
|
||||
var currentDate = new Date(),
|
||||
date = Datepicker.getParsedDate(currentDate);
|
||||
date = plugin.getParsedDate(currentDate);
|
||||
|
||||
it('should return object with detailed date fields', function () {
|
||||
expect(date).to.have.all.keys(['year','month','fullMonth','date', 'fullDate', 'day']);
|
||||
expect(date).to.have.all.keys(['year','month','fullMonth','date', 'fullDate', 'day','hours', 'fullHours', 'minutes', 'fullMinutes']);
|
||||
});
|
||||
|
||||
describe('.year', function () {
|
||||
@ -51,12 +53,32 @@ describe('Datepicker', function () {
|
||||
it('`day` must be equal to current day', function () {
|
||||
assert.equal(currentDate.getDay(), date.day);
|
||||
})
|
||||
});
|
||||
describe('.hours', function () {
|
||||
it('`hours` must be equal to current hours', function () {
|
||||
assert.equal(currentDate.getHours(), date.hours);
|
||||
})
|
||||
});
|
||||
describe('.fullHours', function () {
|
||||
it('`fullHours` must be equal to current hours with leading zero', function () {
|
||||
assert.equal(currentDate.getHours() < 10 ? '0' + currentDate.getHours() : currentDate.getHours(), date.hours);
|
||||
})
|
||||
});
|
||||
describe('.minutes', function () {
|
||||
it('`minutes` must be equal to current minutes', function () {
|
||||
assert.equal(currentDate.getMinutes(), date.minutes);
|
||||
})
|
||||
});
|
||||
describe('.fullMinutes', function () {
|
||||
it('`fullMinutes` must be equal to current hours with leading zero', function () {
|
||||
assert.equal(currentDate.getMinutes() < 10 ? '0' + currentDate.getMinutes() : currentDate.getMinutes(), date.fullMinutes);
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
describe('getDecade', function () {
|
||||
it('should return array with first and last years in decade', function () {
|
||||
var decade = Datepicker.getDecade(new Date(2015, 1));
|
||||
var decade = plugin.getDecade(new Date(2015, 1));
|
||||
|
||||
expect(decade).to.be.an('array');
|
||||
assert.equal(decade[0], 2010)
|
||||
@ -67,7 +89,7 @@ describe('Datepicker', function () {
|
||||
describe('template', function () {
|
||||
it('should return string with replaced #{} signs', function () {
|
||||
var template = 'Hello #{who}';
|
||||
assert.equal(Datepicker.template(template, {who:'World!'}), 'Hello World!')
|
||||
assert.equal(plugin.template(template, {who:'World!'}), 'Hello World!')
|
||||
})
|
||||
})
|
||||
|
||||
@ -78,33 +100,33 @@ describe('Datepicker', function () {
|
||||
date4 = new Date(2016, 11, 14);
|
||||
|
||||
it('should return true if dates are equal', function () {
|
||||
assert(Datepicker.isSame(date1,date2))
|
||||
assert(plugin.isSame(date1,date2))
|
||||
})
|
||||
it('should return false when checking dates with different months', function () {
|
||||
assert.isFalse(Datepicker.isSame(date1,date3))
|
||||
assert.isFalse(plugin.isSame(date1,date3))
|
||||
})
|
||||
it('should return false when checking dates with different years', function () {
|
||||
assert.isFalse(Datepicker.isSame(date1,date4))
|
||||
assert.isFalse(plugin.isSame(date1,date4))
|
||||
})
|
||||
it('should return true when comparing months', function () {
|
||||
assert(Datepicker.isSame(date1, date2,'month'))
|
||||
assert(plugin.isSame(date1, date2,'month'))
|
||||
})
|
||||
it('should return false when comparing months from different years', function () {
|
||||
assert.isFalse(Datepicker.isSame(date1, date4, 'month'))
|
||||
assert.isFalse(plugin.isSame(date1, date4, 'month'))
|
||||
})
|
||||
it('should return true when comparing years', function () {
|
||||
assert(Datepicker.isSame(date1, date2, 'year'))
|
||||
assert(plugin.isSame(date1, date2, 'year'))
|
||||
})
|
||||
})
|
||||
|
||||
describe('less(date1, date2)', function () {
|
||||
it('should return true if date2 less then date1', function () {
|
||||
assert(Datepicker.less(new Date(2015, 11, 14), new Date(2015, 11, 13)))
|
||||
assert(plugin.less(new Date(2015, 11, 14), new Date(2015, 11, 13)))
|
||||
})
|
||||
})
|
||||
describe('bigger(date1, date2)', function () {
|
||||
it('should return true if date2 bigger then date1', function () {
|
||||
assert(Datepicker.bigger(new Date(2015, 11, 14), new Date(2015, 11, 15)))
|
||||
assert(plugin.bigger(new Date(2015, 11, 14), new Date(2015, 11, 15)))
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
101
visual-tests.html
Normal file
101
visual-tests.html
Normal file
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Air datepicker visual tests</title>
|
||||
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="dist/js/datepicker.js"></script>
|
||||
<link rel="stylesheet" href="dist/css/datepicker.css"/>
|
||||
<link rel="stylesheet" href="docs/css/style.css"/>
|
||||
<script type="text/javascript">
|
||||
var log;
|
||||
function logger (el) {
|
||||
var $el = $(el);
|
||||
|
||||
return function(text) {
|
||||
var count = $('p', $el).length;
|
||||
$el.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000)
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
log = logger('#v-log');
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-log" id="v-log"></div>
|
||||
<div class="visual-tests">
|
||||
<article>
|
||||
<h1>Basic</h1>
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<h2>Default</h2>
|
||||
<div class="datepicker-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h1>Range</h1>
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<h2>{range: true}</h2>
|
||||
<div class="datepicker-here" data-range="true"></div>
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<h2>{range: true, onSelect: ...}</h2>
|
||||
<div class="datepicker-here" id="dp-3" data-range="true"></div>
|
||||
<script type="text/javascript">
|
||||
$('#dp-3').datepicker({
|
||||
onSelect: function (fd) {
|
||||
log(fd)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<h2>{range: true, onSelect: ...}</h2>
|
||||
<input class="datepicker-here" id="dp-4" data-range="true"/>
|
||||
<script type="text/javascript">
|
||||
$('#dp-4').datepicker({
|
||||
onSelect: function (fd) {
|
||||
log(fd)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h1>Timepicker</h1>
|
||||
<div class="row">
|
||||
<div class="vt-tile">
|
||||
<h2>{timepicker: true}</h2>
|
||||
<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-timepicker="true" />
|
||||
<script type="text/javascript">
|
||||
$('#dp-5').datepicker({
|
||||
toggleSelected: false,
|
||||
inline: true,
|
||||
range: true,
|
||||
onSelect: function (fd) {
|
||||
log(fd)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
<div class="vt-tile">
|
||||
<h2>{timepicker: true}</h2>
|
||||
<input class="datepicker-here" data-timepicker="true" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user