需求:三个DatePicker组件实现 开奖时间>截至时间>开始时间
const addHD= () => {const [start, setStart] = useState({});const [end, setEnd] = useState({});const [enableEnd, setEnableEnd] = useState(false);const [enableDraw, setEnableDraw] = useState(false);const getTime= time => {if (time) {return moment(time).format('HH:mm:ss');}return '00:00:00';};const range = (start: number, end: number) => {const result = [];for (let i = start; i < end; i++) {result.push(i);}return result;};const disabledEnd = (data) => {if (start) {const date = moment(start).format('YYYY-MM-DD');const hour = moment(start).format('HH');const minute = moment(start).format('mm');const second = moment(start).format('ss');if (data && data.format('YYYY-MM-DD') === date) {//当“截止时间”和“开始时间”是同一天时return {//时/分/秒,只能选“开始时间”之后的disabledHours: () => range(0, hour),disabledMinutes: () => range(0, minute),disabledSeconds: () => range(0, second),};}if (data && data.format('YYYY-MM-DD') !== date) {//当“截止时间”和“开始时间”不是同一天时return {//时/分/秒,都可选disabledHours: () => range(0, 0),disabledMinutes: () => range(0, 0),disabledSeconds: () => range(0, 0),};}}return null;}const disabledDraw = (data) => {if (end) {const date = moment(end).format('YYYY-MM-DD');const hour = moment(end).format('HH');const minute = moment(end).format('mm');const second = moment(end).format('ss');if (data && data.format('YYYY-MM-DD') === date) {return {disabledHours: () => range(0, hour),disabledMinutes: () => range(0, minute),disabledSeconds: () => range(0, second),};}if (data && data.format('YYYY-MM-DD') !== date) {return {disabledHours: () => range(0, 0),disabledMinutes: () => range(0, 0),disabledSeconds: () => range(0, 0),};}}return null;}return (<>[{ required: true, message: "请选择开始时间" }]}>false}disabledDate={cur => cur && cur < moment().startOf('day')}onChange={val => {setStart(val);setEnableEnd(true)}}showTime format="YYYY-MM-DD HH:mm:ss" />[{ required: true, message: "请选择截止时间" }]}>false}allowClear={false} disabled={!enableEndTime} //必须先选“截止时间”showTime={{ defaultValue: moment(getTime(start), 'HH:mm:ss') }} //必须设置,否则默认时间不符合需求onChange={val => {setEnd(val);setEnableDraw(true)}}disabledDate={cur => cur && cur < moment(start).startOf('day')}disabledTime={disabledEnd}format="YYYY-MM-DD HH:mm:ss"/>[{ required: true, message: "请选择开奖时间" }]}>false}allowClear={false}disabled={!enableDrawTime} //必须先选“截止时间”showTime={{ defaultValue: moment(time(end), 'HH:mm:ss') }}disabledDate={cur => cur && cur < moment(end).startOf('day')}disabledTime={disabledDraw}format="YYYY-MM-DD HH:mm:ss"/><>)
};