datepickk
Version:
Flexbox/js datepicker
1,239 lines (1,123 loc) • 34 kB
JavaScript
/*!
* Datepickk
* Docs & License: https://crsten.github.com/datepickk
* (c) 2017 Carsten Jacobsen
*/
import '../css/datepickk.less';
function Datepickk(args){
Datepickk.numInstances = (Datepickk.numInstances || 0) + 1;
var that = this;
var eventName = 'click';
var selectedDates = [];
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
var languages = {
no: {
monthNames:['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],
dayNames:['sø','ma','ti','on','to','fr','lø'],
weekStart:1
},
se: {
monthNames:['januari','februari','mars','april','maj','juni','juli','augusti','september','oktober','november','december'],
dayNames:['sö','må','ti','on','to','fr','lö'],
weekStart:1
},
ru: {
monthNames:['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
dayNames:['вс','пн','вт','ср','чт','пт','сб'],
weekStart:1
},
en: {
monthNames:['january','february','march','april','may','june','july','august','september','october','november','december'],
dayNames:['su','mo','tu','we','th','fr','sa'],
weekStart:0
},
de: {
monthNames:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
dayNames:['So','Mo','Di','Mi','Do','Fr','Sa'],
weekStart:1
}
};
/*Language aliases*/
languages.nb = languages.no;
languages.nn = languages.no;
var range = false;
var maxSelections = null;
var container = document.body;
var opened = false;
var months = 1;
var closeOnSelect = false;
var button = null;
var title = null;
var onNavigation = null;
var onClose = null;
var onConfirm = null;
var closeOnClick = true;
var inline = false;
var lang = 'en';
var onSelect = null;
var disabledDates = [];
var disabledDays = [];
var highlight = [];
var tooltips = {};
var daynames = true;
var today = true;
var startDate = null;
var minDate = null;
var maxDate = null;
var weekStart = null;
var locked = false;
function generateDaynames(){
that.el.days.innerHTML = '';
var ws = (weekStart !== null) ? weekStart : languages[lang].weekStart;
if(daynames){
for(var x = 0;x<months && x<3;x++){
var weekEl = document.createElement('div');
weekEl.setAttribute('class','d-week');
for(var i = 0; i < 7;i++){
var dayNameIndex = (i + ws > languages[lang].dayNames.length - 1) ? i + ws - languages[lang].dayNames.length : i + ws;
var dayEl = document.createElement('div');
var dayTextEl = document.createElement('p');
dayTextEl.innerHTML = languages[lang].dayNames[dayNameIndex];
dayEl.appendChild(dayTextEl);
weekEl.appendChild(dayEl);
}
that.el.days.appendChild(weekEl);
}
}
}
function generateYears(){
[].slice.call(that.el.yearPicker.childNodes).forEach(function(node,index) {
node.innerHTML = "'" + (currentYear + parseInt(node.getAttribute('data-year'))).toString().substring(2,4);
})
}
function generateInputs(){
that.el.tables.innerHTML = '';
for(var x = 0;x<months;x++){
var container = document.createElement('div');
container.setAttribute('class','d-table');
for(var i = 0;i<42;i++){
var input = document.createElement('input');
input.type = 'checkbox';
input.id = Datepickk.numInstances + '-' + x + '-d-day-' + i;
var label = document.createElement('label');
label.setAttribute("for",Datepickk.numInstances + '-' + x + '-d-day-' + i);
var text = document.createElement('text');
var tooltip = document.createElement('span');
tooltip.setAttribute('class','d-tooltip');
container.appendChild(input);
container.appendChild(label);
label.appendChild(text);
label.appendChild(tooltip);
input.addEventListener(eventName,function(event){
if(locked){
event.preventDefault();
}
});
input.addEventListener('change',inputChange);
}
that.el.tables.appendChild(container);
}
that.el.tables.addEventListener('mouseover',highlightLegend);
that.el.tables.addEventListener('mouseout',highlightLegend);
function highlightLegend(e){
if(e.target.nodeName !== 'LABEL') return;
var legendIds = (e.target.getAttribute('data-legend-id'))?e.target.getAttribute('data-legend-id').split(' '):[];
if(!legendIds.length) return;
legendIds.forEach(function(legendId) {
var element = that.el.legend.querySelector('[data-legend-id="' + legendId + '"]');
if(e.type == 'mouseover' && element){
var color = (element.getAttribute('data-color'))?hexToRgb(element.getAttribute('data-color')):null;
element.setAttribute('style','background-color:rgba(' + color.r + ',' + color.g + ',' + color.b + ',0.35);');
}else if(element){
element.removeAttribute('style');
}
});
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
}
}
function generateLegends(){
var start = new Date(that.el.tables.childNodes[0].childNodes[0].getAttribute('data-date'));
var end = new Date(that.el.tables.childNodes[months-1].childNodes[82].getAttribute('data-date'));
var _highlights = highlight.filter(function(x){
for(var m = 0;m < x.dates.length;m++){
if(x.dates[m].start < end && x.dates[m].end > start){
return true;
}
}
return false;
});
var legends = [];
for(var l = 0;l<_highlights.length;l++){
if('legend' in _highlights[l] && _highlights[l].legend){
var oldLegend = container.querySelector('.d-legend-item[data-legend="' + _highlights[l].legend + '"][data-color="' + _highlights[l].backgroundColor + '"]');
if(oldLegend == null){
var legendItem = document.createElement('p');
legendItem.setAttribute('class','d-legend-item');
legendItem.setAttribute('data-legend',_highlights[l].legend);
legendItem.setAttribute('data-legend-id',highlight.indexOf(_highlights[l]));
legendItem.setAttribute('data-color',_highlights[l].backgroundColor);
var legendItemPoint = document.createElement('span');
legendItemPoint.setAttribute('style','background-color:' + _highlights[l].backgroundColor);
legendItem.appendChild(legendItemPoint);
that.el.legend.appendChild(legendItem);
legendItem.addEventListener('mouseover',hoverLegend);
legendItem.addEventListener('mouseout',hoverLegend);
legends.push(legendItem);
}else{
legends.push(oldLegend);
}
}
}
[].slice.call(that.el.legend.querySelectorAll('.d-legend-item')).forEach(function(item) {
if(legends.indexOf(item) < 0){
item.removeEventListener('mouseover',hoverLegend);
item.removeEventListener('mouseout',hoverLegend);
that.el.legend.removeChild(item);
}
});
function hoverLegend(e){
[].slice.call(that.el.tables.querySelectorAll('[data-legend-id*="' + this.getAttribute('data-legend-id') + '"]')).forEach(function(element) {
if(e.type == 'mouseover') element.classList.add('legend-hover');
else element.classList.remove('legend-hover');
});
}
}
function parseMonth(month){
if(month > 11) month -= 12;
else if(month < 0) month += 12;
return month;
}
function generateDates(year,month){
var monthElements = that.el.querySelectorAll('.d-table');
var ws = (weekStart !== null) ? weekStart : languages[lang].weekStart;
[].slice.call(that.el.querySelectorAll('.d-table')).forEach(function(element, index) {
var days = new Date(year,month + index,0).getDate();
var daysLast = new Date(year,month + index - 1,0).getDate();
var startDay = new Date(year,month + index - 1,1).getDay();
var startDate = null;
var endDate = null;
if(startDay - ws < 0){
startDay = 7 - ws;
}else{
startDay -= ws;
}
var monthText = languages[lang].monthNames[parseMonth(month - 1 + index)];
element.setAttribute('data-month',monthText);
[].slice.call(element.querySelectorAll('.d-table input')).forEach(function(inputEl,i) {
var labelEl = inputEl.nextSibling;
inputEl.checked = false;
inputEl.removeAttribute('disabled');
labelEl.removeAttribute('style');
labelEl.removeAttribute('data-legend-id');
labelEl.className = '';
var date = null;
if(i < startDay){
labelEl.childNodes[0].innerHTML = daysLast - (startDay - i - 1);
if(index == 0){
date = new Date(year,month + index - 2,daysLast - (startDay - i - 1));
labelEl.className = 'prev';
}else{
date = '';
labelEl.className = 'd-hidden';
inputEl.setAttribute('disabled',true);
}
}else if(i < days + startDay){
date = new Date(year,month + index - 1,i - startDay+1);
labelEl.childNodes[0].innerHTML = i - startDay + 1;
labelEl.className = '';
}else{
labelEl.childNodes[0].innerHTML = i - days - startDay + 1;
if(index == monthElements.length-1){
date = new Date(year,month + index,i - days - startDay + 1);
labelEl.className = 'next';
}else{
date = '';
labelEl.className = 'd-hidden';
inputEl.setAttribute('disabled',true);
}
}
if(date instanceof Date){
inputEl.setAttribute('data-date',date.toJSON());
if(disabledDates.indexOf(date.getTime()) != -1 || disabledDays.indexOf(date.getDay()) != -1){
inputEl.setAttribute('disabled',true);
}
if((minDate && date < minDate) || (maxDate && date > maxDate)){
inputEl.setAttribute('disabled',true);
labelEl.className = 'd-hidden';
}
if(today && date.getTime() == new Date().setHours(0,0,0,0)){
labelEl.classList.add('today');
}else{
labelEl.classList.remove('today');
}
if(tooltips[date.getTime()]){
labelEl.childNodes[0].setAttribute('data-tooltip',true);
labelEl.childNodes[1].innerHTML = tooltips[date.getTime()];
}else{
labelEl.childNodes[0].removeAttribute('data-tooltip');
labelEl.childNodes[1].innerHTML = '';
}
var _highlights = highlight.filter(function(x){
for(var m = 0;m < x.dates.length;m++){
if(date.getTime() >= x.dates[m].start.getTime() && date.getTime() <= x.dates[m].end.getTime()){
return true;
}
}
return false;
});
if(_highlights.length > 0){
var bgColor = '';
var legendIds = '';
if(_highlights.length > 1){
var percent = Math.round(100 / _highlights.length);
bgColor = 'background: linear-gradient(-45deg,';
for(var z = 0;z < _highlights.length;z++){
legendIds += highlight.indexOf(_highlights[z]);
if(z !== _highlights.length -1){legendIds += ' ';}
bgColor += _highlights[z].backgroundColor + ' ' + (percent*z) + '%';
if(z != _highlights.length - 1){
bgColor += ',';
bgColor += _highlights[z].backgroundColor + ' ' + (percent*(z+1)) + '%,';
}
}
bgColor += ');';
}else{
bgColor = (_highlights[0].backgroundColor)?'background:'+ _highlights[0].backgroundColor + ';':'';
legendIds += highlight.indexOf(_highlights[0]);
}
var Color = (_highlights[0].color)?'color:'+ _highlights[0].color + ';':'';
labelEl.setAttribute('style',bgColor + Color);
labelEl.setAttribute('data-legend-id',legendIds);
}
}
});
});
generateLegends();
};
function setDate(){
if(!that.el.tables.childNodes.length || !that.el.tables.childNodes[0].childNodes.length) return;
resetCalendar();
if(currentMonth > 12 || currentMonth < 1){
if(currentMonth > 12){
currentYear += 1;
currentMonth -= 12;
}else{
currentYear -= 1;
currentMonth += 12;
}
}
if(maxDate && new Date(currentYear,currentMonth-1+months-1,1) >= new Date(maxDate).setDate(1)){
currentYear = maxDate.getFullYear();
currentMonth = maxDate.getMonth() + 1 - months + 1;
that.el.header.childNodes[2].setAttribute('style','visibility:hidden');
}else{
that.el.header.childNodes[2].removeAttribute('style');
}
if(minDate && new Date(currentYear,currentMonth -1,1) <= new Date(minDate).setDate(1)){
currentYear = minDate.getFullYear();
currentMonth = minDate.getMonth() + 1;
that.el.header.childNodes[0].setAttribute('style','visibility:hidden');
}else{
that.el.header.childNodes[0].removeAttribute('style');
}
for(var c = 0;c < months;c++){
var index = currentMonth-1+c;
if(index > 11){
index -= 12;
}else if(index < 0){
index += 12;
}
that.el.monthPicker.childNodes[index].classList.add('current');
}
generateDates(currentYear,currentMonth);
generateYears();
var startmonth = languages[lang].monthNames[currentMonth-1];
var endmonth = '';
if(months > 1){
endmonth += ' - ';
var monthint = currentMonth-1+months-1;
if(monthint > 11){
monthint -= 12;
}else if(monthint < 0){
monthint += 12;
}
endmonth += languages[lang].monthNames[monthint];
}
var yearname = (currentMonth-1+months-1 > 11)?currentYear.toString().substring(2,4) + '/' + (currentYear + 1).toString().substring(2,4):currentYear.toString().substring(2,4);
that.el.header.childNodes[1].childNodes[0].innerHTML = startmonth + endmonth;
that.el.header.childNodes[1].childNodes[1].innerHTML = yearname;
that.el.yearPicker.querySelector('[data-year="0"]').classList.add('current');
if(currentMonth-1+months-1>11){
that.el.yearPicker.querySelector('[data-year="1"]').classList.add('current');
}
renderSelectedDates();
if(onNavigation) onNavigation.call(that);
};
function renderSelectedDates(){
selectedDates.forEach(function(date) {
var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]');
if(el){
el.checked = true;
}
});
that.el.tables.classList.remove('before');
if(range && selectedDates.length > 1){
var currentDate = new Date(currentYear,currentMonth-1,1);
var sorted = selectedDates.sort(function(a,b){return a.getTime()-b.getTime()});
var first = that.el.querySelector('[data-date="'+ sorted[0].toJSON() +'"]');
if(!first && currentDate >= new Date(sorted[0].getFullYear(),sorted[0].getMonth(),1) && currentDate <= new Date(sorted[1].getFullYear(),sorted[1].getMonth(),1)){
that.el.tables.classList.add('before');
}
}
};
function resetCalendar(){
[].slice.call(that.el.querySelectorAll('.d-table input')).forEach(function(inputEl) {
inputEl.checked = false;
});
[].slice.call(that.el.monthPicker.querySelectorAll('.current')).forEach(function(monthPickEl) {
monthPickEl.classList.remove('current');
});
[].slice.call(that.el.yearPicker.querySelectorAll('.current')).forEach(function(yearPickEl) {
yearPickEl.classList.remove('current');
});
};
function nextMonth(){
currentMonth += months;
setDate();
};
function prevMonth(){
currentMonth -= months;
setDate();
};
function selectDate(date,ignoreOnSelect){
date = new Date(date);
date.setHours(0,0,0,0);
var el = that.el.querySelector('[data-date="'+ date.toJSON() +'"]');
if(range && el && el.checked) {
el.classList.add('single');
}
if(el && !el.checked){
el.checked = true;
}
selectedDates.push(date);
if(onSelect && !ignoreOnSelect){
onSelect.apply(date,[true]);
}
};
function unselectDate(date,ignoreOnSelect){
date = new Date(date);
date.setHours(0,0,0,0);
var el = that.el.querySelector('[data-date="'+ date.toJSON() +'"]');
if(el){
el.classList.remove('single');
if(el.checked){el.checked = false;}
}
selectedDates = selectedDates.filter(function(x){return x.getTime() != date.getTime()});
if(onSelect && !ignoreOnSelect){
onSelect.call(date,false);
}
};
function unselectAll(ignoreOnSelect){
selectedDates.forEach(function(date) {
unselectDate(date,ignoreOnSelect);
});
};
function inputChange(e){
var input = this;
var date = new Date(input.getAttribute('data-date'));
input.classList.remove('single');
if(locked){return;}
if(range){
that.el.tables.classList.remove('before');
}
if(input.checked){
if(maxSelections && selectedDates.length > maxSelections-1){
var length = selectedDates.length;
for(length; length > maxSelections-1; length --){
unselectDate(selectedDates[0]);
}
}
if(range && selectedDates.length){
var first = that.el.querySelector('[data-date="'+ selectedDates[0].toJSON() +'"]');
if(!first && date > selectedDates[0]){
that.el.tables.classList.add('before');
}
}
selectedDates.push(date);
if(closeOnSelect){
that.hide();
}
}else{
if(range && selectedDates.length == 1 && selectedDates[0].getTime() == date.getTime()){
selectDate(date);
input.classList.add('single');
}else{
selectedDates = selectedDates.filter(function(x){return x.getTime() != date.getTime()})
}
}
if(onSelect){
onSelect.call(date,input.checked);
}
};
function setRange(val){
if(val){
range = true;
that.el.tables.classList.add('range');
}else{
range = false;
that.el.tables.classList.remove('range');
}
};
function show(properties){
if(!that.inline && that.container === document.body){document.body.classList.add('d-noscroll');}
setArgs(properties);
var handler = function(){
that.el.classList.remove('d-show');
that.el.calendar.removeEventListener(whichAnimationEvent(),handler);
};
that.el.calendar.addEventListener(whichAnimationEvent(),handler);
that.el.classList.add('d-show');
container.appendChild(that.el);
opened = true;
if(startDate){
currentMonth = startDate.getMonth() + 1;
currentYear = startDate.getFullYear();
}
setDate();
};
function hide(){
document.body.classList.remove('d-noscroll');
var handler = function(){
that.el.parentNode.removeChild(that.el);
opened = false;
that.el.classList.remove('d-hide');
if(typeof onClose == 'function'){
onClose.apply(that);
}
that.el.removeEventListener(whichAnimationEvent(),handler);
}
that.el.addEventListener(whichAnimationEvent(),handler);
that.el.classList.add('d-hide');
};
function bindEvents(){
that.el.header.childNodes[0].addEventListener(eventName,prevMonth);
that.el.header.childNodes[2].addEventListener(eventName,nextMonth);
that.el.header.childNodes[1].childNodes[0].addEventListener(eventName,function(){
if(that.el.monthPicker.classList.contains('d-show')){
that.el.monthPicker.classList.remove('d-show');
}else{
that.el.monthPicker.classList.add('d-show');
}
that.el.yearPicker.classList.remove('d-show');
});
that.el.header.childNodes[1].childNodes[1].addEventListener(eventName,function(){
generateYears();
if(that.el.yearPicker.classList.contains('d-show')){
that.el.yearPicker.classList.remove('d-show');
}else{
that.el.yearPicker.classList.add('d-show');
}
that.el.monthPicker.classList.remove('d-show');
});
that.el.button.addEventListener(eventName,hide);
that.el.overlay.addEventListener(eventName,function(){
if(closeOnClick){
that.hide();
}
});
[].slice.call(that.el.monthPicker.childNodes).forEach(function(monthPicker) {
monthPicker.addEventListener(eventName,function(){
currentMonth = parseInt(this.getAttribute('data-month'));
setDate();
that.el.monthPicker.classList.remove('d-show');
});
});
[].slice.call(that.el.yearPicker.childNodes).forEach(function(yearPicker) {
yearPicker.addEventListener(eventName,function(){
currentYear += parseInt(this.getAttribute('data-year'));
setDate();
that.el.yearPicker.classList.remove('d-show');
});
})
var startX = 0;
var distance = 0;
that.el.calendar.addEventListener('touchstart',function(e){
startX = e.changedTouches[0].clientX || e.originalEvent.changedTouches[0].clientX;
//e.preventDefault();
});
that.el.calendar.addEventListener('touchmove',function(e){
distance = e.changedTouches[0].clientX - startX || e.originalEvent.changedTouches[0].clientX - startX;
e.preventDefault();
});
that.el.calendar.addEventListener('touchend',function(e){
if(distance > 50){
prevMonth();
}else if(distance < -50){
nextMonth();
}
distance = 0;
});
};
function setArgs(x){
for(var key in x){
if(key in that){
that[key] = x[key];
}
};
};
function init(){
that.el = document.createElement('div');
that.el.id = 'Datepickk';
that.el.classList.add(getBrowserVersion().type);
that.el.innerHTML = template;
that.el.calendar = that.el.childNodes[1];
that.el.titleBox = that.el.childNodes[0];
that.el.button = that.el.childNodes[3];
that.el.header = that.el.calendar.childNodes[0];
that.el.monthPicker = that.el.calendar.childNodes[1];
that.el.yearPicker = that.el.calendar.childNodes[2];
that.el.tables = that.el.calendar.childNodes[4];
that.el.days = that.el.calendar.childNodes[3];
that.el.overlay = that.el.childNodes[4];
that.el.legend = that.el.childNodes[2];
setArgs(args);
generateInputs();
generateDaynames();
bindEvents();
if(inline){
show();
}
}
that.show = show;
that.hide = hide;
that.selectDate = selectDate;
that.unselectAll = unselectAll;
that.unselectDate = unselectDate;
function currentDateGetter(){
return new Date(currentYear,currentMonth-1,1);
}
function currentDateSetter(x){
x = new Date(x);
currentMonth = x.getMonth() + 1;
currentYear = x.getFullYear();
setDate();
}
Object.defineProperties(that,{
"selectedDates": {
get: function () {
return selectedDates.sort(function(a,b){return a.getTime() - b.getTime();});
}
},
"range": {
get: function() {
return range;
},
set: function(x) {
setRange(x);
if(x){maxSelections = 2;}
}
},
"button": {
get: function() {
return button;
},
set: function(x){
if(typeof x == 'string'){
button = x;
}else{
button = null;
}
that.el.button.innerHTML = (button)?button:'';
}
},
"title": {
get: function(){
return title;
},
set: function(x){
if(typeof x == 'string'){
title = x;
}else{
title = null;
}
that.el.titleBox.innerText = (title)?title:'';
}
},
"lang": {
get: function(){
return lang;
},
set: function(x){
if(x in languages){
lang = x;
generateDaynames();
setDate();
}else{
console.error('Language not found');
}
}
},
"weekStart": {
get: function(){
return (weekStart !== null) ? weekStart : languages[lang].weekStart;
},
set: function(x){
if(typeof x == 'number' && x > -1 && x < 7){
weekStart = x;
generateDaynames();
setDate();
}else{
console.error('weekStart must be a number between 0 and 6');
}
}
},
"months": {
get: function(){
return months;
},
set: function(x){
if(typeof x == 'number' && x > 0){
months = x;
generateDaynames();
generateInputs();
setDate();
if(months == 1){
that.el.classList.remove('multi');
}else{
that.el.classList.add('multi');
}
}else{
console.error('months must be a number > 0');
}
}
},
"isOpen": {
get: function(){
return opened;
}
},
"closeOnSelect": {
get: function(){
return closeOnSelect;
},
set: function(x){
if(x){
closeOnSelect = true;
}else{
closeOnSelect = false;
}
}
},
"disabledDays": {
get: function(){
return disabledDays;
},
set: function(x){
if(x instanceof Array){
for(var i = 0;i < x.length;i++){
if(typeof x[i] == 'number'){
disabledDays.push(x[i]);
}
}
}else if(typeof x == 'number'){
disabledDays = [x];
}else if(!x){
disabledDays = [];
}
setDate();
}
},
"disabledDates": {
get: function(){
return disabledDates.map(function(x){return new Date(x);});
},
set: function(x){
if(x instanceof Array){
x.forEach(function(date) {
if(date instanceof Date){
disabledDates.push(new Date(date.getFullYear(),date.getMonth(),date.getDate()).getTime());
}
});
}else if(x instanceof Date){
disabledDates = [new Date(x.getFullYear(),x.getMonth(),x.getDate()).getTime()];
}else if(!x){
disabledDates = [];
}
setDate();
}
},
"highlight": {
get: function(){
return highlight;
},
set: function(x){
if(x instanceof Array){
x.forEach(function(hl) {
if(hl instanceof Object){
var highlightObj = {};
highlightObj.dates = [];
if('start' in hl){
highlightObj.dates.push({
start: new Date(hl.start.getFullYear(),hl.start.getMonth(),hl.start.getDate()),
end: ('end' in hl)?new Date(hl.end.getFullYear(),hl.end.getMonth(),hl.end.getDate()):new Date(hl.start.getFullYear(),hl.start.getMonth(),hl.start.getDate())
});
}else if('dates' in hl && hl.dates instanceof Array){
hl.dates.forEach(function(hlDate) {
highlightObj.dates.push({
start: new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()),
end: ('end' in hlDate)?new Date(hlDate.end.getFullYear(),hlDate.end.getMonth(),hlDate.end.getDate()):new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate())
});
})
}
highlightObj.color = hl.color;
highlightObj.backgroundColor = hl.backgroundColor;
highlightObj.legend = ('legend' in hl)?hl.legend:null;
highlight.push(highlightObj);
}
});
}else if(x instanceof Object){
var highlightObj = {};
highlightObj.dates = [];
if('start' in x){
highlightObj.dates.push({
start: new Date(x.start.getFullYear(),x.start.getMonth(),x.start.getDate()),
end: ('end' in x)?new Date(x.end.getFullYear(),x.end.getMonth(),x.end.getDate()):new Date(x.start.getFullYear(),x.start.getMonth(),x.start.getDate())
});
}else if('dates' in x && x.dates instanceof Array){
x.dates.forEach(function(hlDate) {
highlightObj.dates.push({
start: new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()),
end: ('end' in hlDate)?new Date(hlDate.end.getFullYear(),hlDate.end.getMonth(),hlDate.end.getDate()):new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate())
});
});
}
highlightObj.color = x.color;
highlightObj.backgroundColor = x.backgroundColor;
highlightObj.legend = ('legend' in x)?x.legend:null;
highlight.push(highlightObj);
}else if(!x){
highlight = [];
}
setDate();
}
},
"onClose": {
set: function(callback){
onClose = callback;
}
},
"onSelect": {
set: function(callback){
onSelect = callback;
}
},
"today": {
get: function(){
return today;
},
set: function(x){
if(x){
today = true;
}else{
today = false;
}
}
},
"daynames": {
get: function(){
return daynames;
},
set: function(x){
if(x){
daynames = true;
}else{
daynames = false;
}
generateDaynames();
}
},
"fullscreen": {
get: function(){
return that.el.classList.contains('fullscreen');
},
set: function(x){
if(x){
that.el.classList.add('fullscreen');
}else{
that.el.classList.remove('fullscreen');
}
}
},
"locked": {
get: function(){
return locked;
},
set: function(x){
if(x){
locked = true;
that.el.tables.classList.add('locked');
}else{
locked = false;
that.el.tables.classList.remove('locked');
}
}
},
"maxSelections": {
get: function(){
return maxSelections;
},
set: function(x){
if(typeof x == 'number' && !range){
maxSelections = x;
}else{
if(range){
maxSelections = 2;
}else{
maxSelections = null;
}
}
}
},
"onConfirm": {
set: function(callback){
if(typeof callback == 'function'){
onConfirm = callback.bind(that);
that.el.button.addEventListener(eventName,onConfirm);
}else if(!callback){
that.el.button.removeEventListener(eventName,onConfirm);
onConfirm = null;
}
}
},
"onNavigation": {
set: function(callback){
if(typeof callback == 'function'){
onNavigation = callback.bind(that);
}else if(!callback){
onNavigation = null;
}
}
},
"closeOnClick": {
get: function(){
return closeOnClick;
},
set: function(x){
if(x){
closeOnClick = true;
}else{
closeOnClick = false;
}
}
},
"tooltips": {
get: function(){
var ret = [];
for(key in tooltips){
ret.push({
date: new Date(parseInt(key)),
text: tooltips[key]
});
}
return ret;
},
set: function(x){
if(x instanceof Array){
x.forEach(function(item) {
if(item.date && item.text && item.date instanceof Date){
tooltips[new Date(item.date.getFullYear(),item.date.getMonth(),item.date.getDate()).getTime()] = item.text;
}
});
}else if(x instanceof Object){
if(x.date && x.text && x.date instanceof Date){
tooltips[new Date(x.date.getFullYear(),x.date.getMonth(),x.date.getDate()).getTime()] = x.text;
}
}else if(!x){
tooltips = [];
}
setDate();
}
},
"currentDate": {
get: currentDateGetter,
set: currentDateSetter
},
"setDate": {
set: currentDateSetter
},
"startDate": {
get: function(){
return startDate;
},
set: function(x){
if(x){
startDate = new Date(x);
}else{
startDate = null;
currentYear = new Date().getFullYear();
currentMonth = new Date().getMonth() + 1;
}
setDate();
}
},
"minDate": {
get: function(){
return minDate;
},
set: function(x){
minDate = (x) ? new Date(x) : null ;
setDate();
}
},
"maxDate": {
get: function(){
return maxDate;
},
set: function(x){
maxDate = (x) ? new Date(x) : null ;
setDate();
}
},
"container": {
get: function(){
return container;
},
set: function(x){
if(x instanceof String){
var y = document.querySelector(x);
if(y){
container = y;
if(container != document.body){
that.el.classList.add('wrapped');
}else{
that.el.classList.remove('wrapped');
}
}else{
console.error("Container doesn't exist");
}
}else if(x instanceof HTMLElement){
container = x;
if(container != document.body){
that.el.classList.add('wrapped');
}else{
that.el.classList.remove('wrapped');
}
}else{
console.error("Invalid type");
}
}
},
"inline": {
get: function(){
return inline;
},
set: function(x){
if(x){
inline = true;
that.el.classList.add('inline');
}else{
inline = false;
that.el.classList.remove('inline');
}
}
},
});
init();
setDate();
return Object.freeze(that);
};
function whichAnimationEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'animation':'animationend',
'OAnimation':'oanimationend',
'MozAnimation':'animationend',
'WebkitAnimation':'webkitAnimationEnd',
'':'MSAnimationEnd'
};
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var template = '<div class="d-title"></div>' +
'<div class="d-calendar">' +
'<div class="d-header">' +
'<i id="d-previous"></i>' +
'<p><span class="d-month"></span><span class="d-year"></span></p>' +
'<i id="d-next"></i>' +
'</div>' +
'<div class="d-month-picker">' +
'<div data-month="1">1</div>' +
'<div data-month="2">2</div>' +
'<div data-month="3">3</div>' +
'<div data-month="4">4</div>' +
'<div data-month="5">5</div>' +
'<div data-month="6">6</div>' +
'<div data-month="7">7</div>' +
'<div data-month="8">8</div>' +
'<div data-month="9">9</div>' +
'<div data-month="10">10</div>' +
'<div data-month="11">11</div>' +
'<div data-month="12">12</div>' +
'</div>' +
'<div class="d-year-picker">' +
'<div data-year="-5"></div>' +
'<div data-year="-4"></div>' +
'<div data-year="-3"></div>' +
'<div data-year="-2"></div>' +
'<div data-year="-1"></div>' +
'<div data-year="0"></div>' +
'<div data-year="1"></div>' +
'<div data-year="2"></div>' +
'<div data-year="3"></div>' +
'<div data-year="4"></div>' +
'<div data-year="5"></div>' +
'</div>' +
'<div class="d-weekdays"></div>' +
'<div class="d-tables"></div>' +
'</div>' +
'<div class="d-legend"></div>' +
'<button class="d-confirm"></button>' +
'<div class="d-overlay"></div>';
var getBrowserVersion = function(){
var browser = {
type: null,
version: null
}
var ua= navigator.userAgent, tem, ios,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
ios = ua.match(/(iphone|ipad)\s+OS\s+([\d+_]+\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
browser.type = 'MSIE';
browser.version = parseInt(tem[1]);
return browser;
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/)
if(tem!= null) return 'Opera '+tem[1];
}
if(ios[1]){
return browser = {
type: 'iOS',
version: ios[2]
};
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
browser.type = M[0];
browser.version = parseInt(M[1]);
return browser;
}
export default Datepickk