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.

Bước phút

Đặt bước tăng 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 { DateTimePicker } from "react-date-range-picker-styled";

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

  return <DateTimePicker 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 { DateTimePicker } from "react-date-range-picker-styled";

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

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

Định dạng 12 giờ

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

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

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

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