React-DateTimeRange-Picker 使用教程

React-DateTimeRange-Picker 使用教程

react-datetimerange-pickerA datetime range picker for your React app.项目地址:https://gitcode.com/gh_mirrors/re/react-datetimerange-picker

项目介绍

React-DateTimeRange-Picker 是一个为 React 应用设计的日期时间范围选择器。它允许用户选择日期、月份、年份甚至几十年。该项目支持现代浏览器，并且不需要依赖 moment.js。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 React-DateTimeRange-Picker：

npm install @wojtekmaj/react-datetimerange-picker
# 或者
yarn add @wojtekmaj/react-datetimerange-picker

基本使用

以下是一个基本的使用示例：

import React, { useState } from 'react';
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>([new Date(), new Date()]);

  return (
    <div>
      <DateTimeRangePicker onChange={onChange} value={value} />
    </div>
  );
}

export default MyApp;

应用案例和最佳实践

自定义样式

如果你想使用默认样式并在此基础上进行自定义，可以导入默认样式文件：

import '@wojtekmaj/react-datetimerange-picker/dist/DateTimeRangePicker.css';

多语言支持

React-DateTimeRange-Picker 支持多种语言，无需额外配置即可使用。

典型生态项目

React-DateTimeRange-Picker 可以与以下项目良好配合：

• React-Date-Picker: 日期选择器
• React-Time-Picker: 时间选择器
• React-DateTime-Picker: 日期时间选择器

这些项目共同构成了一个完整的日期时间选择解决方案，适用于各种复杂的日期时间选择需求。

react-datetimerange-pickerA datetime range picker for your React app.项目地址:https://gitcode.com/gh_mirrors/re/react-datetimerange-picker