universal-datepicker
Version:
Pure 8kb Vanilla Javascript plug and play datepicker
2 lines (1 loc) • 10.6 kB
JavaScript
"use strict";function e(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function t(e,t){var a=t.get(e);if(!a)throw new TypeError("attempted to get private field on non-instance");return a.get?a.get.call(e):a.value}function a(e,t,a){var n=t.get(e);if(!n)throw new TypeError("attempted to set private field on non-instance");if(n.set)n.set.call(e,a);else{if(!n.writable)throw new TypeError("attempted to set read only private field");n.value=a}return a}const n=["Lun","Mar","Mer","Gio","Ven","Sab","Dom"],s=["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"],l=(e,t,a)=>a>e&&a<t,i=({year:e,month:t,day:a},n)=>{const s=new Date(e,t,a);return n.setHours(0,0,0,0),s<n},c=e=>String("00"+e).slice(-2),r=({container:e,currentDayInMonth:t,weekdaysLabels:a,month:n,year:s,today:r,defaultCheckin:o,defaultCheckout:d,onCellClick:h,maxCheckin:u,showTodayDate:m,customCheckinElement:p,customCheckoutElement:_})=>{const w=c(n+1),k=((e,t)=>new Date(t,e,0).getDay())(n,s),v=((e,t)=>new Date(t,e+1,0).getDate())(n,s);let C=1;((e,t)=>{const a=document.createElement("tr");t.appendChild(a),e.map(e=>{const t=document.createElement("th");t.className="calendar__weekday",t.setAttribute("data-key",e),t.innerHTML=e,a.appendChild(t)})})(a,e);const y=o?{day:o.getDate(),month:o.getMonth(),year:o.getFullYear()}:{},g=d?{day:d.getDate(),month:d.getMonth(),year:d.getFullYear()}:{};for(let a=0;a<6;a++){const o=document.createElement("tr");e.appendChild(o);for(let e=0;e<7;e++){let d=null,u=null;if(0===a&&e<k)d=document.createElement("td"),u=document.createTextNode(""),d.appendChild(u),o.appendChild(d);else{if(C>v)break;{d=document.createElement("td"),d.className="calendar__cell";const e=new Date(y.year,y.month,y.day),a=new Date(g.year,g.month,g.day),k=new Date(s,n,C),v=C===t&&n===r.getMonth()&&s===r.getFullYear();if(d.setAttribute("data-date",`${s}/${w}/${c(C)}`),v&&m&&d.classList.add("calendar__cell--today-highlighted"),i({year:s,month:n,day:C},r)&&d.classList.add("calendar__cell--past"),y.day===C&&y.month===n&&y.year===s){if(d.classList.add("calendar__cell--checkin"),p){const e=document.createElement("div");e.classList.add("calendar__cell__decorator"),e.innerHTML=p,d.appendChild(e)}}else if(g.day===C&&g.month===n&&g.year===s){if(d.classList.add("calendar__cell--checkout"),_){const e=document.createElement("div");e.classList.add("calendar__cell__decorator"),e.innerHTML=_,d.appendChild(e)}}else l(e,a,k)&&d.classList.add("calendar__cell--range");const f=document.createElement("span");f.classList.add("calendar__cell__text"),u=document.createTextNode(C),v&&d.classList.add("calendar__cell--today"),f.appendChild(u),d.appendChild(f),o.appendChild(d);const M=C;d.classList.contains("calendar__cell--past")||(d.onclick=e=>h(e,M,s,n)),C++}}}}},o=({container:e,currentDayInMonth:t,month:a,year:n,today:s,defaultCheckin:l,defaultCheckout:i,weekdaysLabels:o,monthsLabels:d,onCellClick:h,maxCheckin:u,showTodayDate:m,customCheckinElement:p,customCheckoutElement:_})=>{const w=document.createElement("div");w.classList.add("table-wrapper");const k=document.createElement("table");w.appendChild(((e,t,a)=>{const n=t[e],s=document.createElement("div");s.className="calendar__header";const l=`${c(e+1)}${a}`;s.className="calendar__header--"+l;const i=document.createElement("span");return i.innerHTML=`${n} ${a}`,s.appendChild(i),s})(a,d,n)),w.appendChild(k),r({container:k,currentDayInMonth:t,monthsLabels:d,weekdaysLabels:o,month:a,year:n,today:s,defaultCheckin:l,defaultCheckout:i,onCellClick:h,maxCheckin:u,showTodayDate:m,customCheckinElement:p,customCheckoutElement:_}),e.appendChild(w)};var d=new WeakMap,h=new WeakMap,u=new WeakMap,m=new WeakMap,p=new WeakMap,_=new WeakMap,w=new WeakMap,k=new WeakMap,v=new WeakMap,C=new WeakMap,y=new WeakMap,g=new WeakMap,f=new WeakMap,M=new WeakMap,L=new WeakMap,b=new WeakMap,D=new WeakMap,E=new WeakMap,W=new WeakMap,x=new WeakMap;module.exports=class{constructor({DOMElement:i="#calendar",today:r=new Date,initialDate:T=new Date,weekdaysLabels:$=n,monthsLabels:N=s,checkin:F=new Date("2022-03-02"),checkout:Y=new Date("2022-04-02"),orientation:P="vertical",horizontalPages:S=2,verticalPages:H=10,onCheckinChange:q=((e,t={})=>console.info("On checkin change",e,t)),onCheckoutChange:A=((e,t={})=>console.info("On checkout change",e,t)),onPrev:I=(e=>null),onNext:z=(e=>null),maxCheckin:O=30,leftArrowClassname:G="left-arrow-icon",rightArrowClassname:V="right-arrow-icon",showTodayDate:j=!1,customCheckinElement:B="<div>ciao</div>",customCheckoutElement:J="<div>ciao</div>"}={}){d.set(this,{writable:!0,value:void 0}),h.set(this,{writable:!0,value:void 0}),u.set(this,{writable:!0,value:void 0}),m.set(this,{writable:!0,value:void 0}),p.set(this,{writable:!0,value:void 0}),_.set(this,{writable:!0,value:void 0}),w.set(this,{writable:!0,value:void 0}),k.set(this,{writable:!0,value:void 0}),v.set(this,{writable:!0,value:void 0}),C.set(this,{writable:!0,value:void 0}),y.set(this,{writable:!0,value:void 0}),g.set(this,{writable:!0,value:void 0}),f.set(this,{writable:!0,value:void 0}),M.set(this,{writable:!0,value:void 0}),L.set(this,{writable:!0,value:void 0}),b.set(this,{writable:!0,value:void 0}),D.set(this,{writable:!0,value:void 0}),E.set(this,{writable:!0,value:void 0}),W.set(this,{writable:!0,value:void 0}),x.set(this,{writable:!0,value:void 0}),e(this,"userCanPrev",()=>{const e=t(this,u).getMonth()-1,a=t(this,u).getFullYear();return e>=t(this,h).getMonth()||a>t(this,h).getFullYear()}),e(this,"userCanNext",()=>t(this,u).getFullYear()<=t(this,h).getFullYear()||t(this,u).getMonth()<t(this,h).getMonth()&&t(this,u).getFullYear()<=t(this,h).getFullYear()+1),e(this,"removeCalendar",()=>{const e=document.getElementById("calendar__wrapper");e&&e.remove()}),e(this,"onPrev",e=>{this.userCanPrev()&&(t(this,f).call(this,e),this.removeCalendar(),t(this,u).setMonth(t(this,u).getMonth()-1),this.renderCalendar())}),e(this,"onNext",e=>{this.userCanNext()&&(t(this,M).call(this,e),this.removeCalendar(),t(this,u).setMonth(t(this,u).getMonth()+1),this.renderCalendar())}),e(this,"onCellClick",(e,t,a,n)=>this.updateCalendar(e,a,n,t)),e(this,"setCheckin",(e,n,s,l,i)=>{if(a(this,_,n),s&&t(this,y).call(this,e,{checkin:s,checkout:t(this,w)}),i&&i instanceof Element){const e=document.querySelector(".calendar__cell--checkin > .calendar__cell__decorator");e&&e.remove(),i.classList.remove("calendar__cell--checkin")}if(l&&l instanceof Element&&(l.classList.add("calendar__cell--checkin"),t(this,W))){const e=document.createElement("div");e.classList.add("calendar__cell__decorator"),e.innerHTML=t(this,W),l.appendChild(e)}}),e(this,"setCheckout",(e,n,s,l,i)=>{if(a(this,w,n),s&&t(this,g).call(this,e,{checkout:s,checkin:t(this,_)}),i&&i instanceof Element){const e=document.querySelector(".calendar__cell--checkout > .calendar__cell__decorator");e&&e.remove(),i.classList.remove("calendar__cell--checkout")}if(l&&l instanceof Element&&(l.classList.add("calendar__cell--checkout"),t(this,x))){const e=document.createElement("div");e.classList.add("calendar__cell__decorator"),e.innerHTML=t(this,x),l.appendChild(e)}}),e(this,"updateCalendar",(e,a,n,s)=>{const i=document.querySelector(".calendar__cell--checkin"),r=document.querySelector(".calendar__cell--checkout"),o=c(s),d=c(n+1),h=new Date(a,n,o),u=`${a}/${d}/${o}`,m=`${a}-${d}-${o}`,p=document.querySelector(`[data-date="${u}"]`);t(this,_)&&t(this,_).setHours(0,0,0,0),t(this,w)&&t(this,w).setHours(0,0,0,0),h<=t(this,_)||t(this,w)&&(h.getTime()===t(this,w).getTime()||h>t(this,w))?(this.setCheckout(e,null,null,null,r),this.setCheckin(e,h,m,p,i)):h>t(this,_)&&this.setCheckout(e,h,m,p,r),document.querySelectorAll("[data-date]").forEach(e=>{e.classList.remove("calendar__cell--range"),e.classList.remove("calendar__cell--checkin--mono");const a=new Date(""+e.getAttribute("data-date"));a.setHours(0,0,0,0),l(t(this,_),t(this,w),a)&&e.classList.add("calendar__cell--range"),e.classList.contains("calendar__cell--checkin")&&!t(this,w)?e.classList.add("calendar__cell--checkin--mono"):t(this,L)})}),e(this,"renderCalendar",()=>{const e=t(this,h).getDate(),a=t(this,h).getMonth()+1,n=t(this,h).getFullYear(),s=(c(t(this,u).getDate()),t(this,u).getMonth()),l=t(this,u).getFullYear(),i=document.querySelector(t(this,d)),r=document.createElement("div");if(r.id="calendar__wrapper","horizontal"===t(this,k)){const e=document.createElement("div");e.classList.add("calendar__arrow-wrapper"),r.appendChild(e);const a=document.createElement("span"),n=document.createElement("i");t(this,b)&&n.classList.add(t(this,b)),a.onclick=e=>this.onPrev(e),a.classList.add("calendar__arrow"),a.classList.add("calendar__arrow--left"),this.userCanPrev()||a.classList.add("--disabled"),a.appendChild(n);const s=document.createElement("span"),l=document.createElement("i");t(this,D)&&l.classList.add(t(this,D)),s.onclick=e=>this.onNext(e),s.classList.add("calendar__arrow"),s.classList.add("calendar__arrow--right"),this.userCanNext()||s.classList.add("--disabled"),s.appendChild(l),e.appendChild(a),e.appendChild(s)}"horizontal"===t(this,k)&&(r.style.display="flex"),r.className="calendar__wrapper "+("vertical"===t(this,k)?"calendar__wrapper--vertical":"calendar__wrapper--horizontal"),i.appendChild(r);const y="horizontal"===t(this,k)?t(this,v):t(this,C);for(let i=0;i<y;i++){const c=new Date(l,s,1);c.setMonth(c.getMonth()+i),o({container:r,currentDay:e,currentMonth:a,currentYear:n,currentDayInMonth:e,month:c.getMonth(),year:c.getFullYear(),defaultCheckin:t(this,_),defaultCheckout:t(this,w),today:t(this,h),weekdaysLabels:t(this,m),monthsLabels:t(this,p),onPrev:this.onPrev,onNext:this.onNext,onCellClick:this.onCellClick,orientation:t(this,k),maxCheckin:t(this,L),showTodayDate:t(this,E),customCheckinElement:t(this,W),customCheckoutElement:t(this,x)})}if("vertical"===t(this,k)){const e=`${c(t(this,_).getMonth()+1)}${t(this,_).getFullYear()}`,a=document.querySelector(".calendar__header--"+e);a&&"function"==typeof a.scrollIntoView&&a.scrollIntoView({behavior:"smooth"})}}),a(this,d,i),a(this,h,(e=>{if(e instanceof Date)return e;if("string"==typeof e){return/^\d{4}[/]\d{2}[/]\d{2}$/.matches(e)?new Date(e):new Date}return"object"==typeof e&&e.year&&e.month&&e.day?new Date(year,month,day):new Date})(r)),a(this,u,T),a(this,m,$),a(this,p,N),a(this,_,F),a(this,w,Y),a(this,k,P),a(this,v,S),a(this,C,H),a(this,y,q),a(this,g,A),a(this,f,I),a(this,M,z),a(this,L,((e,t)=>{const a=new Date(e),n=a.setDate(a.getDate()+t);return new Date(n)})(new Date,O)),a(this,b,G),a(this,D,V),a(this,E,j),a(this,W,B),a(this,x,J)}};