whisper.cat stuff

This commit is contained in:
[Harper Innes]
2023-10-05 23:28:32 +11:00
parent 2a6e28637c
commit f127b4fea8
5224 changed files with 919361 additions and 0 deletions

View File

@ -0,0 +1,4 @@
require('./datepicker');
require('./body');
require('./navigation');
require('./timepicker');

View File

@ -0,0 +1,311 @@
;(function () {
var templates = {
days:'' +
'<div class="datepicker--days datepicker--body">' +
'<div class="datepicker--days-names"></div>' +
'<div class="datepicker--cells datepicker--cells-days"></div>' +
'</div>',
months: '' +
'<div class="datepicker--months datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-months"></div>' +
'</div>',
years: '' +
'<div class="datepicker--years datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-years"></div>' +
'</div>'
},
datepicker = $.fn.datepicker,
dp = datepicker.Constructor;
datepicker.Body = function (d, type, opts) {
this.d = d;
this.type = type;
this.opts = opts;
this.$el = $('');
if (this.opts.onlyTimepicker) return;
this.init();
};
datepicker.Body.prototype = {
init: function () {
this._buildBaseHtml();
this._render();
this._bindEvents();
},
_bindEvents: function () {
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this));
},
_buildBaseHtml: function () {
this.$el = $(templates[this.type]).appendTo(this.d.$content);
this.$names = $('.datepicker--days-names', this.$el);
this.$cells = $('.datepicker--cells', this.$el);
},
_getDayNamesHtml: function (firstDay, curDay, html, i) {
curDay = curDay != undefined ? curDay : firstDay;
html = html ? html : '';
i = i != undefined ? i : 0;
if (i > 7) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.daysMin[curDay] + '</div>';
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
},
_getCellContents: function (date, type) {
var classes = "datepicker--cell datepicker--cell-" + type,
currentDate = new Date(),
parent = this.d,
minRange = dp.resetTime(parent.minRange),
maxRange = dp.resetTime(parent.maxRange),
opts = parent.opts,
d = dp.getParsedDate(date),
render = {},
html = d.date;
switch (type) {
case 'day':
if (parent.isWeekend(d.day)) classes += " -weekend-";
if (d.month != this.d.parsedDate.month) {
classes += " -other-month-";
if (!opts.selectOtherMonths) {
classes += " -disabled-";
}
if (!opts.showOtherMonths) html = '';
}
break;
case 'month':
html = parent.loc[parent.opts.monthsField][d.month];
break;
case 'year':
var decade = parent.curDecade;
html = d.year;
if (d.year < decade[0] || d.year > decade[1]) {
classes += ' -other-decade-';
if (!opts.selectOtherYears) {
classes += " -disabled-";
}
if (!opts.showOtherYears) html = '';
}
break;
}
if (opts.onRenderCell) {
render = opts.onRenderCell(date, type) || {};
html = render.html ? render.html : html;
classes += render.classes ? ' ' + render.classes : '';
}
if (opts.range) {
if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
if (parent.selectedDates.length == 1 && parent.focused) {
if (
(dp.bigger(minRange, date) && dp.less(parent.focused, date)) ||
(dp.less(maxRange, date) && dp.bigger(parent.focused, date)))
{
classes += ' -in-range-'
}
if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-from-'
}
if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
classes += ' -range-to-'
}
} else if (parent.selectedDates.length == 2) {
if (dp.bigger(minRange, date) && dp.less(maxRange, date)) {
classes += ' -in-range-'
}
}
}
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-';
return {
html: html,
classes: classes
}
},
/**
* Calculates days number to render. Generates days html and returns it.
* @param {object} date - Date object
* @returns {string}
* @private
*/
_getDaysHtml: function (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,
daysFromNextMonth = 6 - lastMonthDay + this.d.loc.firstDay;
daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
var startDayIndex = -daysFromPevMonth + 1,
m, y,
html = '';
for (var i = startDayIndex, max = totalMonthDays + daysFromNextMonth; i <= max; i++) {
y = date.getFullYear();
m = date.getMonth();
html += this._getDayHtml(new Date(y, m, i))
}
return html;
},
_getDayHtml: function (date) {
var content = this._getCellContents(date, 'day');
return '<div class="' + content.classes + '" ' +
'data-date="' + date.getDate() + '" ' +
'data-month="' + date.getMonth() + '" ' +
'data-year="' + date.getFullYear() + '">' + content.html + '</div>';
},
/**
* Generates months html
* @param {object} date - date instance
* @returns {string}
* @private
*/
_getMonthsHtml: function (date) {
var html = '',
d = dp.getParsedDate(date),
i = 0;
while(i < 12) {
html += this._getMonthHtml(new Date(d.year, i));
i++
}
return html;
},
_getMonthHtml: function (date) {
var content = this._getCellContents(date, 'month');
return '<div class="' + content.classes + '" data-month="' + date.getMonth() + '">' + content.html + '</div>'
},
_getYearsHtml: function (date) {
var d = dp.getParsedDate(date),
decade = dp.getDecade(date),
firstYear = decade[0] - 1,
html = '',
i = firstYear;
for (i; i <= decade[1] + 1; i++) {
html += this._getYearHtml(new Date(i , 0));
}
return html;
},
_getYearHtml: function (date) {
var content = this._getCellContents(date, 'year');
return '<div class="' + content.classes + '" data-year="' + date.getFullYear() + '">' + content.html + '</div>'
},
_renderTypes: {
days: function () {
var dayNames = this._getDayNamesHtml(this.d.loc.firstDay),
days = this._getDaysHtml(this.d.currentDate);
this.$cells.html(days);
this.$names.html(dayNames)
},
months: function () {
var html = this._getMonthsHtml(this.d.currentDate);
this.$cells.html(html)
},
years: function () {
var html = this._getYearsHtml(this.d.currentDate);
this.$cells.html(html)
}
},
_render: function () {
if (this.opts.onlyTimepicker) return;
this._renderTypes[this.type].bind(this)();
},
_update: function () {
var $cells = $('.datepicker--cell', this.$cells),
_this = this,
classes,
$cell,
date;
$cells.each(function (cell, i) {
$cell = $(this);
date = _this.d._getDateFromCell($(this));
classes = _this._getCellContents(date, _this.d.cellType);
$cell.attr('class',classes.classes)
});
},
show: function () {
if (this.opts.onlyTimepicker) return;
this.$el.addClass('active');
this.acitve = true;
},
hide: function () {
this.$el.removeClass('active');
this.active = false;
},
// Events
// -------------------------------------------------
_handleClick: function (el) {
var date = el.data('date') || 1,
month = el.data('month') || 0,
year = el.data('year') || this.d.parsedDate.year,
dp = this.d;
// Change view if min view does not reach yet
if (dp.view != this.opts.minView) {
dp.down(new Date(year, month, date));
return;
}
// Select date if min view is reached
var selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
if (!alreadySelected) {
dp._trigger('clickCell', selectedDate);
return;
}
dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
},
_onClickCell: function (e) {
var $el = $(e.target).closest('.datepicker--cell');
if ($el.hasClass('-disabled-')) return;
this._handleClick.bind(this)($el);
}
};
})();

File diff suppressed because it is too large Load Diff

View File

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

View 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
};

View File

@ -0,0 +1,12 @@
$.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'],
months: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'],
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
today: 'Heute',
clear: 'Aufräumen',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};

View File

@ -0,0 +1,12 @@
$.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'],
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
dateFormat: 'mm/dd/yyyy',
timeFormat: 'hh:ii aa',
firstDay: 0
};

View File

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

View File

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

View File

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

View File

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

View 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
};

View File

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

View 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
};

View 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
};

View 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
};

View File

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

View File

@ -0,0 +1,12 @@
$.fn.datepicker.language['zh'] = {
days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
daysShort: ['日', '一', '二', '三', '四', '五', '六'],
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
today: '今天',
clear: '清除',
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii',
firstDay: 1
};

View File

@ -0,0 +1,145 @@
;(function () {
var template = '' +
'<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
'<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>',
datepicker = $.fn.datepicker,
dp = datepicker.Constructor;
datepicker.Navigation = function (d, opts) {
this.d = d;
this.opts = opts;
this.$buttonsContainer = '';
this.init();
};
datepicker.Navigation.prototype = {
init: function () {
this._buildBaseHtml();
this._bindEvents();
},
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this));
},
_buildBaseHtml: function () {
if (!this.opts.onlyTimepicker) {
this._render();
}
this._addButtonsIfNeed();
},
_addButtonsIfNeed: function () {
if (this.opts.todayButton) {
this._addButton('today')
}
if (this.opts.clearButton) {
this._addButton('clear')
}
},
_render: function () {
var title = this._getTitle(this.d.currentDate),
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-');
}
this.setNavStatus();
},
_getTitle: function (date) {
return this.d.formatDate(this.opts.navTitles[this.d.view], date)
},
_addButton: function (type) {
if (!this.$buttonsContainer.length) {
this._addButtonsContainer();
}
var data = {
action: type,
label: this.d.loc[type]
},
html = dp.template(button, data);
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
this.$buttonsContainer.append(html);
},
_addButtonsContainer: function () {
this.d.$datepicker.append(buttonsContainerTemplate);
this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker);
},
setNavStatus: function () {
if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
var date = this.d.parsedDate,
m = date.month,
y = date.year,
d = date.date;
switch (this.d.view) {
case 'days':
if (!this.d._isInRange(new Date(y, m-1, 1), 'month')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y, m+1, 1), 'month')) {
this._disableNav('next')
}
break;
case 'months':
if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
this._disableNav('next')
}
break;
case 'years':
var decade = dp.getDecade(this.d.date);
if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(decade[1] + 1, 0, 1), 'year')) {
this._disableNav('next')
}
break;
}
},
_disableNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
},
_activateNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
},
_onClickNavButton: function (e) {
var $el = $(e.target).closest('[data-action]'),
action = $el.data('action');
this.d[action]();
},
_onClickNavTitle: function (e) {
if ($(e.target).hasClass('-disabled-')) return;
if (this.d.view == 'days') {
return this.d.view = 'months'
}
this.d.view = 'years';
}
}
})();

View File

@ -0,0 +1,283 @@
;(function () {
var template = '<div class="datepicker--time">' +
'<div class="datepicker--time-current">' +
' <span class="datepicker--time-current-hours">#{hourVisible}</span>' +
' <span class="datepicker--time-current-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;
},
/**
* Sets minHours and minMinutes from date (usually it's a minDate)
* Also changes minMinutes if current hours are bigger then @date hours
* @param date {Date}
* @private
*/
_setMinTimeFromDate: function (date) {
this.minHours = date.getHours();
this.minMinutes = date.getMinutes();
// If, for example, min hours are 10, and current hours are 12,
// update minMinutes to default value, to be able to choose whole range of values
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() > date.getHours()) {
this.minMinutes = this.opts.minMinutes;
}
}
},
_setMaxTimeFromDate: function (date) {
this.maxHours = date.getHours();
this.maxMinutes = date.getMinutes();
if (this.d.lastSelectedDate) {
if (this.d.lastSelectedDate.getHours() < date.getHours()) {
this.maxMinutes = this.opts.maxMinutes;
}
}
},
_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: this.hours,
hourVisible: 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
* @param [ampm] {Boolean} - 12 hours mode
* @returns {{hours: *, dayPeriod: string}}
* @private
*/
_getValidHoursFromDate: function (date, ampm) {
var d = date,
hours = date;
if (date instanceof Date) {
d = dp.getParsedDate(date);
hours = d.hours;
}
var _ampm = 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]);
this._handleDate(this.d.lastSelectedDate);
this.update()
},
_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;
}
};
})();

View File

@ -0,0 +1,84 @@
$datepickerDayCellSize: 32px !default;
$datepickerWidth: 250px !default;
$datepickerMinBodyHeight: 170px !default;
$datepickerBorderRadius: 4px !default;
$datepickerPadding: 4px !default;
$datepickerZIndex: 100 !default;
$datepickerFontFamily: Tahoma !default;
$datepickerFontSize: 14px !default;
$datepickerYearsPerRow: 4 !default;
$datepickerTextColor: (
button: #5cc4ef,
otherMonth: #dedede,
otherMonthInRange: #ccc,
disabled: #aeaeae,
currentDate: #4EB5E6,
common: #4a4a4a,
dayNames: #FF9A19,
navArrows: #9c9c9c
) !default;
$datepickerBG: (
selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5),
inRange: rgba(#5cc4ef, .1),
hover: #f0f0f0
) !default;
$datepickerBorderColor: (
nav: #efefef,
inline: #d7d7d7,
default: #dbdbdb
) !default;
$datepickerNavigationHeight: 32px !default;
$datepickerNavigationButtonsOffset: 2px !default;
$datepickerPointerSize: 10px !default;
$datepickerPointerOffset: 10px !default;
// Transitions
$datepickerTransitionSpeed: .3s !default;
$datepickerTransitionEase: ease !default;
$datepickerTransitionOffset: 8px !default;
// Objects
%otherMonth {
color: map_get($datepickerTextColor, otherMonth);
&:hover {
color: darken(map_get($datepickerTextColor, otherMonth), 10);
}
&.-disabled- {
&.-focus- {
color: map_get($datepickerTextColor, otherMonth);
}
}
&.-selected- {
color: #fff;
background: lighten(map_get($datepickerBG, selected), 15);
&.-focus- {
background: lighten(map_get($datepickerBG, selected), 10);
}
}
&.-in-range- {
background-color: map_get($datepickerBG, inRange);
color: darken(map_get($datepickerTextColor, otherMonth), 7);
&.-focus- {
background-color: rgba(map_get($datepickerBG, inRange), .2);
}
}
&:empty {
background: none;
border: none;
}
}

View File

@ -0,0 +1,173 @@
@import "datepicker-config";
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
.datepicker--cells {
display: flex;
flex-wrap: wrap;
}
.datepicker--cell {
border-radius: $datepickerBorderRadius;
box-sizing: border-box;
cursor: pointer;
display: flex;
position: relative;
align-items: center;
justify-content: center;
height: $datepickerDayCellSize;
z-index: 1;
&.-focus- {
background: map_get($datepickerBG, hover);
}
&.-current- {
color: map_get($datepickerTextColor, currentDate);
&.-focus- {
color: map_get($datepickerTextColor, common);
}
&.-in-range- {
color: map_get($datepickerTextColor, currentDate);
}
}
&.-in-range- {
background: map_get($datepickerBG, inRange);
color: map_get($datepickerTextColor, common);
border-radius: 0;
&.-focus- {
background-color: rgba(map_get($datepickerBG, inRange), .2);
}
}
&.-disabled- {
cursor: default;
color: map_get($datepickerTextColor, disabled);
&.-focus- {
color: map_get($datepickerTextColor, disabled);
}
&.-in-range- {
color: darken(map_get($datepickerTextColor, disabled), 5);
}
&.-current- {
&.-focus- {
color: map_get($datepickerTextColor, disabled);
}
}
}
&.-range-from- {
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
background-color: map_get($datepickerBG, inRange);
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
}
&.-range-to- {
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
background-color: map_get($datepickerBG, inRange);
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
}
&.-range-from-.-range-to- {
border-radius: $datepickerBorderRadius;
}
&.-selected- {
color: #fff;
border: none;
background: map_get($datepickerBG, selected);
&.-current- {
color: #fff;
background: map_get($datepickerBG, selected);
}
&.-focus- {
background: map_get($datepickerBG, selectedHover);
}
}
&:empty {
cursor: default;
}
}
// Day names
// -------------------------------------------------
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
margin: 8px 0 3px;
}
.datepicker--day-name {
color: map_get($datepickerTextColor, dayNames);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: .8em;
}
// Day cell
// -------------------------------------------------
.datepicker--cell-day {
width: (100/7)#{'%'};
&.-other-month- {
@extend %otherMonth;
}
}
// Months
// -------------------------------------------------
.datepicker--months {}
.datepicker--cells-months {
height: $datepickerMinBodyHeight;
}
// Month cell
// -------------------------
.datepicker--cell-month {
width: 33.33%;
height: 25%;
}
// Years
// -------------------------------------------------
.datepicker--years {
height: $datepickerMinBodyHeight;
}
.datepicker--cells-years {
height: $datepickerMinBodyHeight;
}
// Year cell
// -------------------------
.datepicker--cell-year {
width: 100% / $datepickerYearsPerRow;
height: 33.33%;
&.-other-decade- {
@extend %otherMonth;
}
}

View File

@ -0,0 +1,149 @@
@import "datepicker-config";
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
.datepickers-container {
position: absolute;
left: 0;
top: 0;
@media print {
display: none;
}
}
.datepicker {
background: #fff;
border: 1px solid map_get($datepickerBorderColor, default);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
font-family: $datepickerFontFamily, sans-serif;
font-size: $datepickerFontSize;
color: map_get($datepickerTextColor, common);
width: $datepickerWidth;
position: absolute;
left: -100000px;
opacity: 0;
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
z-index: $datepickerZIndex;
&.-from-top- {
transform: translateY(-$datepickerTransitionOffset);
}
&.-from-right- {
transform: translateX($datepickerTransitionOffset);
}
&.-from-bottom- {
transform: translateY($datepickerTransitionOffset);
}
&.-from-left- {
transform: translateX(-$datepickerTransitionOffset);
}
&.active {
opacity: 1;
transform: translate(0);
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
}
}
.datepicker-inline {
.datepicker {
border-color: map-get($datepickerBorderColor, inline);
box-shadow: none;
position: static;
left: auto;
right: auto;
opacity: 1;
transform: none;
}
.datepicker--pointer {
display: none;
}
}
.datepicker--content {
box-sizing: content-box;
padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
}
// Pointer
// -------------------------------------------------
$pointerHalfSize: $datepickerPointerSize / 2 - 1;
.datepicker--pointer {
position: absolute;
background: #fff;
border-top: 1px solid map-get($datepickerBorderColor, default);
border-right: 1px solid map-get($datepickerBorderColor, default);
width: $datepickerPointerSize;
height: $datepickerPointerSize;
z-index: -1;
// Main axis
// -------------------------
.-top-left- &, .-top-center- &, .-top-right- & {
top: calc(100% - #{$pointerHalfSize});
transform: rotate(135deg);
}
.-right-top- &, .-right-center- &, .-right-bottom- & {
right: calc(100% - #{$pointerHalfSize});
transform: rotate(225deg);
}
.-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
bottom: calc(100% - #{$pointerHalfSize});
transform: rotate(315deg);
}
.-left-top- &, .-left-center- &, .-left-bottom- & {
left: calc(100% - #{$pointerHalfSize});
transform: rotate(45deg);
}
// Secondary axis
// -------------------------
.-top-left- &, .-bottom-left- & {
left: $datepickerPointerOffset;
}
.-top-right- &, .-bottom-right- & {
right: $datepickerPointerOffset;
}
.-top-center- &, .-bottom-center- & {
left: calc(50% - #{$datepickerPointerSize} / 2);
}
.-left-top- &, .-right-top- & {
top: $datepickerPointerOffset;
}
.-left-bottom- &, .-right-bottom- & {
bottom: $datepickerPointerOffset;
}
.-left-center- &, .-right-center- & {
top: calc(50% - #{$datepickerPointerSize} / 2);
}
}
// Body
// -------------------------------------------------
.datepicker--body {
display: none;
&.active {
display: block;
}
}

View File

@ -0,0 +1,95 @@
@import "datepicker-config";
/* -------------------------------------------------
Navigation
------------------------------------------------- */
.datepicker--nav {
display: flex;
justify-content: space-between;
border-bottom: 1px solid map_get($datepickerBorderColor, nav);
min-height: $datepickerNavigationHeight;
padding: $datepickerPadding;
.-only-timepicker- & {
display: none;
}
}
.datepicker--nav-title,
.datepicker--nav-action {
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.datepicker--nav-action {
width: $datepickerDayCellSize;
border-radius: $datepickerBorderRadius;
user-select: none;
&:hover {
background: map_get($datepickerBG, hover);
}
&.-disabled- {
visibility: hidden;
}
svg {
width: 32px;
height: 32px;
}
path {
fill: none;
stroke: map_get($datepickerTextColor, navArrows);
stroke-width: 2px;
}
}
.datepicker--nav-title {
border-radius: $datepickerBorderRadius;
padding: 0 8px;
i {
font-style: normal;
color: map_get($datepickerTextColor, navArrows);
margin-left: 5px;
}
&:hover {
background: map_get($datepickerBG, hover);
}
&.-disabled- {
cursor: default;
background: none;
}
}
// Buttons
// -------------------------------------------------
.datepicker--buttons {
display: flex;
padding: $datepickerPadding;
border-top: 1px solid map_get($datepickerBorderColor, nav);
}
.datepicker--button {
color: map_get($datepickerTextColor, currentDate);
cursor: pointer;
border-radius: $datepickerBorderRadius;
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
height: 32px;
&:hover {
color: map_get($datepickerTextColor, common);
background: map_get($datepickerBG, hover);
}
}

View File

@ -0,0 +1,251 @@
@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($datepickerBorderColor, nav);
display: flex;
align-items: center;
padding: $datepickerPadding;
position: relative;
&.-am-pm- {
.datepicker--time-sliders {
flex: 0 1 138px;
max-width: 138px;
}
}
.-only-timepicker- & {
border-top: none;
}
}
.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($datepickerBG, 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($datepickerTextColor, 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($datepickerBG, selected);
border-color: map_get($datepickerBG, 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($datepickerTextColor, 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);
}
}