Bắt đầu với Styled

Gói styled cung cấp các component bộ chọn ngày đã được tạo kiểu sẵn với CSS tích hợp. Không yêu cầu framework CSS.

Cài đặt

npm install react-date-range-picker-styled

Sau khi cài đặt, hãy nhập CSS vào điểm khởi đầu ứng dụng của bạn:

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

Bắt đầu nhanh

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

Bao gồm những gì

ComponentMô 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 tùy chọn đặ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 component đề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 các biến CSS
  • 4 kích thước: small, medium, large, x-large
  • API Component 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-styled";

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

  • Locale — Ghi đè bản địa hóa tùy chỉnh (tên 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 tùy chọn đặt trước cho DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Kết xuất tùy chỉnh với các Component 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