Tùy chọn Thời gian

Cấu hình hành vi của bảng điều khiển thời gian thông qua prop time.

Định dạng 12 giờ

Chuyển sang định dạng 12 giờ với nút gạt AM/PM.

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

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

  return <TimePicker value={value} onChange={setValue} time={{ hourFormat: "12" }} />;
}

Bước nhảy phút

Đặt bước nhảy tăng của phút. Hữu ích cho việc lập lịch theo các khoảng thời gian cố định.

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

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

  return <TimePicker value={value} onChange={setValue} time={{ minuteStep: 15 }} />;
}

Độ chính xác giây

Hiển thị cột giây bằng cách đặt precision thành "second".

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

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

  return <TimePicker value={value} onChange={setValue} time={{ precision: "second" }} />;
}