เริ่มต้นใช้งาน Styled

แพ็คเกจ styled มีคอมโพเนนต์ตัวเลือกวันที่ (date picker) ที่มีสไตล์มาให้พร้อม CSS ในตัว ไม่จำเป็นต้องใช้ CSS framework

การติดตั้ง

หลังจากติดตั้งแล้ว ให้นำเข้า CSS ในไฟล์เริ่มต้นของแอปพลิเคชันของคุณ:

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

เริ่มต้นใช้งานฉบับย่อ

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

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

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

มีอะไรบ้างในแพ็คเกจ

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

• การควบคุมค่าด้วย value / onChange
• การนำทางด้วยคีย์บอร์ด
• โหมดมืดผ่าน CSS variables
• 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-styled";

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

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

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

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

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