Bắt đầu với Tailwind CSS v4

Gói Tailwind v4 cung cấp các thành phần chọn ngày được tạo kiểu bằng các lớp tiện ích của Tailwind CSS v4 và các token thiết kế ngữ nghĩa.

Cài đặt

npm install react-date-range-picker-tailwind4

Nhập các kiểu dáng thành phần trong tệp CSS chính của bạn:

@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Nếu dự án của bạn chưa định nghĩa các token thiết kế ngữ nghĩa (ví dụ: các dự án shadcn/ui đã có sẵn), hãy nhập thêm giao diện mặc định:

@import "react-date-range-picker-tailwind4/rdrp-theme.css";

Dự án shadcn/ui

shadcn/ui đã định nghĩa sẵn các token cần thiết. Bạn chỉ cần các kiểu dáng thành phần:

/* app/globals.css or src/index.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "react-date-range-picker-tailwind4/rdrp-reset.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Dự án Tailwind v4 độc lập

Đối với các dự án không có shadcn/ui, hãy nhập cả token giao diện và kiểu dáng thành phần:

src/index.css
@import "tailwindcss";
@import "react-date-range-picker-tailwind4/rdrp-theme.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Token ngữ nghĩa

Các thành phần sử dụng nội bộ các thuộc tính CSS tùy chỉnh --rdrp-*, được ánh xạ tới các token ngữ nghĩa Tailwind v4 / shadcn thông qua var() với giá trị dự phòng. Nếu bạn muốn tùy chỉnh ánh xạ, hãy ghi đè các biến --rdrp-* trong CSS của bạn.

Tệp rdrp-theme.css cung cấp bảng màu mặc định Slate + Sky với các token sau:

TokenCông dụng
--color-backgroundNền thành phần
--color-foregroundMàu chữ
--color-primaryNgày được chọn, trạng thái hoạt động
--color-primary-foregroundChữ trên màu chính
--color-muted-foregroundChữ mờ, chỗ giữ chỗ
--color-accentNền khi di chuột
--color-borderMàu viền
--color-ringMàu vòng tập trung

Bắt đầu nhanh

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";


function Basic() {
  const [value, setValue] = useState<Date | null>(null);


  return <DatePicker value={value} onChange={setValue} />;
}

Bao gồm những gì

Thành phầnMô tả
DatePickerChọn một ngày với lịch bật lên
DateRangePickerChọn khoảng ngày với lịch kép và các cài đặt trước
DateTimePickerChọn ngày + giờ với bảng cuộn thời gian
DateRangeTimePickerChọn khoảng ngày + giờ

Tất cả các thành phần đều hỗ trợ:

  • Giá trị được kiểm soát với value / onChange
  • Điều hướng bằng bàn phím
  • Chế độ tối qua biến thể dark:
  • 4 kích thước: small, medium, large, x-large
  • API Thành phần Hợp chất để tùy chỉnh

Các loại TypeScript

Tất cả các loại cấu hình và dữ liệu đều được xuất lại từ gói — không cần cài đặt riêng gói headless:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind4";

Các loại này hữu ích cho:

  • Locale — Ghi đè bản địa hóa tùy chỉnh (tên các ngày trong tuần, nhãn nút, định dạng ngày)
  • DatePickerSize — Xác định kiểu cho prop size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Cấu hình độ chính xác, định dạng và các bước của bộ chọn thời gian
  • DateRangePreset — Xác định các cài đặt trước cho DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Kết xuất tùy chỉnh với các Thành phần Hợp chất

Xem Các loại Headless để biết định nghĩa chi tiết về các loại.

Các bước tiếp theo