Native Datepicker on Focus

A lightweight, zero-dependency utility that automatically opens the native browser date picker when an input[type='date'] element receives focus. It includes a specific fix for an issue in Firefox where clicking the calendar icon causes the date picker to open and immediately close.

Why?

The native HTML5 date picker is convenient, but by default, it only opens when the user clicks calendar icon. Automatically displaying the calendar when a user focuses on the input (e.g., by using the Tab key) can significantly improve the user experience.

This library provides a simple way to implement this functionality and, more importantly, offers a solution to the "double-toggle" problem in Firefox caused by a conflict between pointer and focus events.

Installation

npm install native-datepicker-on-focus

or using yarn:

yarn add native-datepicker-on-focus

How to Use

Simply import the module and execute the function.

import autoOpenDatePicker from 'native-datepicker-on-focus';

// Apply to all input[type='date'] elements on the page.
const { unbind } = autoOpenDatePicker();

// Call this function later if you need to remove the event listeners.
// unbind();

Applying to Specific Elements

You can pass a CSS selector as an argument to apply the functionality only to specific input elements.

import autoOpenDatePicker from 'native-datepicker-on-focus';

// Apply only to elements with the .my-date-input class.
autoOpenDatePicker('.my-date-input');

// Apply only to the element with the #order-date ID.
autoOpenDatePicker('#order-date');

API

autoOpenDatePicker(selector)

• selector (optional)

  • Type: string
  • Default: "input[type='date']"
  • A CSS selector to target the desired elements.

• Returns

  • Type: object
  • Returns an object of the form { unbind: () => void }. Calling the unbind function will cleanly remove all event listeners added by this library. This is especially useful in Single Page Application (SPA) environments when a component is unmounted.

Browser Support

Works in all modern browsers that support the showPicker() API, and includes a fallback for older browsers.

• Chrome
• Firefox (with the flicker/toggle fix)
• Edge
• Safari
• Other modern browsers

License

This project is licensed under the ISC License.

Author

An, Hyeong-woo (mytory)

input[type='date'] 엘리먼트에 포커스가 될 때, 브라우저의 네이티브 데이트 피커(Date Picker)를 자동으로 열어주는 가벼운 유틸리티입니다. 특히 Firefox에서 달력 아이콘 클릭 시 데이트 피커가 열렸다가 바로 닫히는 문제를 해결하는 코드가 포함되어 있습니다.

의존성이 없는(Zero-dependency) 순수 자바스크립트 라이브러리입니다.

왜 필요한가요?

HTML5의 네이티브 데이트 피커는 편리하지만, 기본적으로는 사용자가 달력 아이콘을 직접 클릭해야 열립니다. 키보드 Tab 키 등으로 입력 필드에 포커스했을 때 자동으로 달력이 나타나면 사용자 경험을 크게 향상시킬 수 있습니다.

이 라이브러리는 이 기능을 간단하게 구현해주며, 특히 Firefox에서 포인터 이벤트와 포커스 이벤트의 충돌로 인해 발생하는 "더블 토글(double-toggle)" 현상을 방지하는 해결책을 제공합니다.

설치

npm install native-datepicker-on-focus

또는 yarn 사용 시:

yarn add native-datepicker-on-focus

사용법

라이브러리를 불러온 후, 함수를 실행하기만 하면 됩니다.

import autoOpenDatePicker from 'native-datepicker-on-focus';

// 페이지 내의 모든 input[type='date']에 기능을 적용합니다.
const { unbind } = autoOpenDatePicker();

// 나중에 이벤트 리스너를 제거하고 싶을 때 호출합니다.
// unbind();

특정 엘리먼트에 적용하기

CSS 셀렉터를 인자로 전달하여 특정 input 엘리먼트에만 기능을 적용할 수 있습니다.

import autoOpenDatePicker from 'native-datepicker-on-focus';

// .my-date-input 클래스를 가진 엘리먼트에만 적용합니다.
autoOpenDatePicker('.my-date-input');

// #order-date ID를 가진 엘리먼트에만 적용합니다.
autoOpenDatePicker('#order-date');

API

autoOpenDatePicker(selector)

• selector (선택사항)

  • Type: string
  • Default: "input[type='date']"
  • 기능을 적용할 대상을 지정하는 CSS 셀렉터입니다.

• 반환값 (Returns)

  • Type: object
  • { unbind: () => void } 형태의 객체를 반환합니다. unbind 함수를 호출하면 이 라이브러리가 추가했던 모든 이벤트 리스너를 깨끗하게 제거할 수 있습니다. 이는 특히 SPA(Single Page Application) 환경에서 컴포넌트가 언마운트될 때 유용합니다.

브라우저 지원

showPicker() API를 지원하는 모든 최신 브라우저에서 작동하며, 지원하지 않는 구형 브라우저를 위한 폴백(fallback) 로직도 포함되어 있습니다.

• Chrome
• Firefox (깜빡임 문제 해결)
• Edge
• Safari
• 기타 모던 브라우저

라이선스

ISC

Author

An, Hyeong-woo (mytory)