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

แพ็คเกจ Tailwind v3 มีคอมโพเนนต์ตัวเลือกวันที่ซึ่งจัดรูปแบบด้วยคลาสยูทิลิตี้ของ Tailwind CSS v3

การติดตั้ง

การกำหนดค่า Tailwind

เพิ่มปลั๊กอินและ content path ลงในการกำหนดค่า Tailwind ของคุณ:

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],
};

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

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

มีอะไรบ้าง

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

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

ประเภทของ TypeScript

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

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

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

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

ดูคำจำกัดความประเภทโดยละเอียดได้ที่ Headless Types

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

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