เริ่มต้นใช้งาน Tailwind CSS v4

แพ็คเกจ Tailwind v4 มีคอมโพเนนต์ตัวเลือกวันที่ (date picker) ที่จัดรูปแบบด้วยคลาสยูทิลิตี้ของ Tailwind CSS v4 และโทเค็นการออกแบบเชิงความหมาย (semantic design tokens)

การติดตั้ง

npm install react-date-range-picker-tailwind4

นำเข้าสไตล์คอมโพเนนต์ในไฟล์ CSS หลักของคุณ:

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

หากโปรเจกต์ของคุณยังไม่ได้กำหนดโทเค็นการออกแบบเชิงความหมาย (เช่น โปรเจกต์ shadcn/ui มีอยู่แล้ว) ให้นำเข้าธีมเริ่มต้นด้วย:

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

โปรเจกต์ shadcn/ui

shadcn/ui กำหนดโทเค็นที่จำเป็นไว้แล้ว คุณต้องการแค่สไตล์คอมโพเนนต์:

/* 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";

โปรเจกต์ Tailwind v4 แบบสแตนด์อโลน

สำหรับโปรเจกต์ที่ไม่มี shadcn/ui ให้นำเข้าทั้งโทเค็นธีมและสไตล์คอมโพเนนต์:

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

โทเค็นเชิงความหมาย (Semantic Tokens)

คอมโพเนนต์ใช้ CSS custom properties --rdrp-* ภายใน ซึ่งจับคู่กับโทเค็นเชิงความหมายของ Tailwind v4 / shadcn ผ่าน var() พร้อมค่าสำรอง หากต้องการปรับแต่งการจับคู่ ให้แทนที่ตัวแปร --rdrp-* ในไฟล์ CSS ของคุณ

ไฟล์ rdrp-theme.css ให้พาเลตเริ่มต้น Slate + Sky พร้อมโทเค็นเหล่านี้:

โทเค็นการใช้งาน
--color-backgroundพื้นหลังคอมโพเนนต์
--color-foregroundสีข้อความ
--color-primaryวันที่เลือก, สถานะแอ็คทีฟ
--color-primary-foregroundข้อความบนสีหลัก
--color-muted-foregroundข้อความจาง, ตัวยึดตำแหน่ง
--color-accentพื้นหลังเมื่อเลื่อนเมาส์
--color-borderสีขอบ
--color-ringสีวงแหวนโฟกัส

เริ่มต้นอย่างรวดเร็ว

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} />;
}

มีอะไรบ้าง

คอมโพเนนต์คำอธิบาย
DatePickerการเลือกวันที่เดียวพร้อมปฏิทินป๊อปอัป
DateRangePickerการเลือกช่วงวันที่พร้อมปฏิทินคู่และค่าที่ตั้งไว้ล่วงหน้า
DateTimePickerการเลือกวันที่และเวลาพร้อมแผงเลื่อนเวลา
DateRangeTimePickerการเลือกช่วงวันที่และเวลา

คอมโพเนนต์ทั้งหมดรองรับ:

  • ควบคุมค่าด้วย value / onChange
  • การนำทางด้วยคีย์บอร์ด
  • โหมดมืดผ่าน dark: variant
  • 4 ขนาด: small, medium, large, x-large
  • Compound Component API สำหรับการปรับแต่ง

ประเภทของ TypeScript

ประเภทการกำหนดค่าและข้อมูลทั้งหมดถูกส่งออกซ้ำจากแพ็คเกจ — ไม่จำเป็นต้องติดตั้งแพ็คเกจ headless แยกต่างหาก:

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

ประเภทเหล่านี้มีประโยชน์สำหรับ:

  • Locale — การกำหนดค่าภาษาท้องถิ่นแบบกำหนดเอง (ชื่อวันในสัปดาห์, ป้ายกำกับปุ่ม, รูปแบบวันที่)
  • DatePickerSize — การกำหนดประเภทของ size prop ("small" | "medium" | "large" | "x-large")
  • TimeConfig — การกำหนดค่าความแม่นยำ, รูปแบบ, และขั้นของตัวเลือกเวลา
  • DateRangePreset — การกำหนดค่าที่ตั้งไว้ล่วงหน้าสำหรับ DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — การเรนเดอร์แบบกำหนดเองด้วย Compound Components

ดู Headless Types สำหรับคำจำกัดความของประเภทโดยละเอียด

ขั้นตอนถัดไป

  • DatePicker — การเลือกวันที่เดียว
  • DateRangePicker — ช่วงวันที่พร้อมค่าที่ตั้งไว้ล่วงหน้า
  • Compound Components — ปรับแต่งโครงสร้างภายใน
  • Semantic Tokens — การทำธีมด้วยโทเค็นการออกแบบ
  • Dark Mode — การรองรับธีมมืด