react,三个DatePicker组件实现时间限制(开奖时间>截至时间>开始时间)
admin
2024-03-09 09:23:29

需求:三个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 (<>
form} onFinish={onFinish} >[{ 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"/><>) };

相关内容

热门资讯

潮州密码[60]在潮州,理学如... 岁末年初,到潮州感受古风盎然的年节气氛,已成为许多人的选择。春节期间此地祠庙门开、张灯结彩,以宗族为...
原创 宝... 宝宝起名案例 朱炫宇 朱姓父母如何取名宝宝 “朱炫宇”名字解析 姓氏“朱” 朱姓历史源远流长,起源...
最新或2023(历届)蓝色的关... 关爱,一词并不陌生,它就像一条红绳,把我们连接在一起,将爱播撒于四面八方,处处温暖人心。关爱本是无色...
最新或2023(历届)阳光三少... 我有两个朋友,因为关系好被史称“阳光三少”,而我们的口号就是:阳光三少,各有所能,各显神通,乐观向上...
最新或2023(历届)在这里六... 柔软的草地,冬暖夏凉的树阴,参差不齐的芦苇,这里真是块天堂般的地方啊!每次一发现嫩黄色的芦苇芽儿冒了...