\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 g=new Date(i,r,s).getDay(),p=1;g<6;p++,g++)c+=d(i,r+1,p,!1,t,n,a);return c+"
"}(e,t,n,a),"\n
').concat(d,"
")}function u(e,t){var l,s,u,h,p,v,g,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!==(v=null==t?void 0:t.darkMode)&&void 0!==v&&v,usePageLanguage:null!==(g=null==t?void 0:t.usePageLanguage)&&void 0!==g&&g,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.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.selectedStartDate.toDateString();else if("range"===this.options.mode){var a=this.selectedStartDate.toDateString();this.selectedEndDate&&(a+=" - ".concat(this.selectedEndDate.toDateString())),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",c.style.display=a.textInputEnabled?"none":"block",c.innerHTML='\n \n ').concat(a.showDayNames?function(e){var t=o[e];return''.concat(t.map((function(e){return"
".concat(e,"
")})).join(""),"
\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(),v=1;p<6;v++,p++)c+=d(i,r+1,v,!1,t,n,a);return c+"
"}(e,t,n,a),"\n
${dayDisplay}
`;
+ return `${dayDisplay}
`;
}
diff --git a/src/eventHandlers.js b/src/eventHandlers.js
index b8db2b1..fcf5f44 100644
--- a/src/eventHandlers.js
+++ b/src/eventHandlers.js
@@ -3,11 +3,14 @@ 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
@@ -20,11 +23,19 @@ export function attachEventListeners(element, changeMonth, handleDayClick) {
changeMonth(1);
};
daysContainer.listener = event => {
- const target = event.target.closest('.datepicker-day');
- if (target && !target.classList.contains('blocked')) {
- const day = parseInt(target.getAttribute('data-day'), 10);
- const month = parseInt(target.getAttribute('data-month'), 10);
- handleDayClick(day, month);
+ if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+ const target = event.target.closest('.datepicker-day');
+ if (target && !target.classList.contains('blocked')) {
+ const day = parseInt(target.getAttribute('data-day'), 10);
+ const month = parseInt(target.getAttribute('data-month'), 10);
+ handleDayClick(day, month);
+ }
+ }
+ };
+ 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 => {
@@ -37,5 +48,7 @@ export function attachEventListeners(element, changeMonth, handleDayClick) {
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);
}