diff --git a/dist/datepicker.bundle.js b/dist/datepicker.bundle.js index 54dd765..8d1a2fe 100644 --- a/dist/datepicker.bundle.js +++ b/dist/datepicker.bundle.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DatePicker=t():e.DatePicker=t()}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t,n){var a=e.querySelector(".prev-month"),i=e.querySelector(".next-month"),r=e.querySelector(".datepicker-calendar-container"),o=e.querySelector(".datepicker-days"),l=e.querySelector(".datepicker-input");a.removeEventListener("click",a.listener),i.removeEventListener("click",i.listener),o.removeEventListener("click",o.listener),o.removeEventListener("keydown",o.listener),l.removeEventListener("keydown",l.listener),document.removeEventListener("click",document.listener),a.listener=function(e){e.stopPropagation(),t(-1)},i.listener=function(e){e.stopPropagation(),t(1)},o.listener=function(e){if("click"===e.type||"keydown"===e.type&&"Enter"===e.key){var t=e.target.closest(".datepicker-day");if(t&&!t.classList.contains("blocked")){var a=parseInt(t.getAttribute("data-day"),10),i=parseInt(t.getAttribute("data-month"),10);n(a,i)}}},l.listener=function(t){if("Enter"===t.key){var n=e.querySelector(".datepicker-calendar-container");n.style.display="block"===n.style.display?"none":"block"}},document.listener=function(t){r.contains(t.target)||e.querySelector(".datepicker-input").contains(t.target)||(r.style.display="none")},a.addEventListener("click",a.listener),i.addEventListener("click",i.listener),o.addEventListener("click",o.listener),o.addEventListener("keydown",o.listener),l.addEventListener("keydown",l.listener),document.addEventListener("click",document.listener)}e.d(t,{default:()=>u});var a={en:"Choose a date",fr:"Choisissez une date",es:"Elige una fecha",de:"Wählen Sie ein Datum",it:"Scegli una data",nl:"Kies een datum",pt:"Escolha uma data",ja:"日付を選択","zh-CN":"选择日期","zh-TW":"選擇日期",ru:"Выберите дату"},i={en:{prevMonth:"Go to previous month",nextMonth:"Go to next month"},fr:{prevMonth:"Aller au mois précédent",nextMonth:"Aller au mois suivant"},es:{prevMonth:"Ir al mes anterior",nextMonth:"Ir al siguiente mes"},de:{prevMonth:"Gehe zum vorherigen Monat",nextMonth:"Gehe zum nächsten Monat"},it:{prevMonth:"Vai al mese precedente",nextMonth:"Vai al mese successivo"},nl:{prevMonth:"Ga naar de vorige maand",nextMonth:"Ga naar de volgende maand"},pt:{prevMonth:"Ir para o mês anterior",nextMonth:"Ir para o próximo mês"},ja:{prevMonth:"前の月へ",nextMonth:"次の月へ"},"zh-CN":{prevMonth:"转到上一个月",nextMonth:"转到下一个月"},"zh-TW":{prevMonth:"轉到上一個月",nextMonth:"轉到下一個月"},ru:{prevMonth:"Перейти к предыдущему месяцу",nextMonth:"Перейти к следующему месяцу"}},r={en:["January","February","March","April","May","June","July","August","September","October","November","December"],fr:["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],es:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],de:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],it:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],nl:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],pt:["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],ja:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"zh-CN":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"zh-TW":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],ru:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентяюрь","Октябрь","Ноябрь","Декабрь"]},o={en:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],fr:["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"],es:["Dom","Lun","Mar","Mié","Jue","Vie","Sáb"],de:["So","Mo","Di","Mi","Do","Fr","Sa"],it:["Dom","Lun","Mar","Mer","Gio","Ven","Sab"],nl:["Zo","Ma","Di","Wo","Do","Vr","Za"],pt:["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"],ja:["日","月","火","水","木","金","土"],"zh-CN":["日","一","二","三","四","五","六"],"zh-TW":["日","一","二","三","四","五","六"],ru:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"]},l={1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"二十一",22:"二十二",23:"二十三",24:"二十四",25:"二十五",26:"二十六",27:"二十七",28:"二十八",29:"二十九",30:"三十",31:"三十一"},s={"zh-CN":{1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"廿一",22:"廿二",23:"廿三",24:"廿四",25:"廿五",26:"廿六",27:"廿七",28:"廿八",29:"廿九",30:"三十",31:"三十一"},"zh-TW":{1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"廿一",22:"廿二",23:"廿三",24:"廿四",25:"廿五",26:"廿六",27:"廿七",28:"廿八",29:"廿九",30:"三十",31:"三十一"}};function c(e){var t=document.documentElement.lang;return["en","fr","es","de","it","nl","pt","ja","zh-CN","zh-TW","ru"].includes(t)?t:e}function d(e,t,n,a,i,r,o){var c=new Date(e,t,n),d=n;"ja"===o.language?d=l[n]:"zh-CN"!==o.language&&"zh-TW"!==o.language||(d=s[o.language][n]);var u=a?"datepicker-day current-month":"datepicker-day";return o.blockedDays.includes(c.getDay())?u+=" blocked":a&&i(c)?u+=" selected":a&&r(c)&&(u+=" in-range"),'
').concat(d,"
")}function u(e,t){var l,s,u,h,p,g,v,m,D,y,b;this.element=document.getElementById(e),this.currentDate=new Date,this.currentDate.setDate(1),this.selectedStartDate=null,this.selectedEndDate=null,this.options={mode:null!==(l=null==t?void 0:t.mode)&&void 0!==l?l:"single",onSelect:null!==(s=null==t?void 0:t.onSelect)&&void 0!==s?s:null,blockedDays:null!==(u=null==t?void 0:t.blockedDays)&&void 0!==u?u:[],showDayNames:null===(h=null==t?void 0:t.showDayNames)||void 0===h||h,textInputEnabled:null!==(p=null==t?void 0:t.textInputEnabled)&&void 0!==p&&p,darkMode:null!==(g=null==t?void 0:t.darkMode)&&void 0!==g&&g,usePageLanguage:null!==(v=null==t?void 0:t.usePageLanguage)&&void 0!==v&&v,usePageLanguageFallback:null!==(m=null==t?void 0:t.usePageLanguageFallback)&&void 0!==m?m:"en",language:null!=t&&t.usePageLanguage?c(null==t?void 0:t.usePageLanguageFallback):null!==(D=null==t?void 0:t.language)&&void 0!==D?D:"en",textInputPlaceholder:null!==(y=null==t?void 0:t.textInputPlaceholder)&&void 0!==y?y:a[null!=t&&t.usePageLanguage?c():null!==(b=null==t?void 0:t.language)&&void 0!==b?b:"en"]},this.init=function(){this.options.darkMode&&this.element.classList.add("dark"),this.render(),n(this.element,this.changeMonth.bind(this),this.handleDayClick.bind(this))},this.localizedDate=function(e,t){return e.toLocaleDateString(t,{year:"numeric",month:"long",day:"numeric"})},this.render=function(){var e=this;this.element.innerHTML="";var t=document.createElement("input");if(t.value=this.options.textInputPlaceholder,t.type="text",t.className="datepicker-input",t.readOnly=!0,this.selectedStartDate)if("single"===this.options.mode)t.value=this.localizedDate(this.selectedStartDate,this.options.language);else if("range"===this.options.mode){var a=this.localizedDate(this.selectedStartDate,this.options.language);this.selectedEndDate&&(a+=" - ".concat(this.localizedDate(this.selectedEndDate,this.options.language))),t.value=a}this.element.appendChild(t);var l=function(e,t,n,a){var l,s,c=document.createElement("div");return c.className="datepicker-calendar-container ".concat(null==a?void 0:a.language),c.style.display=a.textInputEnabled?"none":"block",c.innerHTML='\n
\n \n ').concat((l=e.getMonth(),s=a.language,r[s][l])," ").concat(e.getFullYear(),'\n \n
\n ').concat(a.showDayNames?function(e){var t=o[e];return'
'.concat(t.map((function(e){return"
".concat(e,"
")})).join(""),"
")}(a.language):"",'\n
\n ').concat(function(e,t,n,a){var i=e.getFullYear(),r=e.getMonth(),o=new Date(i,r,1),l=new Date(i,r,0).getDate(),s=new Date(i,r+1,0).getDate();1===r&&function(e){return e%4==0&&e%100!=0||e%400==0}(i)&&(s=29);for(var c='
',u=o.getDay();u>0;u--)c+=d(i,r-1,l-u+1,!1,t,n,a);for(var h=1;h<=s;h++)c+=d(i,r,h,!0,t,n,a);for(var p=new Date(i,r,s).getDay(),g=1;p<6;g++,p++)c+=d(i,r+1,g,!1,t,n,a);return c+"
"}(e,t,n,a),"\n
\n "),c}(this.currentDate,this.isDateSelected.bind(this),this.isDateInRange.bind(this),this.options);this.element.appendChild(l),this.options.textInputEnabled&&(t.addEventListener("click",(function(){l.style.display="block"})),document.addEventListener("click",(function(t){e.element.contains(t.target)||(l.style.display="none")}))),n(this.element,this.changeMonth.bind(this),this.handleDayClick.bind(this))},this.isDateSelected=function(e){return this.selectedStartDate&&this.selectedStartDate.toDateString()===e.toDateString()||this.selectedEndDate&&this.selectedEndDate.toDateString()===e.toDateString()},this.isDateInRange=function(e){return this.selectedStartDate&&this.selectedEndDate&&e>this.selectedStartDate&&ethis.selectedStartDate?(this.selectedEndDate=a,this.element.querySelector(".datepicker-input").value="".concat(this.selectedStartDate.toDateString()," ").concat(void 0!==this.selectedEndDate.toDateString()?"- "+this.selectedEndDate.toDateString():""),this.triggerSelectCallback(),this.render(),this.element.querySelector(".datepicker-calendar-container").style.display="none"):(this.selectedStartDate=a,this.render(),this.element.querySelector(".datepicker-calendar-container").style.display="block")))},this.changeMonth=function(e){var t,n={currentYear:(t=this.currentDate).getFullYear(),currentMonth:t.getMonth(),currentDay:t.getDate()},a=n.currentYear,i=n.currentDay,r=new Date(a,n.currentMonth+e,1),o=new Date(a,r.getMonth()+1,0).getDate();r.setDate(Math.min(i,o)),this.currentDate=r,this.render(),this.element.querySelector(".datepicker-calendar-container").style.display="block"},this.triggerSelectCallback=function(){this.options.onSelect&&this.options.onSelect(this.selectedStartDate,this.selectedEndDate)}}return t.default})())); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DatePicker=t():e.DatePicker=t()}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t,n){var a=e.querySelector(".prev-month"),i=e.querySelector(".next-month"),r=e.querySelector(".datepicker-calendar-container"),l=e.querySelector(".datepicker-days");function o(n,a){return function(i){i.stopPropagation();var r=document.activeElement;t(n),requestAnimationFrame((function(){r&&r.className.includes(a)&&e.querySelector(".".concat(a)).focus()}))}}a.removeEventListener("click",a.listener),i.removeEventListener("click",i.listener),l.removeEventListener("click",l.listener),l.removeEventListener("keydown",l.listener),document.removeEventListener("click",document.listener),a.listener=o(-1,"prev-month"),i.listener=o(1,"next-month"),a.addEventListener("click",a.listener),i.addEventListener("click",i.listener),l.listener=function(e){if("click"===e.type||"keydown"===e.type&&"Enter"===e.key){var t=e.target.closest(".datepicker-day");if(t&&!t.classList.contains("blocked")){var a=parseInt(t.getAttribute("data-day"),10),i=parseInt(t.getAttribute("data-month"),10);n(a,i)}}},document.listener=function(t){r.contains(t.target)||e.querySelector(".datepicker-input").contains(t.target)||(r.style.display="none")},a.addEventListener("click",a.listener),i.addEventListener("click",i.listener),l.addEventListener("click",l.listener),l.addEventListener("keydown",l.listener),document.addEventListener("click",document.listener)}e.d(t,{default:()=>h});var a={en:"Choose a date",fr:"Choisissez une date",es:"Elige una fecha",de:"Wählen Sie ein Datum",it:"Scegli una data",nl:"Kies een datum",pt:"Escolha uma data",ja:"日付を選択","zh-CN":"选择日期","zh-TW":"選擇日期",ru:"Выберите дату"},i={en:{prevMonth:"Go to previous month",nextMonth:"Go to next month"},fr:{prevMonth:"Aller au mois précédent",nextMonth:"Aller au mois suivant"},es:{prevMonth:"Ir al mes anterior",nextMonth:"Ir al siguiente mes"},de:{prevMonth:"Gehe zum vorherigen Monat",nextMonth:"Gehe zum nächsten Monat"},it:{prevMonth:"Vai al mese precedente",nextMonth:"Vai al mese successivo"},nl:{prevMonth:"Ga naar de vorige maand",nextMonth:"Ga naar de volgende maand"},pt:{prevMonth:"Ir para o mês anterior",nextMonth:"Ir para o próximo mês"},ja:{prevMonth:"前の月へ",nextMonth:"次の月へ"},"zh-CN":{prevMonth:"转到上一个月",nextMonth:"转到下一个月"},"zh-TW":{prevMonth:"轉到上一個月",nextMonth:"轉到下一個月"},ru:{prevMonth:"Перейти к предыдущему месяцу",nextMonth:"Перейти к следующему месяцу"}},r={en:["January","February","March","April","May","June","July","August","September","October","November","December"],fr:["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],es:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],de:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],it:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],nl:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],pt:["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],ja:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"zh-CN":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"zh-TW":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],ru:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентяюрь","Октябрь","Ноябрь","Декабрь"]},l={en:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],fr:["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"],es:["Dom","Lun","Mar","Mié","Jue","Vie","Sáb"],de:["So","Mo","Di","Mi","Do","Fr","Sa"],it:["Dom","Lun","Mar","Mer","Gio","Ven","Sab"],nl:["Zo","Ma","Di","Wo","Do","Vr","Za"],pt:["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"],ja:["日","月","火","水","木","金","土"],"zh-CN":["日","一","二","三","四","五","六"],"zh-TW":["日","一","二","三","四","五","六"],ru:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"]},o={1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"二十一",22:"二十二",23:"二十三",24:"二十四",25:"二十五",26:"二十六",27:"二十七",28:"二十八",29:"二十九",30:"三十",31:"三十一"},s={"zh-CN":{1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"廿一",22:"廿二",23:"廿三",24:"廿四",25:"廿五",26:"廿六",27:"廿七",28:"廿八",29:"廿九",30:"三十",31:"三十一"},"zh-TW":{1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",7:"七",8:"八",9:"九",10:"十",11:"十一",12:"十二",13:"十三",14:"十四",15:"十五",16:"十六",17:"十七",18:"十八",19:"十九",20:"二十",21:"廿一",22:"廿二",23:"廿三",24:"廿四",25:"廿五",26:"廿六",27:"廿七",28:"廿八",29:"廿九",30:"三十",31:"三十一"}};function c(e){var t=document.documentElement.lang;return["en","fr","es","de","it","nl","pt","ja","zh-CN","zh-TW","ru"].includes(t)?t:e}function d(e,t,n,a,i,r,l){var c=new Date(e,t,n),d=n;"ja"===l.language?d=o[n]:"zh-CN"!==l.language&&"zh-TW"!==l.language||(d=s[l.language][n]);var u=a?"datepicker-day current-month":"datepicker-day";return l.blockedDays.includes(c.getDay())?u+=" blocked":a&&i(c)?u+=" selected":a&&r(c)&&(u+=" in-range"),'
').concat(d,"
")}function u(e,t,n,a){var o,s,c=document.createElement("div");return c.className="datepicker-calendar-container ".concat(null==a?void 0:a.language),c.style.display=a.textInputEnabled?"none":"block",c.innerHTML='\n
\n \n ').concat((o=e.getMonth(),s=a.language,r[s][o])," ").concat(e.getFullYear(),'\n \n
\n ').concat(a.showDayNames?function(e){var t=l[e];return'
'.concat(t.map((function(e){return"
".concat(e,"
")})).join(""),"
")}(a.language):"",'\n
\n ').concat(function(e,t,n,a){var i=e.getFullYear(),r=e.getMonth(),l=new Date(i,r,1),o=new Date(i,r,0).getDate(),s=new Date(i,r+1,0).getDate();1===r&&function(e){return e%4==0&&e%100!=0||e%400==0}(i)&&(s=29);for(var c='
',u=l.getDay();u>0;u--)c+=d(i,r-1,o-u+1,!1,t,n,a);for(var h=1;h<=s;h++)c+=d(i,r,h,!0,t,n,a);for(var p=new Date(i,r,s).getDay(),v=1;p<6;v++,p++)c+=d(i,r+1,v,!1,t,n,a);return c+"
"}(e,t,n,a),"\n
\n "),c}function h(e,t){var i,r,l,o,s,d,h,p,v,m,g;this.element=document.getElementById(e),this.currentDate=new Date,this.currentDate.setDate(1),this.selectedStartDate=null,this.selectedEndDate=null,this.options={mode:null!==(i=null==t?void 0:t.mode)&&void 0!==i?i:"single",onSelect:null!==(r=null==t?void 0:t.onSelect)&&void 0!==r?r:null,blockedDays:null!==(l=null==t?void 0:t.blockedDays)&&void 0!==l?l:[],showDayNames:null===(o=null==t?void 0:t.showDayNames)||void 0===o||o,textInputEnabled:null!==(s=null==t?void 0:t.textInputEnabled)&&void 0!==s&&s,darkMode:null!==(d=null==t?void 0:t.darkMode)&&void 0!==d&&d,usePageLanguage:null!==(h=null==t?void 0:t.usePageLanguage)&&void 0!==h&&h,usePageLanguageFallback:null!==(p=null==t?void 0:t.usePageLanguageFallback)&&void 0!==p?p:"en",language:null!=t&&t.usePageLanguage?c(null==t?void 0:t.usePageLanguageFallback):null!==(v=null==t?void 0:t.language)&&void 0!==v?v:"en",textInputPlaceholder:null!==(m=null==t?void 0:t.textInputPlaceholder)&&void 0!==m?m:a[null!=t&&t.usePageLanguage?c():null!==(g=null==t?void 0:t.language)&&void 0!==g?g:"en"]},this.init=function(){this.options.darkMode&&this.element.classList.add("dark"),this.calendarContainer=u(this.currentDate,this.isDateSelected.bind(this),this.isDateInRange.bind(this),this.options),this.options.textInputEnabled&&(this.input=document.createElement("input"),this.input.value=this.options.textInputPlaceholder,this.input.type="text",this.input.className="datepicker-input",this.input.readOnly=!0,this.element.appendChild(this.input)),this.element.appendChild(this.calendarContainer),this.render(),n(this.element,this.changeMonth.bind(this),this.handleDayClick.bind(this))},this.render=function(){this.element.innerHTML="";var e=u(this.currentDate,this.isDateSelected.bind(this),this.isDateInRange.bind(this),this.options);if(this.options.textInputEnabled&&!this.element.querySelector(".datepicker-input")){var t=document.createElement("input");if(t.value=this.options.textInputPlaceholder,t.type="text",t.id="datepicker-input",t.className="datepicker-input",t.readOnly=!0,this.selectedStartDate)if("single"===this.options.mode)t.value=this.localizedDate(this.selectedStartDate,this.options.language);else if("range"===this.options.mode){var a=this.localizedDate(this.selectedStartDate,this.options.language);this.selectedEndDate&&(a+=" - ".concat(this.localizedDate(this.selectedEndDate,this.options.language))),t.value=a}t.removeEventListener("click",t.listener),t.removeEventListener("keydown",t.listener),t.addEventListener("click",(function(){e.style.display="block"})),t.addEventListener("keydown",(function(t){"Enter"===t.key&&(e.style.display="block"===e.style.display?"none":"block")})),this.element.appendChild(t)}this.element.appendChild(e),n(this.element,this.changeMonth.bind(this),this.handleDayClick.bind(this))},this.localizedDate=function(e,t){return e.toLocaleDateString(t,{year:"numeric",month:"long",day:"numeric"})},this.isDateSelected=function(e){return this.selectedStartDate&&this.selectedStartDate.toDateString()===e.toDateString()||this.selectedEndDate&&this.selectedEndDate.toDateString()===e.toDateString()},this.isDateInRange=function(e){return this.selectedStartDate&&this.selectedEndDate&&e>this.selectedStartDate&&ethis.selectedStartDate?(this.selectedEndDate=i,this.element.querySelector(".datepicker-input")&&(this.element.querySelector(".datepicker-input").value="".concat(this.selectedStartDate.toDateString()," ").concat(void 0!==this.selectedEndDate.toDateString()?"- "+this.selectedEndDate.toDateString():"")),this.triggerSelectCallback(),this.render(),t.textInputEnabled&&(this.element.querySelector(".datepicker-calendar-container").style.display="none")):(this.selectedStartDate=i,this.render(),this.element.querySelector(".datepicker-calendar-container").style.display="block")))},this.changeMonth=function(e){var t,n={currentYear:(t=this.currentDate).getFullYear(),currentMonth:t.getMonth(),currentDay:t.getDate()},a=n.currentYear,i=n.currentDay,r=new Date(a,n.currentMonth+e,1),l=new Date(a,r.getMonth()+1,0).getDate();r.setDate(Math.min(i,l)),this.currentDate=r,this.render(),this.element.querySelector(".datepicker-calendar-container").style.display="block"},this.triggerSelectCallback=function(){this.options.onSelect&&this.options.onSelect(this.selectedStartDate,this.selectedEndDate)}}return t.default})())); \ No newline at end of file diff --git a/dist/datepicker.css b/dist/datepicker.css index 2357f80..40e2635 100644 --- a/dist/datepicker.css +++ b/dist/datepicker.css @@ -1 +1 @@ -.datepicker-day{background-color:#f0f0f0}.datepicker-day:hover{background-color:#e0e0e0}.datepicker-day.in-range,.datepicker-day.selected{background-color:#4caf50;color:#fff}.datepicker-day.in-range{background-color:#a5d6a7}.datepicker-day.blocked{background-color:#f8f8f8;color:#ccc}.datepicker-day-names>div{color:#000}.dark .datepicker-calendar-container{background-color:#222;border:1px solid #555;color:#eee}.dark .datepicker-header{border-bottom:1px solid #444}.dark .datepicker-day{background-color:#333;color:#ddd}.dark .datepicker-day:hover{background-color:#444}.dark .datepicker-day.in-range,.dark .datepicker-day.selected{background-color:#1e8e3e}.dark .datepicker-day.in-range{background-color:#679267}.dark .datepicker-day.blocked{background-color:#2a2a2a;color:#aaa}.dark .datepicker-day-names>div{color:#ccc}.datepicker-calendar-container{border:1px solid #ddd;padding:10px;width:275px}.datepicker-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.datepicker-day{border-radius:50%;cursor:pointer;display:inline-block;height:30px;line-height:30px;margin:0 0 5px 5px;text-align:center;width:30px}.datepicker-day-names,.datepicker-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.datepicker-day>span{display:block}.ja .datepicker-calendar-container{height:385px}.ja .datepicker-day{align-items:center;border-radius:0;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center}.zh-CN .datepicker-calendar-container,.zh-TW .datepicker-calendar-container{height:385px}.zh-CN .datepicker-day,.zh-TW .datepicker-day{align-items:center;border-radius:0;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);.datepicker-calendar-container{border:1px solid #ddd}.datepicker-day{background-color:#f0f0f0}.datepicker-day:hover{background-color:#e0e0e0}.datepicker-day.in-range,.datepicker-day.selected{background-color:#4caf50;color:#fff}.datepicker-day.in-range{background-color:#a5d6a7}.datepicker-day.blocked{background-color:#f8f8f8;color:#ccc}.datepicker-day-names{background-color:#e0e0e0}.datepicker-day-names>div{color:#000}button.next-month:hover,button.prev-month:hover{background-color:#e0e0e0}.dark .datepicker-calendar-container{background-color:#222;border:1px solid #555;color:#eee}.dark .datepicker-header{border-bottom:1px solid #444}.dark .datepicker-day{background-color:#333;color:#ddd}.dark .datepicker-day:hover{background-color:#444}.dark .datepicker-day.in-range,.dark .datepicker-day.selected{background-color:#3a5fd8}.dark .datepicker-day.in-range{background-color:#5675d8}.dark .datepicker-day.blocked{background-color:#1c1c1c;color:#aaa}.dark .datepicker-day-names{background-color:#3a5fd8}.dark .datepicker-day-names>div{color:#ccc}.dark button.next-month,.dark button.prev-month{background-color:#3a5fd8;color:#ccc}.dark button.next-month:hover,.dark button.prev-month:hover{background-color:#2e4cae}.ja .datepicker-calendar-container{height:385px}.ja .datepicker-day{align-items:center;border-radius:5px;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center}.zh-CN .datepicker-calendar-container,.zh-TW .datepicker-calendar-container{height:385px}.zh-CN .datepicker-day,.zh-TW .datepicker-day{align-items:center;border-radius:5px;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center}.datepicker-input{border:1px solid #ddd;border-radius:5px;display:inline-block;font-family:Roboto,sans-serif;height:20px;padding:3px 7px}.datepicker-calendar-container{border-radius:5px;font-family:Roboto,sans-serif;margin-top:1px;padding:10px;width:275px}.datepicker-header{align-items:center;border-radius:5px;display:flex;justify-content:space-between;margin:0 0 10px;padding:5px}.datepicker-day{border-radius:50%;cursor:pointer;display:inline-block;height:30px;line-height:30px;margin:0 0 5px 5px;text-align:center;width:30px}.datepicker-day>span{display:block}.datepicker-day-names,.datepicker-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.datepicker-day-names{border-radius:5px;margin:0 3px 5px;padding:5px 0}.datepicker-day.blocked{cursor:not-allowed}button.next-month,button.prev-month{border:none;border-radius:5px;padding:5px 12px;transition:all .1s ease-in-out} \ No newline at end of file diff --git a/src/datePicker.js b/src/datePicker.js index 459877e..801c846 100644 --- a/src/datePicker.js +++ b/src/datePicker.js @@ -27,62 +27,87 @@ export default function DatePicker(elementId, options) { }; this.init = function () { if (this.options.darkMode) this.element.classList.add('dark'); + this.calendarContainer = generateCalendarContainer( + this.currentDate, + this.isDateSelected.bind(this), + this.isDateInRange.bind(this), + this.options + ); + + if (this.options.textInputEnabled) { + this.input = document.createElement('input'); + this.input.value = this.options.textInputPlaceholder; + this.input.type = 'text'; + this.input.className = 'datepicker-input'; + this.input.readOnly = true; + + this.element.appendChild(this.input); + } + + this.element.appendChild(this.calendarContainer); this.render(); attachEventListeners(this.element, this.changeMonth.bind(this), this.handleDayClick.bind(this)); }; - this.localizedDate = function (date, locale) { - return date.toLocaleDateString(locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - }); - }; - this.render = function () { this.element.innerHTML = ''; - const input = document.createElement('input'); - input.value = this.options.textInputPlaceholder; - input.type = 'text'; - input.className = 'datepicker-input'; - input.readOnly = true; - - if (this.selectedStartDate) { - if (this.options.mode === 'single') { - input.value = this.localizedDate(this.selectedStartDate, this.options.language); - } else if (this.options.mode === 'range') { - let inputValue = this.localizedDate(this.selectedStartDate, this.options.language); - if (this.selectedEndDate) { - inputValue += ` - ${this.localizedDate(this.selectedEndDate, this.options.language)}`; - } - input.value = inputValue; - } - } - this.element.appendChild(input); - const calendarContainer = generateCalendarContainer( this.currentDate, this.isDateSelected.bind(this), this.isDateInRange.bind(this), this.options ); - this.element.appendChild(calendarContainer); if (this.options.textInputEnabled) { - input.addEventListener('click', () => { - calendarContainer.style.display = 'block'; - }); - - document.addEventListener('click', event => { - if (!this.element.contains(event.target)) { - calendarContainer.style.display = 'none'; + const existingInput = this.element.querySelector('.datepicker-input'); + if (!existingInput) { + const input = document.createElement('input'); + input.value = this.options.textInputPlaceholder; + input.type = 'text'; + input.id = 'datepicker-input'; + input.className = 'datepicker-input'; + input.readOnly = true; + + if (this.selectedStartDate) { + if (this.options.mode === 'single') { + input.value = this.localizedDate(this.selectedStartDate, this.options.language); + } else if (this.options.mode === 'range') { + let inputValue = this.localizedDate(this.selectedStartDate, this.options.language); + if (this.selectedEndDate) { + inputValue += ` - ${this.localizedDate(this.selectedEndDate, this.options.language)}`; + } + input.value = inputValue; + } } - }); + + input.removeEventListener('click', input.listener); + input.removeEventListener('keydown', input.listener); + input.addEventListener('click', () => { + calendarContainer.style.display = 'block'; + }); + + input.addEventListener('keydown', event => { + if (event.key === 'Enter') { + calendarContainer.style.display = calendarContainer.style.display === 'block' ? 'none' : 'block'; + } + }); + + this.element.appendChild(input); + } } + this.element.appendChild(calendarContainer); + attachEventListeners(this.element, this.changeMonth.bind(this), this.handleDayClick.bind(this)); }; + this.localizedDate = function (date, locale) { + return date.toLocaleDateString(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + }); + }; this.isDateSelected = function (date) { return ( (this.selectedStartDate && this.selectedStartDate.toDateString() === date.toDateString()) || @@ -110,10 +135,14 @@ export default function DatePicker(elementId, options) { if (this.options.mode === 'single') { this.selectedStartDate = clickedDate; this.selectedEndDate = null; - this.element.querySelector('.datepicker-input').value = clickedDate.toDateString(); + if (this.options.textInputEnabled) { + this.element.querySelector('.datepicker-input').value = clickedDate.toDateString(); + } this.triggerSelectCallback(); this.render(); - this.element.querySelector('.datepicker-calendar-container').style.display = 'none'; + if (options.textInputEnabled) { + this.element.querySelector('.datepicker-calendar-container').style.display = 'none'; + } } else if (this.options.mode === 'range') { if (!this.selectedStartDate || this.selectedEndDate) { this.selectedStartDate = clickedDate; @@ -125,13 +154,18 @@ export default function DatePicker(elementId, options) { if (clickedDate > this.selectedStartDate) { this.selectedEndDate = clickedDate; // Update the input only when both dates are selected - this.element.querySelector('.datepicker-input').value = `${this.selectedStartDate.toDateString()} ${ - this.selectedEndDate.toDateString() !== undefined ? '- ' + this.selectedEndDate.toDateString() : '' - }`; + const input = this.element.querySelector('.datepicker-input'); + if (input) { + this.element.querySelector('.datepicker-input').value = `${this.selectedStartDate.toDateString()} ${ + this.selectedEndDate.toDateString() !== undefined ? '- ' + this.selectedEndDate.toDateString() : '' + }`; + } this.triggerSelectCallback(); this.render(); // Close the calendar after selecting the end date - this.element.querySelector('.datepicker-calendar-container').style.display = 'none'; + if (options.textInputEnabled) { + this.element.querySelector('.datepicker-calendar-container').style.display = 'none'; + } } else { // If the clicked date is before the start date, reset the start date this.selectedStartDate = clickedDate; diff --git a/src/eventHandlers.js b/src/eventHandlers.js index fcf5f44..f6a987c 100644 --- a/src/eventHandlers.js +++ b/src/eventHandlers.js @@ -3,25 +3,31 @@ export function attachEventListeners(element, changeMonth, handleDayClick) { const nextMonthButton = element.querySelector('.next-month'); const calendarContainer = element.querySelector('.datepicker-calendar-container'); const daysContainer = element.querySelector('.datepicker-days'); - const input = element.querySelector('.datepicker-input'); - // Remove any existing event listeners to prevent duplication prevMonthButton.removeEventListener('click', prevMonthButton.listener); nextMonthButton.removeEventListener('click', nextMonthButton.listener); daysContainer.removeEventListener('click', daysContainer.listener); daysContainer.removeEventListener('keydown', daysContainer.listener); - input.removeEventListener('keydown', input.listener); document.removeEventListener('click', document.listener); - // Define new listeners - prevMonthButton.listener = event => { - event.stopPropagation(); - changeMonth(-1); - }; - nextMonthButton.listener = event => { - event.stopPropagation(); - changeMonth(1); - }; + function createMonthChangeListener(offset, buttonClass) { + return event => { + event.stopPropagation(); + const activeElement = document.activeElement; + changeMonth(offset); + requestAnimationFrame(() => { + if (activeElement && activeElement.className.includes(buttonClass)) { + element.querySelector(`.${buttonClass}`).focus(); + } + }); + }; + } + + prevMonthButton.listener = createMonthChangeListener(-1, 'prev-month'); + nextMonthButton.listener = createMonthChangeListener(1, 'next-month'); + + prevMonthButton.addEventListener('click', prevMonthButton.listener); + nextMonthButton.addEventListener('click', nextMonthButton.listener); daysContainer.listener = event => { if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) { const target = event.target.closest('.datepicker-day'); @@ -32,23 +38,15 @@ export function attachEventListeners(element, changeMonth, handleDayClick) { } } }; - input.listener = event => { - if (event.key === 'Enter') { - const calendarContainer = element.querySelector('.datepicker-calendar-container'); - calendarContainer.style.display = calendarContainer.style.display === 'block' ? 'none' : 'block'; - } - }; document.listener = event => { if (!calendarContainer.contains(event.target) && !element.querySelector('.datepicker-input').contains(event.target)) { calendarContainer.style.display = 'none'; } }; - // Attach new listeners prevMonthButton.addEventListener('click', prevMonthButton.listener); nextMonthButton.addEventListener('click', nextMonthButton.listener); daysContainer.addEventListener('click', daysContainer.listener); daysContainer.addEventListener('keydown', daysContainer.listener); - input.addEventListener('keydown', input.listener); document.addEventListener('click', document.listener); }