判断当前选择的日期区间有无对应的周

最新推荐文章于 2024-07-19 17:37:28 发布

素mou

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量172

点赞数

分类专栏：前端 react 文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_41695981/article/details/127441253

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

react

2 篇文章 0 订阅

订阅专栏

dom层

<Form onFinish={onFinish}>
    <Form.Item {...formItemLayout} name='date' label='日期' rules={
        [
            {
                required: true, message: '请选择日期！'
            }
        ]
    }>
         <RangePicker format={'YYYY-MM-DD'} disabledDate={disabledDate} 
            allowEmpty={[true, true]}/>
    </Form.Item>
    <Form.Item {...formItemLayout} name='weeks' label='选择周' rules={
        [
            {
                required: true, message: '请选择周！'
            }
        ]
    }>
        <Checkbox.Group options={weekOptions} />
    </Form.Item>
    <Form.Item>
        <Button htmlType='submit' type='primary'>确认</Button>
    </Form.Item>
</Form>

const weekOptions = [
    {
        label: '周一',
        value: 1
    },
    {
        label: '周...',
        value: 1-7
    },
    {
        label: '周日',
        value: 7
    },
]

事件层

const onFinish = (values) => {
    const { date, weeks } = values,
        startD = getDay(moment(date[0] || date[1]).day()),
        endD = getDay(moment(date[1] || date[0]).day()),
        startW = moment(date[0] || date[1]).week(),
        endW = moment(date[1] || date[0]).week();
    
    if(startD || endD) {
        if(startW === endW) { // 同周
            // 不在范围内提示
            const isError = weeks.find(v =>!(v <= endD && v >= startD))
            if(isError) {
                message.info('请选择正确周')
            } else {
                onSubmit(res)
            }
                        
    } else {
        // 不同周 先分开判断startD、endD
        let isError
        if(endW - startW < 2) {
            isError =  weeks.find( v =>
                !((v >= startD && v <= 7) || ( v <= endD && v >= 1)))
        }
        if(isError) {
            message.info('请选择正确周')
        } else {
            onSubmit(res)
        }
    }

}

const onSubmit = (res) => {
    // 处理提交
}