@uiw/react-date-picker

DatePicker 日期选择器

显示一个月的日历，并允许用户选择单个日期，常见的应用场景在表单中应用，请查看基于 DatePicker 的 DateInput 组件。

import { DatePicker } from 'uiw';
// or
import DatePicker from '@uiw/react-date-picker';

基础用法

import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(new Date('2019-02-26 02:00:00'));
  
  return (
    <div>
      <DatePicker
        date={date}
        weekday={['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']}
        monthLabel={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <DatePicker
        showTime
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <DatePicker
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}

显示时间

import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        showTime
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}

设置本地语言

import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        todayButton="Today"
        weekTitle={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}
        weekday={['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']}
        monthLabel={['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}

初始展示日期

import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}

禁用时间

通过 disabledDate 方法设置，今天和今天之前不能选择。

import React from 'react';
import { DatePicker } from 'uiw';

function disabledDate(currentDate) {
  // 今天和今天之前不能选择
  return currentDate && currentDate.valueOf() < Date.now();
}

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
          disabledDate={disabledDate}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}

定制日历单元格

使用 renderDay 可以自定义日期单元格的内容和样式。

import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        renderDay={(day, props) => {
          const style = {}
          const week = props.date.getDay();
          if (week === 0 && !props.prev && !props.next) {
            style.boxShadow = 'inset 0 0 0 1px rgb(255 0 0)';
          }
          return (
            <div style={style}> {day} </div>
          );
        }}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}

DatePicker

参数	说明	类型	默认值
date	选中的日期	Date	-
panelDate	日历面板默认展示哪一页	Date	new Date
today	默认高亮当天日期	Date	new Date
todayButton	展示回到今天按钮，和提示文本。	String	-
showTime	增加时间选择功能，当 showTime 为一个对象时，其属性会传递给内建的 <TimePicker />。	Boolean/Object	-
renderDay	增加时间选择功能。 end: 周末，prev: 上个月，next：下个月 @3.0.0+	Function(day, { end: bool, prev: bool, next: bool, date: Date })	-
disabledDate	不可选择的日期，函数返回 true 当前日期被禁用无法选择。end: 周末，prev: 上个月，next：下个月	Function(currentDate, { end: bool, prev: bool, next: bool })	-
weekTitle	星期显示文本提示	Array	[星期天, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]
weekday	星期显示文本	Array	[日, 一, 二, 三, 四, 五, 六]
monthLabel	月份显示文本	Array	[一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月]
onChange	选择一天时调用。	(selectedDate?: Date, dateSource?: IDateSource)	-
onPanelChange	面板变化事件。	(date?: Date, mode?: 'next'	'prev')

DatePicker.showTime

参数	说明	类型	默认值
defaultValue	默认时间	Date	-
disabled	禁用全部操作	Boolean	false
disabledHours	禁止选择部分小时选项	Function	-
disabledMinutes	禁止选择部分分钟选项	Function	-
disabledSeconds	禁止选择部分秒选项	Function	-
format	禁止选择部分秒选项	Function	HH:mm:ss
hourStep	禁止选择部分秒选项	Function	-