React, typescript, UI库 ant-design
参考文档: 日期选择框 DatePicker - Ant Design
描述:两个控件 DatePicker 选择一个日期 ,RangePicker的不可选择日期 由默认的未来日期(包含今天)不能选择,变为DatePicker选择日期(包含选择日期)之后的不能选择
代码
// TypeScript
return (<RangePicker
onChange={onRangeDateChange}
disabledDate={disabledDate}
/>)
return (<DatePicker
showTime
showNow={false}
format="YYYY-MM-DD HH:mm"
disabledDate={disabledDateTime}
disabledTime={disabledTime as any}
onChange={onDateTimeChange}
/>)
// 引入
import { useEffect, useState } from "react"
import { DatePicker } from 'antd'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import moment, { Moment } from "moment"
// 方法/函数组件外部定义
dayjs.extend(customParseFormat)
const { RangePicker } = DatePicker
type RangeValue = [Moment | null, Moment | null] | null // typescript
// 方法/函数组件内部定义
// 定义一个变量 dates,类型为RangeValue,赋初始值为null
const [dates, setDates] = useState<RangeValue>(null)
// 方法
// DatePicker 选择一个指定日期时间,触发onDateTimeChange方法
const onDateTimeChange = (date: any, dateString: string) => {
if (dateString) {
// 如果选择了日期时间,因为我们只要日期,截取前10位字符是日期。 赋值给dates的结束日期
// 因为另一个组件是rangePicker,所以是[],这里赋值给结束日期
setDates([null, moment(dateString.slice(0, 11), dateFormat)])
} else {
setDates(null)
}
form.setFieldsValue({ exec_time: dateString }) // 为了给form表单赋string类型日期值
}
const disabledDate = (current: Moment) => {
// Can not select days after today and today
if (!dates) {
// 如果datePicker没有选择日期时间,默认不可选今天及将来日期
let currDate = current.format('YYYY-MM-DD')
return current && currDate >= dayjs().endOf('day').format('YYYY-MM-DD')
} else {
const startDate = dates[0] ? dates[0] : current
const endDate = dates[1] ? dates[1] : dayjs().endOf('day')
return !(current >= startDate && current <= endDate)
}
}
效果
datepicker未指定日期时间
datepicker指定日期时间后,rangepicker 不可选择日期范围改变