@idds/js 1.0.40 → 1.0.42

package/dist/index.iife.js

@@ -179,9 +179,9 @@ var InaUI = (() => {
       function formatDate(date) {
         if (!date) return "";
         const day = date.getDate().toString().padStart(2, "0");
-        const monthIndex = date.getMonth();
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
         const year = date.getFullYear();
-        return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
+        return `${day}/${month}/${year}`;
       }
       function updateTrigger() {
         if (mode === "single") {
@@ -264,7 +264,6 @@ var InaUI = (() => {
             btn.classList.add("ina-month-picker__month-option--selected");
           btn.textContent = m;
           btn.addEventListener("click", (e) => {
-            e.stopPropagation();
             currentMonthIdx = idx;
             updateText();
             togglePicker(false);
@@ -275,7 +274,6 @@ var InaUI = (() => {
         pickerPanel.appendChild(grid);
         container.append(pickerTrigger, pickerPanel);
         pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
           togglePicker(!isPickerOpen);
         });
         function togglePicker(show) {
@@ -321,7 +319,6 @@ var InaUI = (() => {
         prevBtn.className = "ina-year-picker__nav-button";
         prevBtn.innerHTML = createIcon("chevron-left");
         prevBtn.onclick = (e) => {
-          e.stopPropagation();
           decadeStart -= 20;
           renderGrid();
         };
@@ -330,7 +327,6 @@ var InaUI = (() => {
         nextBtn.className = "ina-year-picker__nav-button";
         nextBtn.innerHTML = createIcon("chevron-right");
         nextBtn.onclick = (e) => {
-          e.stopPropagation();
           decadeStart += 20;
           renderGrid();
         };
@@ -350,7 +346,6 @@ var InaUI = (() => {
               btn.classList.add("ina-year-picker__year-option--selected");
             btn.textContent = y;
             btn.addEventListener("click", (e) => {
-              e.stopPropagation();
               currentYearVal = y;
               updateText();
               togglePicker(false);
@@ -362,7 +357,6 @@ var InaUI = (() => {
         pickerPanel.append(header, grid);
         container.append(pickerTrigger, pickerPanel);
         pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
           togglePicker(!isPickerOpen);
         });
         function togglePicker(show) {
@@ -403,7 +397,6 @@ var InaUI = (() => {
           prevBtn.className = "ina-date-picker__nav-button";
           prevBtn.innerHTML = createIcon("chevron-left");
           prevBtn.onclick = (e) => {
-            e.stopPropagation();
             viewDate.setMonth(viewDate.getMonth() - 1);
             render();
           };
@@ -413,31 +406,33 @@ var InaUI = (() => {
           spacer.style.width = "32px";
           header.appendChild(spacer);
         }
-        if (!isNextMonth) {
-          const controls = document.createElement("div");
-          controls.className = "ina-date-picker__header-controls";
-          const monthCont = document.createElement("div");
-          monthCont.className = "ina-date-picker__dropdown-container";
-          const monthPicker = createMonthPicker(month, (m) => {
+        const controls = document.createElement("div");
+        controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
+        controls.className = "ina-date-picker__header-controls";
+        const monthCont = document.createElement("div");
+        monthCont.className = "ina-date-picker__dropdown-container";
+        const monthPicker = createMonthPicker(month, (m) => {
+          if (isNextMonth) {
+            viewDate = new Date(year, m - 1, 1);
+          } else {
             viewDate.setMonth(m);
-            render();
-          });
-          monthCont.appendChild(monthPicker.element);
-          const yearCont = document.createElement("div");
-          yearCont.className = "ina-date-picker__dropdown-container";
-          const yearPicker = createYearPicker(year, (y) => {
+          }
+          render();
+        });
+        monthCont.appendChild(monthPicker.element);
+        const yearCont = document.createElement("div");
+        yearCont.className = "ina-date-picker__dropdown-container";
+        const yearPicker = createYearPicker(year, (y) => {
+          if (isNextMonth) {
+            viewDate = new Date(y, month - 1, 1);
+          } else {
             viewDate.setFullYear(y);
-            render();
-          });
-          yearCont.appendChild(yearPicker.element);
-          controls.append(monthCont, yearCont);
-          header.appendChild(controls);
-        } else {
-          const title = document.createElement("div");
-          title.className = "ina-date-picker__calendar-title";
-          title.textContent = `${MONTHS_ID[month]} ${year}`;
-          header.appendChild(title);
-        }
+          }
+          render();
+        });
+        yearCont.appendChild(yearPicker.element);
+        controls.append(monthCont, yearCont);
+        header.appendChild(controls);
         const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
         if (showNextBtn) {
           const nextBtn = document.createElement("button");
@@ -445,7 +440,6 @@ var InaUI = (() => {
           nextBtn.className = "ina-date-picker__nav-button";
           nextBtn.innerHTML = createIcon("chevron-right");
           nextBtn.onclick = (e) => {
-            e.stopPropagation();
             viewDate.setMonth(viewDate.getMonth() + 1);
             render();
           };
@@ -503,10 +497,8 @@ var InaUI = (() => {
           if (!isSelected && !isInRange)
             btn.classList.add("ina-date-picker__day--hover");
           btn.onclick = (e) => {
-            e.stopPropagation();
             if (mode === "single") {
               selectedDate = date;
-              close();
             } else if (mode === "multiple") {
               const existsIdx = selectedDates.findIndex(
                 (d) => d.toDateString() === date.toDateString()
@@ -524,7 +516,6 @@ var InaUI = (() => {
                 } else {
                   rangeDate = [start, date];
                 }
-                close();
               }
               render();
             }
@@ -581,7 +572,6 @@ var InaUI = (() => {
         else open();
       }
       trigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         toggle();
       });
       document.addEventListener("click", (e) => {

package/dist/index.js

@@ -167,9 +167,9 @@ function initDatepicker() {
     function formatDate(date) {
       if (!date) return "";
       const day = date.getDate().toString().padStart(2, "0");
-      const monthIndex = date.getMonth();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
       const year = date.getFullYear();
-      return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
+      return `${day}/${month}/${year}`;
     }
     function updateTrigger() {
       if (mode === "single") {
@@ -252,7 +252,6 @@ function initDatepicker() {
           btn.classList.add("ina-month-picker__month-option--selected");
         btn.textContent = m;
         btn.addEventListener("click", (e) => {
-          e.stopPropagation();
           currentMonthIdx = idx;
           updateText();
           togglePicker(false);
@@ -263,7 +262,6 @@ function initDatepicker() {
       pickerPanel.appendChild(grid);
       container.append(pickerTrigger, pickerPanel);
       pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         togglePicker(!isPickerOpen);
       });
       function togglePicker(show) {
@@ -309,7 +307,6 @@ function initDatepicker() {
       prevBtn.className = "ina-year-picker__nav-button";
       prevBtn.innerHTML = createIcon("chevron-left");
       prevBtn.onclick = (e) => {
-        e.stopPropagation();
         decadeStart -= 20;
         renderGrid();
       };
@@ -318,7 +315,6 @@ function initDatepicker() {
       nextBtn.className = "ina-year-picker__nav-button";
       nextBtn.innerHTML = createIcon("chevron-right");
       nextBtn.onclick = (e) => {
-        e.stopPropagation();
         decadeStart += 20;
         renderGrid();
       };
@@ -338,7 +334,6 @@ function initDatepicker() {
             btn.classList.add("ina-year-picker__year-option--selected");
           btn.textContent = y;
           btn.addEventListener("click", (e) => {
-            e.stopPropagation();
             currentYearVal = y;
             updateText();
             togglePicker(false);
@@ -350,7 +345,6 @@ function initDatepicker() {
       pickerPanel.append(header, grid);
       container.append(pickerTrigger, pickerPanel);
       pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
         togglePicker(!isPickerOpen);
       });
       function togglePicker(show) {
@@ -391,7 +385,6 @@ function initDatepicker() {
         prevBtn.className = "ina-date-picker__nav-button";
         prevBtn.innerHTML = createIcon("chevron-left");
         prevBtn.onclick = (e) => {
-          e.stopPropagation();
           viewDate.setMonth(viewDate.getMonth() - 1);
           render();
         };
@@ -401,31 +394,33 @@ function initDatepicker() {
         spacer.style.width = "32px";
         header.appendChild(spacer);
       }
-      if (!isNextMonth) {
-        const controls = document.createElement("div");
-        controls.className = "ina-date-picker__header-controls";
-        const monthCont = document.createElement("div");
-        monthCont.className = "ina-date-picker__dropdown-container";
-        const monthPicker = createMonthPicker(month, (m) => {
+      const controls = document.createElement("div");
+      controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
+      controls.className = "ina-date-picker__header-controls";
+      const monthCont = document.createElement("div");
+      monthCont.className = "ina-date-picker__dropdown-container";
+      const monthPicker = createMonthPicker(month, (m) => {
+        if (isNextMonth) {
+          viewDate = new Date(year, m - 1, 1);
+        } else {
           viewDate.setMonth(m);
-          render();
-        });
-        monthCont.appendChild(monthPicker.element);
-        const yearCont = document.createElement("div");
-        yearCont.className = "ina-date-picker__dropdown-container";
-        const yearPicker = createYearPicker(year, (y) => {
+        }
+        render();
+      });
+      monthCont.appendChild(monthPicker.element);
+      const yearCont = document.createElement("div");
+      yearCont.className = "ina-date-picker__dropdown-container";
+      const yearPicker = createYearPicker(year, (y) => {
+        if (isNextMonth) {
+          viewDate = new Date(y, month - 1, 1);
+        } else {
           viewDate.setFullYear(y);
-          render();
-        });
-        yearCont.appendChild(yearPicker.element);
-        controls.append(monthCont, yearCont);
-        header.appendChild(controls);
-      } else {
-        const title = document.createElement("div");
-        title.className = "ina-date-picker__calendar-title";
-        title.textContent = `${MONTHS_ID[month]} ${year}`;
-        header.appendChild(title);
-      }
+        }
+        render();
+      });
+      yearCont.appendChild(yearPicker.element);
+      controls.append(monthCont, yearCont);
+      header.appendChild(controls);
       const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
       if (showNextBtn) {
         const nextBtn = document.createElement("button");
@@ -433,7 +428,6 @@ function initDatepicker() {
         nextBtn.className = "ina-date-picker__nav-button";
         nextBtn.innerHTML = createIcon("chevron-right");
         nextBtn.onclick = (e) => {
-          e.stopPropagation();
           viewDate.setMonth(viewDate.getMonth() + 1);
           render();
         };
@@ -491,10 +485,8 @@ function initDatepicker() {
         if (!isSelected && !isInRange)
           btn.classList.add("ina-date-picker__day--hover");
         btn.onclick = (e) => {
-          e.stopPropagation();
           if (mode === "single") {
             selectedDate = date;
-            close();
           } else if (mode === "multiple") {
             const existsIdx = selectedDates.findIndex(
               (d) => d.toDateString() === date.toDateString()
@@ -512,7 +504,6 @@ function initDatepicker() {
               } else {
                 rangeDate = [start, date];
               }
-              close();
             }
             render();
           }
@@ -569,7 +560,6 @@ function initDatepicker() {
       else open();
     }
     trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
       toggle();
     });
     document.addEventListener("click", (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "publishConfig": {
     "access": "public"
   },