better timepicker

Author: skerbis

.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+    ignore:
+      - dependency-name: form-data
+      - dependency-name: postcss
+      - dependency-name: uuid
+      - dependency-name: js-yaml

CHANGELOG.md

@@ -7,10 +7,14 @@ All notable changes to this project will be documented in this file.
 ### Changed
 - Default interaction changed: focusing the input (for example via Tab) no longer opens the calendar automatically.
 - Added option `focusOpens` (default `false`) to opt in to the previous focus-to-open behavior when needed.
+- Added `.github/dependabot.yml` with a temporary ignore list for problematic transitive advisories (`form-data`, `postcss`, `uuid`, `js-yaml`) to prevent repeated failing update runs until the dependency chain is modernized.
+- Time selection now always renders as an accessible wheel-style popover (including desktop) with clear selected states.
+- When `enableTime` is active, the custom picker is used on mobile too (native mobile input is bypassed) so the same time popover interaction is available everywhere.
 
 ### Fixed
 - Mobile date and datetime selection no longer forces input focus before opening the native picker, preventing the on-screen keyboard from appearing unnecessarily.
 - Time-only mobile inputs (`enableTime=true` and `noCalendar=true`) keep focus behavior so direct time entry still works.
+- In datetime mode, clicking/tapping a calendar day no longer auto-focuses the time field; this avoids repeatedly re-activating time input while selecting another date.
 
 ## [5.1.3] - 2026-05-22
 

__tests__/src/index.spec.ts

@@ -1035,8 +1035,10 @@ describe("flatpickr", () => {
       expect(document.activeElement).toBe(fp.nextMonthNav);
     });
 
-    it("tab from day moves focus forward to close button", () => {
-      createInstance();
+    it("tab from day moves focus forward to time trigger", () => {
+      createInstance({
+        enableTime: true,
+      });
       fp.open();
 
       const firstDay = fp.days.childNodes[0] as HTMLElement;
@@ -1046,7 +1048,10 @@ describe("flatpickr", () => {
         keyCode: 9,
       });
 
-      expect(document.activeElement).toBe(fp.closeButton);
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      );
+      expect(document.activeElement).toBe(trigger);
     });
 
     it("pressing M focuses month control as keyboard fallback", () => {
@@ -1357,11 +1362,11 @@ describe("flatpickr", () => {
         it("with value", () => {
           mockAgent = "Android";
           createInstance({
-            enableTime: true,
+            defaultDate: "2016-10-20",
           });
 
           const mobileInput = fp.mobileInput as HTMLInputElement;
-          mobileInput.value = "2016-10-20T02:30";
+          mobileInput.value = "2016-10-20";
           simulate("change", mobileInput);
 
           expect(fp.selectedDates.length).toBe(1);
@@ -1371,8 +1376,18 @@ describe("flatpickr", () => {
           expect(fp.latestSelectedDateObj.getFullYear()).toBe(2016);
           expect(fp.latestSelectedDateObj.getMonth()).toBe(9);
           expect(fp.latestSelectedDateObj.getDate()).toBe(20);
-          expect(fp.latestSelectedDateObj.getHours()).toBe(2);
-          expect(fp.latestSelectedDateObj.getMinutes()).toBe(30);
+          expect(fp.latestSelectedDateObj.getHours()).toBe(0);
+          expect(fp.latestSelectedDateObj.getMinutes()).toBe(0);
+        });
+
+        it("enableTime uses custom picker on mobile", () => {
+          mockAgent = "Android";
+          createInstance({
+            enableTime: true,
+          });
+
+          expect(fp.isMobile).toBe(false);
+          expect(fp.mobileInput).toBeUndefined();
         });
 
         it("copy className and adds own", () => {
@@ -1452,21 +1467,15 @@ describe("flatpickr", () => {
           expect(clickSpy).toHaveBeenCalled();
         });
 
-        it("open() keeps focus for mobile time-only input", () => {
+        it("open() keeps custom picker for mobile time-only input", () => {
           mockAgent = "Android";
           createInstance({
             enableTime: true,
             noCalendar: true,
           });
 
-          const mobileInput = fp.mobileInput as HTMLInputElement;
-          const focusSpy = jest.spyOn(mobileInput, "focus");
-          const clickSpy = jest.spyOn(mobileInput, "click");
-
-          fp.open();
-
-          expect(focusSpy).toHaveBeenCalled();
-          expect(clickSpy).toHaveBeenCalled();
+          expect(fp.isMobile).toBe(false);
+          expect(fp.mobileInput).toBeUndefined();
         });
       });
     });
@@ -1547,6 +1556,219 @@ describe("flatpickr", () => {
       expect(fp.hourElement.value).toEqual("09");
     });
 
+    it("renders accessible time wheel popover", () => {
+      createInstance({
+        enableTime: true,
+      });
+
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      ) as HTMLElement | null;
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+
+      expect(trigger).toBeTruthy();
+      expect(popover).toBeTruthy();
+      expect(popover?.getAttribute("role")).toBe("dialog");
+      expect(popover?.hasAttribute("hidden")).toBe(true);
+
+      if (!trigger || !popover) return;
+
+      simulate("click", trigger, { which: 1 }, MouseEvent);
+      expect(popover.hasAttribute("hidden")).toBe(false);
+
+      const done = popover.querySelector(
+        ".flatpickr-time-wheel-done"
+      ) as HTMLElement | null;
+      expect(done).toBeTruthy();
+      if (!done) return;
+
+      simulate("click", done, { which: 1 }, MouseEvent);
+      expect(popover.hasAttribute("hidden")).toBe(true);
+    });
+
+    it("time wheel popover respects minuteIncrement", () => {
+      createInstance({
+        enableTime: true,
+        minuteIncrement: 15,
+      });
+
+      const minuteOptions = Array.from(
+        fp.timeContainer?.querySelectorAll(
+          ".flatpickr-time-wheel-minutes .flatpickr-time-wheel-option"
+        ) || []
+      ).map((el) => (el as HTMLElement).textContent?.trim());
+
+      expect(minuteOptions).toEqual(["00", "15", "30", "45"]);
+    });
+
+    it("time wheel popover updates minute value on click", () => {
+      createInstance({
+        enableTime: true,
+        defaultDate: "2017-1-1 10:00",
+      });
+
+      const targetOption = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-minutes .flatpickr-time-wheel-option[data-value='30']"
+      ) as HTMLElement | null;
+
+      expect(targetOption).toBeTruthy();
+      if (!targetOption || !fp.minuteElement) return;
+
+      simulate("click", targetOption, { which: 1 }, MouseEvent);
+      expect(fp.minuteElement.value).toBe("30");
+    });
+
+    it("time wheel popover supports arrow navigation and escape", () => {
+      createInstance({
+        enableTime: true,
+        defaultDate: "2017-1-1 10:00",
+      });
+
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      ) as HTMLElement | null;
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+
+      expect(trigger).toBeTruthy();
+      expect(popover).toBeTruthy();
+      if (!trigger || !popover || !fp.hourElement || !fp.minuteElement) return;
+
+      simulate("click", trigger, { which: 1 }, MouseEvent);
+
+      const selectedHour = popover.querySelector(
+        ".flatpickr-time-wheel-hours .flatpickr-time-wheel-option.is-selected"
+      ) as HTMLElement | null;
+      expect(selectedHour).toBeTruthy();
+      if (!selectedHour) return;
+
+      simulate("keydown", selectedHour, { key: "ArrowDown" }, KeyboardEvent);
+      expect(fp.hourElement.value).toBe("11");
+
+      simulate("keydown", selectedHour, { key: "Tab" }, KeyboardEvent);
+      const selectedMinute = popover.querySelector(
+        ".flatpickr-time-wheel-minutes .flatpickr-time-wheel-option.is-selected"
+      ) as HTMLElement | null;
+      expect(document.activeElement).toBe(selectedMinute);
+
+      if (!selectedMinute) return;
+      simulate("keydown", selectedMinute, { key: "Escape" }, KeyboardEvent);
+      expect(popover.hasAttribute("hidden")).toBe(true);
+      expect(document.activeElement).toBe(trigger);
+    });
+
+    it("enter on time trigger opens popover instead of closing calendar", () => {
+      createInstance({
+        enableTime: true,
+      });
+
+      fp.open();
+
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      ) as HTMLElement | null;
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+
+      expect(trigger).toBeTruthy();
+      expect(popover).toBeTruthy();
+      if (!trigger || !popover) return;
+
+      trigger.focus();
+      simulate("keydown", trigger, { keyCode: 13 }, KeyboardEvent);
+
+      expect(fp.isOpen).toBe(true);
+      expect(popover.hasAttribute("hidden")).toBe(false);
+    });
+
+    it("enter on done closes only the popover", () => {
+      createInstance({
+        enableTime: true,
+      });
+
+      fp.open();
+
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      ) as HTMLElement | null;
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+      const done = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-done"
+      ) as HTMLElement | null;
+
+      expect(trigger).toBeTruthy();
+      expect(popover).toBeTruthy();
+      expect(done).toBeTruthy();
+      if (!trigger || !popover || !done) return;
+
+      simulate("click", trigger, { which: 1 }, MouseEvent);
+      done.focus();
+      simulate("keydown", done, { keyCode: 13 }, KeyboardEvent);
+
+      expect(fp.isOpen).toBe(true);
+      expect(popover.hasAttribute("hidden")).toBe(true);
+      expect(document.activeElement).toBe(trigger);
+    });
+
+    it("time only renders the wheel popover directly", () => {
+      createInstance({
+        enableTime: true,
+        noCalendar: true,
+      });
+
+      const trigger = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-trigger"
+      ) as HTMLElement | null;
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+
+      expect(trigger).toBeNull();
+      expect(popover).toBeTruthy();
+      expect(popover?.hasAttribute("hidden")).toBe(false);
+    });
+
+    it("time only reopens the wheel popover after close", () => {
+      createInstance({
+        enableTime: true,
+        noCalendar: true,
+      });
+
+      const popover = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-popover"
+      ) as HTMLElement | null;
+      expect(popover).toBeTruthy();
+      if (!popover) return;
+
+      fp.close();
+      expect(popover.hasAttribute("hidden")).toBe(true);
+
+      fp.open();
+      expect(popover.hasAttribute("hidden")).toBe(false);
+    });
+
+    it("time only tabs from input into the wheel", () => {
+      createInstance({
+        enableTime: true,
+        noCalendar: true,
+      });
+
+      fp._input.focus();
+      simulate("keydown", fp._input, { keyCode: 9 }, KeyboardEvent);
+
+      const selectedHour = fp.timeContainer?.querySelector(
+        ".flatpickr-time-wheel-hours .flatpickr-time-wheel-option.is-selected"
+      ) as HTMLElement | null;
+
+      expect(document.activeElement).toBe(selectedHour);
+    });
+
     it("time input respects minDate", () => {
       createInstance({
         enableTime: true,
@@ -2117,6 +2339,23 @@ describe("flatpickr", () => {
       expect(fp.currentMonth).toEqual(3);
       expect(monthControl.value).toEqual("3");
     });
+
+    it("datetime mode does not auto-focus time input after mouse date click", () => {
+      const fp = createInstance({
+        enableTime: true,
+      }) as Instance;
+
+      fp.open();
+
+      const hourFocusSpy = jest.spyOn(
+        fp.hourElement as HTMLInputElement,
+        "focus"
+      );
+
+      simulate("click", fp.days.childNodes[15], { which: 1 }, MouseEvent);
+
+      expect(hourFocusSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe("Localization", () => {