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

added seconds in timepicker

Browse Source
This commit is contained in:
Faris Ansari 2016-12-31 20:50:18 +05:30
parent 004188d948
commit 7911fb1de7
9 changed files with 215 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
dist/css/datepicker.css vendored
View File

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

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

File diff suppressed because one or more lines are too long

60
dist/js/datepicker.js vendored
View File

@ -70,8 +70,11 @@
maxHours: 24, maxHours: 24,
minMinutes: 0, minMinutes: 0,
maxMinutes: 59, maxMinutes: 59,
minSeconds: 0,
maxSeconds: 59,
hoursStep: 1, hoursStep: 1,
minutesStep: 1, minutesStep: 1,
secondsStep: 1,
// events // events
onSelect: '', onSelect: '',
@ -302,7 +305,8 @@
parsedSelected.month, parsedSelected.month,
parsedSelected.date, parsedSelected.date,
parsedSelected.hours, parsedSelected.hours,
parsedSelected.minutes parsedSelected.minutes,
parsedSelected.seconds
); );
formattedDates = selectedDates.map(function (date) { formattedDates = selectedDates.map(function (date) {
@ -318,11 +322,11 @@
parsedDate.month, parsedDate.month,
parsedDate.date, parsedDate.date,
parsedDate.hours, parsedDate.hours,
parsedDate.minutes parsedDate.minutes,
parsedDate.seconds
); );
}) })
} }
this._prevOnSelectValue = formattedDates; this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this); this.opts.onSelect(formattedDates, dates, this);
}, },
@ -410,6 +414,8 @@
result = replacer(result, boundary('MM'), this.loc.months[d.month]); result = replacer(result, boundary('MM'), this.loc.months[d.month]);
case /M/.test(result): case /M/.test(result):
result = replacer(result, boundary('M'), locale.monthsShort[d.month]); result = replacer(result, boundary('M'), locale.monthsShort[d.month]);
case /ss/.test(result):
result = replacer(result, boundary('ss'), d.seconds);
case /ii/.test(result): case /ii/.test(result):
result = replacer(result, boundary('ii'), d.fullMinutes); result = replacer(result, boundary('ii'), d.fullMinutes);
case /i/.test(result): case /i/.test(result):
@ -477,6 +483,7 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes) date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
} }
if (_this.view == 'days') { if (_this.view == 'days') {
@ -644,6 +651,7 @@
if (lastSelectedDate) { if (lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours); lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes); lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
} }
} }
@ -1187,6 +1195,7 @@
if (this.timepicker) { if (this.timepicker) {
this.focused.setHours(this.timepicker.hours); this.focused.setHours(this.timepicker.hours);
this.focused.setMinutes(this.timepicker.minutes); this.focused.setMinutes(this.timepicker.minutes);
this.focused.setSeconds(this.timepicker.seconds);
} }
this.selectDate(this.focused); this.selectDate(this.focused);
return; return;
@ -1248,7 +1257,7 @@
this.silent = false; this.silent = false;
}, },
_onTimeChange: function (e, h, m) { _onTimeChange: function (e, h, m, s) {
var date = new Date(), var date = new Date(),
selectedDates = this.selectedDates, selectedDates = this.selectedDates,
selected = false; selected = false;
@ -1260,6 +1269,7 @@
date.setHours(h); date.setHours(h);
date.setMinutes(m); date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) { if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date); this.selectDate(date);
@ -1275,6 +1285,7 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes); date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
} }
this.selectDate(date); this.selectDate(date);
}, },
@ -1398,7 +1409,8 @@
hours: date.getHours(), hours: date.getHours(),
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() , fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
minutes: date.getMinutes(), minutes: date.getMinutes(),
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
seconds: date.getSeconds()
} }
}; };
@ -1956,6 +1968,8 @@
' <span class="datepicker--time-current-hours">#{hourVisible}</span>' + ' <span class="datepicker--time-current-hours">#{hourVisible}</span>' +
' <span class="datepicker--time-current-colon">:</span>' + ' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-minutes">#{minValue}</span>' + ' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
'</div>' + '</div>' +
'<div class="datepicker--time-sliders">' + '<div class="datepicker--time-sliders">' +
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
@ -1964,6 +1978,9 @@
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' + ' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' + ' </div>' +
' <div class="datepicker--time-row">' +
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
' </div>' +
'</div>' + '</div>' +
'</div>', '</div>',
datepicker = $.fn.datepicker, datepicker = $.fn.datepicker,
@ -1999,6 +2016,7 @@
this._handleDate(date); this._handleDate(date);
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours; this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes; this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
}, },
/** /**
@ -2010,6 +2028,7 @@
_setMinTimeFromDate: function (date) { _setMinTimeFromDate: function (date) {
this.minHours = date.getHours(); this.minHours = date.getHours();
this.minMinutes = date.getMinutes(); this.minMinutes = date.getMinutes();
this.minSeconds = date.getSeconds();
// If, for example, min hours are 10, and current hours are 12, // If, for example, min hours are 10, and current hours are 12,
// update minMinutes to default value, to be able to choose whole range of values // update minMinutes to default value, to be able to choose whole range of values
@ -2023,6 +2042,7 @@
_setMaxTimeFromDate: function (date) { _setMaxTimeFromDate: function (date) {
this.maxHours = date.getHours(); this.maxHours = date.getHours();
this.maxMinutes = date.getMinutes(); this.maxMinutes = date.getMinutes();
this.maxSeconds = date.getSeconds();
if (this.d.lastSelectedDate) { if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() < date.getHours()) { if (this.d.lastSelectedDate.getHours() < date.getHours()) {
@ -2034,12 +2054,15 @@
_setDefaultMinMaxTime: function () { _setDefaultMinMaxTime: function () {
var maxHours = 23, var maxHours = 23,
maxMinutes = 59, maxMinutes = 59,
maxSeconds = 59,
opts = this.opts; opts = this.opts;
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours; this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes; this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours; this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes; this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
}, },
/** /**
@ -2059,6 +2082,12 @@
} else if (this.minutes > this.maxMinutes) { } else if (this.minutes > this.maxMinutes) {
this.minutes = this.maxMinutes; this.minutes = this.maxMinutes;
} }
if (this.seconds < this.minSeconds) {
this.seconds = this.minSeconds;
} else if (this.seconds > this.maxSeconds) {
this.seconds = this.maxSeconds;
}
}, },
_buildHTML: function () { _buildHTML: function () {
@ -2072,7 +2101,11 @@
minMin: this.minMinutes, minMin: this.minMinutes,
minMax: lz(this.maxMinutes), minMax: lz(this.maxMinutes),
minStep: this.opts.minutesStep, minStep: this.opts.minutesStep,
minValue: lz(this.minutes) minValue: lz(this.minutes),
secMin: this.minSeconds,
secMax: lz(this.maxSeconds),
secStep: this.opts.secondsStep,
secValue: lz(this.seconds)
}, },
_template = dp.template(template, data); _template = dp.template(template, data);
@ -2080,8 +2113,10 @@
this.$ranges = $('[type="range"]', this.$timepicker); this.$ranges = $('[type="range"]', this.$timepicker);
this.$hours = $('[name="hours"]', this.$timepicker); this.$hours = $('[name="hours"]', this.$timepicker);
this.$minutes = $('[name="minutes"]', this.$timepicker); this.$minutes = $('[name="minutes"]', this.$timepicker);
this.$seconds = $('[name="seconds"]', this.$timepicker);
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker); this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker); this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm = $('<span class="datepicker--time-current-ampm">') this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -2094,10 +2129,12 @@
_updateCurrentTime: function () { _updateCurrentTime: function () {
var h = dp.getLeadingZeroNum(this.displayHours), var h = dp.getLeadingZeroNum(this.displayHours),
m = dp.getLeadingZeroNum(this.minutes); m = dp.getLeadingZeroNum(this.minutes),
s = dp.getLeadingZeroNum(this.seconds);
this.$hoursText.html(h); this.$hoursText.html(h);
this.$minutesText.html(m); this.$minutesText.html(m);
this.$secondsText.html(s);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm.html(this.dayPeriod); this.$ampm.html(this.dayPeriod);
@ -2113,7 +2150,12 @@
this.$minutes.attr({ this.$minutes.attr({
min: this.minMinutes, min: this.minMinutes,
max: this.maxMinutes max: this.maxMinutes
}).val(this.minutes) }).val(this.minutes);
this.$seconds.attr({
min: this.minSeconds,
max: this.maxSeconds
}).val(this.seconds);
}, },
/** /**
@ -2206,7 +2248,7 @@
this[name] = $target.val(); this[name] = $target.val();
this._updateCurrentTime(); this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes]); this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
this._handleDate(this.d.lastSelectedDate); this._handleDate(this.d.lastSelectedDate);
this.update() this.update()

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

File diff suppressed because one or more lines are too long

2
docs/css/style.css
View File

File diff suppressed because one or more lines are too long

22
src/js/datepicker.js
View File

@ -70,8 +70,11 @@
maxHours: 24, maxHours: 24,
minMinutes: 0, minMinutes: 0,
maxMinutes: 59, maxMinutes: 59,
minSeconds: 0,
maxSeconds: 59,
hoursStep: 1, hoursStep: 1,
minutesStep: 1, minutesStep: 1,
secondsStep: 1,
// events // events
onSelect: '', onSelect: '',
@ -302,7 +305,8 @@
parsedSelected.month, parsedSelected.month,
parsedSelected.date, parsedSelected.date,
parsedSelected.hours, parsedSelected.hours,
parsedSelected.minutes parsedSelected.minutes,
parsedSelected.seconds
); );
formattedDates = selectedDates.map(function (date) { formattedDates = selectedDates.map(function (date) {
@ -318,11 +322,11 @@
parsedDate.month, parsedDate.month,
parsedDate.date, parsedDate.date,
parsedDate.hours, parsedDate.hours,
parsedDate.minutes parsedDate.minutes,
parsedDate.seconds
); );
}) })
} }
this._prevOnSelectValue = formattedDates; this._prevOnSelectValue = formattedDates;
this.opts.onSelect(formattedDates, dates, this); this.opts.onSelect(formattedDates, dates, this);
}, },
@ -410,6 +414,8 @@
result = replacer(result, boundary('MM'), this.loc.months[d.month]); result = replacer(result, boundary('MM'), this.loc.months[d.month]);
case /M/.test(result): case /M/.test(result):
result = replacer(result, boundary('M'), locale.monthsShort[d.month]); result = replacer(result, boundary('M'), locale.monthsShort[d.month]);
case /ss/.test(result):
result = replacer(result, boundary('ss'), d.seconds);
case /ii/.test(result): case /ii/.test(result):
result = replacer(result, boundary('ii'), d.fullMinutes); result = replacer(result, boundary('ii'), d.fullMinutes);
case /i/.test(result): case /i/.test(result):
@ -477,6 +483,7 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes) date.setMinutes(this.timepicker.minutes)
date.setSeconds(this.timepicker.seconds)
} }
if (_this.view == 'days') { if (_this.view == 'days') {
@ -644,6 +651,7 @@
if (lastSelectedDate) { if (lastSelectedDate) {
lastSelectedDate.setHours(this.timepicker.hours); lastSelectedDate.setHours(this.timepicker.hours);
lastSelectedDate.setMinutes(this.timepicker.minutes); lastSelectedDate.setMinutes(this.timepicker.minutes);
lastSelectedDate.setSeconds(this.timepicker.seconds);
} }
} }
@ -1187,6 +1195,7 @@
if (this.timepicker) { if (this.timepicker) {
this.focused.setHours(this.timepicker.hours); this.focused.setHours(this.timepicker.hours);
this.focused.setMinutes(this.timepicker.minutes); this.focused.setMinutes(this.timepicker.minutes);
this.focused.setSeconds(this.timepicker.seconds);
} }
this.selectDate(this.focused); this.selectDate(this.focused);
return; return;
@ -1248,7 +1257,7 @@
this.silent = false; this.silent = false;
}, },
_onTimeChange: function (e, h, m) { _onTimeChange: function (e, h, m, s) {
var date = new Date(), var date = new Date(),
selectedDates = this.selectedDates, selectedDates = this.selectedDates,
selected = false; selected = false;
@ -1260,6 +1269,7 @@
date.setHours(h); date.setHours(h);
date.setMinutes(m); date.setMinutes(m);
date.setSeconds(s);
if (!selected && !this._getCell(date).hasClass('-disabled-')) { if (!selected && !this._getCell(date).hasClass('-disabled-')) {
this.selectDate(date); this.selectDate(date);
@ -1275,6 +1285,7 @@
if (this.timepicker) { if (this.timepicker) {
date.setHours(this.timepicker.hours); date.setHours(this.timepicker.hours);
date.setMinutes(this.timepicker.minutes); date.setMinutes(this.timepicker.minutes);
date.setSeconds(this.timepicker.seconds)
} }
this.selectDate(date); this.selectDate(date);
}, },
@ -1398,7 +1409,8 @@
hours: date.getHours(), hours: date.getHours(),
fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() , fullHours: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ,
minutes: date.getMinutes(), minutes: date.getMinutes(),
fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() fullMinutes: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
seconds: date.getSeconds()
} }
}; };

38
src/js/timepicker.js
View File

@ -4,6 +4,8 @@
' <span class="datepicker--time-current-hours">#{hourVisible}</span>' + ' <span class="datepicker--time-current-hours">#{hourVisible}</span>' +
' <span class="datepicker--time-current-colon">:</span>' + ' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-minutes">#{minValue}</span>' + ' <span class="datepicker--time-current-minutes">#{minValue}</span>' +
' <span class="datepicker--time-current-colon">:</span>' +
' <span class="datepicker--time-current-seconds">#{secValue}</span>' +
'</div>' + '</div>' +
'<div class="datepicker--time-sliders">' + '<div class="datepicker--time-sliders">' +
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
@ -12,6 +14,9 @@
' <div class="datepicker--time-row">' + ' <div class="datepicker--time-row">' +
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' + ' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' + ' </div>' +
' <div class="datepicker--time-row">' +
' <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
' </div>' +
'</div>' + '</div>' +
'</div>', '</div>',
datepicker = $.fn.datepicker, datepicker = $.fn.datepicker,
@ -47,6 +52,7 @@
this._handleDate(date); this._handleDate(date);
this.hours = _date.hours < this.minHours ? this.minHours : _date.hours; this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes; this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
}, },
/** /**
@ -58,6 +64,7 @@
_setMinTimeFromDate: function (date) { _setMinTimeFromDate: function (date) {
this.minHours = date.getHours(); this.minHours = date.getHours();
this.minMinutes = date.getMinutes(); this.minMinutes = date.getMinutes();
this.minSeconds = date.getSeconds();
// If, for example, min hours are 10, and current hours are 12, // If, for example, min hours are 10, and current hours are 12,
// update minMinutes to default value, to be able to choose whole range of values // update minMinutes to default value, to be able to choose whole range of values
@ -71,6 +78,7 @@
_setMaxTimeFromDate: function (date) { _setMaxTimeFromDate: function (date) {
this.maxHours = date.getHours(); this.maxHours = date.getHours();
this.maxMinutes = date.getMinutes(); this.maxMinutes = date.getMinutes();
this.maxSeconds = date.getSeconds();
if (this.d.lastSelectedDate) { if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() < date.getHours()) { if (this.d.lastSelectedDate.getHours() < date.getHours()) {
@ -82,12 +90,15 @@
_setDefaultMinMaxTime: function () { _setDefaultMinMaxTime: function () {
var maxHours = 23, var maxHours = 23,
maxMinutes = 59, maxMinutes = 59,
maxSeconds = 59,
opts = this.opts; opts = this.opts;
this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours; this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes; this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours; this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes; this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
}, },
/** /**
@ -107,6 +118,12 @@
} else if (this.minutes > this.maxMinutes) { } else if (this.minutes > this.maxMinutes) {
this.minutes = this.maxMinutes; this.minutes = this.maxMinutes;
} }
if (this.seconds < this.minSeconds) {
this.seconds = this.minSeconds;
} else if (this.seconds > this.maxSeconds) {
this.seconds = this.maxSeconds;
}
}, },
_buildHTML: function () { _buildHTML: function () {
@ -120,7 +137,11 @@
minMin: this.minMinutes, minMin: this.minMinutes,
minMax: lz(this.maxMinutes), minMax: lz(this.maxMinutes),
minStep: this.opts.minutesStep, minStep: this.opts.minutesStep,
minValue: lz(this.minutes) minValue: lz(this.minutes),
secMin: this.minSeconds,
secMax: lz(this.maxSeconds),
secStep: this.opts.secondsStep,
secValue: lz(this.seconds)
}, },
_template = dp.template(template, data); _template = dp.template(template, data);
@ -128,8 +149,10 @@
this.$ranges = $('[type="range"]', this.$timepicker); this.$ranges = $('[type="range"]', this.$timepicker);
this.$hours = $('[name="hours"]', this.$timepicker); this.$hours = $('[name="hours"]', this.$timepicker);
this.$minutes = $('[name="minutes"]', this.$timepicker); this.$minutes = $('[name="minutes"]', this.$timepicker);
this.$seconds = $('[name="seconds"]', this.$timepicker);
this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker); this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker); this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm = $('<span class="datepicker--time-current-ampm">') this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -142,10 +165,12 @@
_updateCurrentTime: function () { _updateCurrentTime: function () {
var h = dp.getLeadingZeroNum(this.displayHours), var h = dp.getLeadingZeroNum(this.displayHours),
m = dp.getLeadingZeroNum(this.minutes); m = dp.getLeadingZeroNum(this.minutes),
s = dp.getLeadingZeroNum(this.seconds);
this.$hoursText.html(h); this.$hoursText.html(h);
this.$minutesText.html(m); this.$minutesText.html(m);
this.$secondsText.html(s);
if (this.d.ampm) { if (this.d.ampm) {
this.$ampm.html(this.dayPeriod); this.$ampm.html(this.dayPeriod);
@ -161,7 +186,12 @@
this.$minutes.attr({ this.$minutes.attr({
min: this.minMinutes, min: this.minMinutes,
max: this.maxMinutes max: this.maxMinutes
}).val(this.minutes) }).val(this.minutes);
this.$seconds.attr({
min: this.minSeconds,
max: this.maxSeconds
}).val(this.seconds);
}, },
/** /**
@ -254,7 +284,7 @@
this[name] = $target.val(); this[name] = $target.val();
this._updateCurrentTime(); this._updateCurrentTime();
this.d._trigger('timeChange', [this.hours, this.minutes]); this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
this._handleDate(this.d.lastSelectedDate); this._handleDate(this.d.lastSelectedDate);
this.update() this.update()

9
src/sass/timepicker.scss
View File

@ -94,7 +94,7 @@ $rangeThumbBg: #dedede;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin: 0 0 0 10px; margin: 0 10px;
} }
.datepicker--time-current-colon { .datepicker--time-current-colon {
@ -103,9 +103,10 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time-current-hours, .datepicker--time-current-hours,
.datepicker--time-current-minutes { .datepicker--time-current-minutes,
.datepicker--time-current-seconds {
line-height: 1; line-height: 1;
font-size: 19px; font-size: 14px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -132,7 +133,7 @@ $rangeThumbBg: #dedede;
.datepicker--time-current-ampm { .datepicker--time-current-ampm {
text-transform: uppercase; text-transform: uppercase;
align-self: flex-end; align-self: flex-start;
color: map_get($datepickerTextColor, navArrows); color: map_get($datepickerTextColor, navArrows);
margin-left: 6px; margin-left: 6px;
font-size: 11px; font-size: 11px;

31
visual-tests.html
View File

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