jspanel4/es6module/extensions/datepicker/jspanel.datepicker.min.js

A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu

import{jsPanel}from"../../jspanel.js";jsPanel.datepicker||(jsPanel.icons.chevronLeft='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(6.12323e-17,-1,1,6.12323e-17,0.0375,22.0375)"><path fill="currentColor" d="M2.1,15.2L2.9,16C3.1,16.2 3.4,16.2 3.6,16L11,8.7L18.4,16C18.6,16.2 18.9,16.2 19.1,16L19.9,15.2C20.1,15 20.1,14.7 19.9,14.5L11.3,6C11.1,5.8 10.8,5.8 10.6,6L2.1,14.5C2,14.7 2,15 2.1,15.2Z"/></g></svg>',jsPanel.icons.chevronRight='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(6.12323e-17,1,-1,6.12323e-17,22.0375,-0.0375)"><path fill="currentColor" d="M2.1,15.2L2.9,16C3.1,16.2 3.4,16.2 3.6,16L11,8.7L18.4,16C18.6,16.2 18.9,16.2 19.1,16L19.9,15.2C20.1,15 20.1,14.7 19.9,14.5L11.3,6C11.1,5.8 10.8,5.8 10.6,6L2.1,14.5C2,14.7 2,15 2.1,15.2Z"/></g></svg>',jsPanel.icons.square='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(0.0401786,0,0,0.0401786,2,0.714286)"><path fill="currentColor" d="M400,32L48,32C21.5,32 0,53.5 0,80L0,432C0,458.5 21.5,480 48,480L400,480C426.5,480 448,458.5 448,432L448,80C448,53.5 426.5,32 400,32ZM394,432L54,432C50.7,432 48,429.3 48,426L48,86C48,82.7 50.7,80 54,80L394,80C397.3,80 400,82.7 400,86L400,426C400,429.3 397.3,432 394,432Z"/></g></svg>',jsPanel.icons.undo='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(2.18687e-18,0.0357143,-0.0357143,2.18687e-18,20.1429,2)"><path fill="currentColor" d="M12,8L39.711,8C46.45,8 51.868,13.548 51.708,20.286L49.361,118.854C93.925,51.834 170.212,7.73 256.793,8.001C393.18,8.428 504.213,120.009 504,256.396C503.786,393.181 392.835,504 256,504C192.074,504 133.798,479.813 89.822,440.092C84.709,435.474 84.468,427.531 89.34,422.659L109.078,402.921C113.576,398.423 120.831,398.136 125.579,402.369C160.213,433.246 205.895,452 256,452C364.322,452 452,364.338 452,256C452,147.678 364.338,60 256,60C176.455,60 108.059,107.282 77.325,175.302L203.714,172.293C210.451,172.133 216,177.55 216,184.29L216,212C216,218.627 210.627,224 204,224L12,224C5.373,224 0,218.627 0,212L0,20C0,13.373 5.373,8 12,8Z"/></g></svg>',jsPanel.datepicker={version:"0.3.2",date:"2020-06-19 09:48",defaults:{locale:"en",startdate:void 0,months:1,showWeekNumbers:!0,ondateselect:void 0,onrangeselect:void 0,onselectionclear:void 0,callback:void 0},keyValue:void 0,generateHTML(){let e=document.createElement("div");e.className="jsPanel-cal-wrapper",e.innerHTML=`<div class="jsPanel-cal-sub jsPanel-cal-clear" title="Clear all selections">${jsPanel.icons.square}</div>\n            <div class="jsPanel-cal-sub jsPanel-cal-back" title="Go back one month">${jsPanel.icons.chevronLeft}</div>\n            <div class="jsPanel-cal-sub jsPanel-cal-month"></div>\n            <div class="jsPanel-cal-sub jsPanel-cal-forward" title="Go forward one month">${jsPanel.icons.chevronRight}</div>\n            <div class="jsPanel-cal-sub jsPanel-cal-reset" title="Reset to current month">${jsPanel.icons.undo}</div>\n            <div class="jsPanel-cal-sub jsPanel-cal-blank3"></div>\n            <div class="jsPanel-cal-sub day-name day-name-0"></div>\n            <div class="jsPanel-cal-sub day-name day-name-1"></div>\n            <div class="jsPanel-cal-sub day-name day-name-2"></div>\n            <div class="jsPanel-cal-sub day-name day-name-3"></div>\n            <div class="jsPanel-cal-sub day-name day-name-4"></div>\n            <div class="jsPanel-cal-sub day-name day-name-5"></div>\n            <div class="jsPanel-cal-sub day-name day-name-6"></div>`;for(let a=0;a<6;a++)e.innerHTML+=`<div class="jsPanel-cal-sub week week-${a}"></div>`;for(let a=1;a<43;a++)e.innerHTML+=`<div class="jsPanel-cal-sub day day-${a}"></div>`;return e},fillMonth(e,a=moment()){moment.locale(e.options.locale);let t=moment(a)||moment(e.options.startdate);t.locale(e.options.locale);let s=t.month(),l=t.date(1).weekday(),n=t.localeData(),d=e.querySelector(".jsPanel-cal-month");d.innerHTML=t.format("MMMM YYYY"),d.dataset.date=t.format("YYYY-MM-DD");let r=e.querySelectorAll(".jsPanel-cal-sub.day-name"),o=n.weekdaysMin();if(1===n.firstDayOfWeek()){for(let e=0,a=1;e<7;e++,a++)r[e].textContent=o[a];r[6].textContent=o[0],r[5].classList.add("weekend"),r[6].classList.add("weekend")}else{for(let e=0;e<7;e++)r[e].textContent=o[e];r[0].classList.add("weekend"),r[6].classList.add("weekend")}let c=t.subtract(++l,"days"),i=e.querySelectorAll(".jsPanel-cal-sub.day");for(let e of i){e.classList.remove("today","notInMonth","selected","range","remove-border-radius-right","remove-border-radius-left");let a=c.add(1,"days");e.textContent=a.format("D"),e.dataset.date=t.format("YYYY-MM-DD"),a.month()!==s?e.classList.add("notInMonth"):e.dataset.date===moment().format("YYYY-MM-DD")&&e.classList.add("today")}e.options.showWeekNumbers&&e.querySelectorAll(".jsPanel-cal-sub.week").forEach((a,t)=>{a.textContent=moment(e.querySelector(`.jsPanel-cal-sub.day-${7*(t+1)}`).dataset.date).week()})},deselectAllDays(e){for(let a of e.querySelectorAll(".jsPanel-cal-sub.day"))a.classList.remove("selected","range","remove-border-radius-right","remove-border-radius-left")},restoreSelections(e){let a=e.querySelectorAll(".jsPanel-cal-sub.day");for(let t of a)e.selectedDays.has(t.dataset.date)&&t.classList.add("selected");if(e.selectedRange.size){let t=e.selectedRange.values().next().value.split("/");for(let e of a){let a=e.dataset.date;a>=t[0]&&a<=t[1]&&(e.classList.add("selected","range"),a===t[0]?e.classList.add("remove-border-radius-right"):a===t[1]?e.classList.add("remove-border-radius-left"):(a>t[0]||a<t[1])&&e.classList.add("remove-border-radius-right","remove-border-radius-left"))}}},create(e,a={}){e.style.display="flex",e.selectedDays=new Set,e.selectedRange=new Set;let t,s=Object.assign({},this.defaults,a);for(let a=0;a<s.months;a++)(t=this.generateHTML()).options=s,e.append(t),this.fillMonth(t,s.startdate),s.startdate=moment(s.startdate).add(1,"months");let l,n=e.querySelectorAll(".jsPanel-cal-wrapper");for(let a of n){for(let t of a.querySelectorAll(".jsPanel-cal-clear"))t.addEventListener("click",a=>{s.onselectionclear&&"function"==typeof s.onselectionclear&&s.onselectionclear.call(e,e,a),a.defaultPrevented||(jsPanel.datepicker.deselectAllDays(e),e.selectedDays.clear(),e.selectedRange.clear())});for(let t of a.querySelectorAll(".jsPanel-cal-back"))t.addEventListener("click",()=>{for(let e of n){let a=e.querySelector(".jsPanel-cal-month").dataset.date,t=moment(a).subtract(1,"months").format("YYYY-MM");jsPanel.datepicker.fillMonth(e,t)}jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)});for(let t of a.querySelectorAll(".jsPanel-cal-forward"))t.addEventListener("click",()=>{for(let e of n){let a=e.querySelector(".jsPanel-cal-month").dataset.date,t=moment(a).add(1,"months").format("YYYY-MM");jsPanel.datepicker.fillMonth(e,t)}jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)});for(let t of a.querySelectorAll(".jsPanel-cal-reset"))t.addEventListener("click",a=>{let t=a.target.closest(".jsPanel-cal-wrapper"),s=0;for(;t.previousSibling;)s++,t=t.previousSibling;let l=moment().subtract(s,"months");for(let e of n)jsPanel.datepicker.fillMonth(e,l),l=moment(l).add(1,"months");jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)})}return e.addEventListener("click",a=>{a.preventDefault();const t=a.target,l=a.altKey,n=a.ctrlKey,d=a.shiftKey;if(t.classList.contains("day")){let r=t.classList.contains("selected"),o=t.dataset.date;if(n||d||l){if(!l&&n&&!d){e.selectedRange.clear();for(let a of e.querySelectorAll(".day"))a.classList.contains("selected")&&a.classList.contains("range")&&a.classList.remove("range","selected");r?(t.classList.remove("selected"),e.selectedDays.delete(o)):(t.classList.add("selected"),e.selectedDays.add(o))}}else jsPanel.datepicker.deselectAllDays(e),e.selectedDays.clear(),r?t.classList.remove("selected"):(t.classList.add("selected"),e.selectedDays.add(o));s.ondateselect&&"function"==typeof s.ondateselect&&s.ondateselect.call(e,e,o,a)}}),e.addEventListener("pointerdown",a=>{a.preventDefault();const t=a.target,s=a.altKey,n=a.ctrlKey,d=a.shiftKey;let r=a.target.dataset.date,o=a.target.dataset.date,c=[r,r],i=a=>{a.preventDefault(),l=!0,e.selectedDays.size&&e.selectedDays.clear(),a.target.classList.contains("day")&&(o=a.target.dataset.date,c=[r,o].sort((e,a)=>moment(e).unix()-moment(a).unix()));for(let a of e.querySelectorAll(".day")){let e=a.dataset.date;a.classList.remove("remove-border-radius-right","remove-border-radius-left"),e<c[0]||e>c[1]?a.classList.remove("selected","range"):(a.classList.add("selected","range"),e===c[0]?a.classList.add("remove-border-radius-right"):e===c[1]?a.classList.add("remove-border-radius-left"):(e>c[0]||e<c[1])&&a.classList.add("remove-border-radius-right","remove-border-radius-left"))}e.selectedRange.clear(),e.selectedRange.add(e.querySelector(`.day[data-date="${c[0]}"]`).dataset.date+"/"+e.querySelector(`.day[data-date="${c[1]}"]`).dataset.date)};t.classList.contains("day")&&!s&&!n&&d&&(e.addEventListener("pointermove",i),e.addEventListener("pointerup",()=>{e.removeEventListener("pointermove",i)}))}),e.addEventListener("pointerup",a=>{l&&s.onrangeselect&&"function"==typeof s.onrangeselect&&(s.onrangeselect.call(e,e,e.selectedRange,a),l=void 0),l=void 0}),s.callback&&s.callback.call(e,e),e}},document.addEventListener("keydown",e=>{e.key.match(/^[2-9]$/)?jsPanel.datepicker.keyValue=e.key:e.key.match(/^1$/)&&(jsPanel.datepicker.keyValue=12)}),document.addEventListener("keyup",()=>{jsPanel.datepicker.keyValue=void 0}));