react-datepicker

Datepicker 基础组件库，react hook + typescript 代码风格，包含 DatePicker，TimePicker，DateRangePicker 三个子组件:

• DatePicker，标准单日期选择组件，支持日，周，月，季，年，日期时间共 6 种日期类型选择；
• TimePicker，标准时间选择组件，全新设计，避免滚动选择，特定时间点直观显示
• DateRangePicker，范围双日期选择组件，支持日，周，月，季，年 5 种日期维度选择；

组件使用的第三方库：lodash，dayjs，classnames，react-popper，rc-slider

安装

npm i react-datepicker-ts

使用

import { DatePicker } from 'react-datepicker-ts';

<DatePicker />

// or
import { TimePicker } from 'react-datepicker-ts';

<TimePicker />

// or

import { DateRangePicker } from 'react-datepicker-ts';

<DateRangePicker />

主题色变更

组件默认采用的是绿色主题色系，如需变更，只需要在项目 css 中重写两个主题色相关变量即可，如下图改为 antd 主题色

// index.css
:root {
  --c-datepicker-primary: #1890FF;
  --c-datepicker-primary-light: #bae7ff;
}