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

Gói Tailwind v3 cung cấp các thành phần bộ chọn ngày được tạo kiểu bằng các lớp tiện ích của Tailwind CSS v3.

Cài đặt

npm install react-date-range-picker-tailwind3

Cấu hình Tailwind

Thêm plugin và đường dẫn content vào cấu hình Tailwind của bạn:

tailwind.config.js
import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";


export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  darkMode: "class",
  plugins: [rdrpPlugin],
};

Bắt đầu nhanh

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


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 thông 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 tái xuất 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-tailwind3";

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 — Đị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