시작·종료 두 번 클릭, hover 미리보기, 2개월 뷰와 프리셋을 갖춘 범위 피커.
한 줄 요약
시작일을 누르고 마우스를 움직이면 종료까지 범위가 미리 보이고, 확정 구간은 둥근 캡 + 연결 띠로 강조되는 범위 선택 달력입니다.
기간을 입력받아야 할 때 호텔/항공 예약, 리포트 조회 기간, 휴가 신청 등.
네이티브 Date로 6주 그리드를 직접 만든다.
1차 클릭=시작, 2차=종료, 시작 이전 클릭이면 시작 재설정.
hover로 범위를 미리보기하고 확정 구간을 띠로 잇는다.
프리셋 칩화살표 키 네비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>
);
}