폼·입력

날짜 범위 선택 달력

시작·종료 두 번 클릭, hover 미리보기, 2개월 뷰와 프리셋을 갖춘 범위 피커.

React 19네이티브 Date 계산ARIA grid키보드 네비
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약

시작일을 누르고 마우스를 움직이면 종료까지 범위가 미리 보이고, 확정 구간은 둥근 캡 + 연결 띠로 강조되는 범위 선택 달력입니다.

이럴 때 필요해요

기간을 입력받아야 할 때 호텔/항공 예약, 리포트 조회 기간, 휴가 신청 등.

어떻게 동작하나

  1. 네이티브 Date로 6주 그리드를 직접 만든다.

  2. 1차 클릭=시작, 2차=종료, 시작 이전 클릭이면 시작 재설정.

  3. hover로 범위를 미리보기하고 확정 구간을 띠로 잇는다.

  4. 프리셋 칩화살표 키 네비ARIA grid를 제공한다.

놓치기 쉬운 것

  • 라이브러리 없이 월 경계윤년을 Date 계산으로 처리한다.

  • 데스크톱 2개월/모바일 1개월로 반응형 전환한다.

  • 범위 띠가 둥근 엔드포인트 아래로 자연스럽게 연결되게 한다.

이런 곳에 써요

  • 예약검색 기간 필터

  • 관리자 리포트 기간 선택

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { DateRangePickerDemo } from "./-components/DateRangePickerDemo";

export const metadata: Metadata = {
  title: "날짜 범위 선택 달력 (데모)",
  description:
    "시작일과 종료일을 클릭해 기간을 고르는 범위 선택 달력. 두 날짜 사이를 연결된 띠로 강조하고, 데스크톱은 두 달을 나란히 보여줍니다.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-white">
      <DateRangePickerDemo />
    </main>
  );
}
18조회수

댓글