博客

公司在用react及antd进行后台管理系统开发，有一个表单页需要时间查询，功能类似于下图


选择每个选项会修改后面的日期选择器的值，比如选择本月，就会加以限制只能在本月范围内选择，且默认值变为本月开始到今天为止的时间。



官方示例的demo没有相关功能，只能自己扩展，不多BB直接上代码。

表单HTML部分代码：

    <Form
      layout="horizontal"
      name="userForm"
      form={form}
      initialValues={{
        createdDate: 'all'
      }}
      onFinish={onFinish}
    >
      <Row>
            <Col span={10} style={{padding: '0px 12px 0px 24px'}}>
              <Form.Item label="订单日期" name='createdDate'>
                <Radio.Group onChange={chengSelect}>
                  <Radio.Button value="all">全部</Radio.Button>
                  <Radio.Button value="day">今日</Radio.Button>
                  <Radio.Button value="week">本周</Radio.Button>
                  <Radio.Button value="month">本月</Radio.Button>
                  <Radio.Button value="year">本年</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
           <Col span={6} style={{padding: '0px 12px 0px 12px'}}>
             <Form.Item name='orderData'>
             <RangePicker onChange={onChange} disabledDate={disabledDate} value={[moment(`2020/08/25`, dateFormat), moment(`2020/08/25`, dateFormat)]}/>
             </Form.Item>
           </Col>


        <Col span={8} style={{padding: '0px 24px 0 12px', float: 'right'}}>
          <Form.Item style={{float: 'right'}}>
            <Button type="primary" style={{marginLeft: '10px'}} onClick={handleSearch}>
              查询
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>

js方面代码

// 初始化的一些变量
const [form] = Form.useForm();
const [dateObj, setDateObj] = useState<{}>({});
const [dateFormat, setDateFormat] = useState('YYYY/MM/DD');
const [str, setStr] = useState<string>('');

// 点击查询提交表单
  const handleSearch = () => {
    form.submit();
  }
  
  // 表单提交的方法
  const onFinish = (value: SearchFormParams) => {
    // value是表单内的值，dateObj是开始日期和结束日期
    //setParamsData()是搜索的方法
    setParamsData({...value, ...dateObj });
    actionRef.current.reload();
  }
  
  // 当直接选择rangePicker的时候直接修改开始结束日期就完了
const onChange = (dates, dateStrings) =>{
    setDateObj({
      startDate: dateStrings[0].replace(/-/g, "/"),
      endDate: dateStrings[1].replace(/-/g, "/")
    })
  }

// 设置禁选范围
  const disabledDate = (current)=>{
    return current < moment(new Date(str)) || current > moment().endOf('day')
  }

  // 如果是选择年月周日什么的的方法
  const chengSelect = (e)=>{
    let date = new Date();
    let Y = date.getFullYear();
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    switch(e.target.value){
      case 'day':
        setStr(`${Y}/${M}/${D}`);
        form.setFieldsValue({ orderData: [moment(`${Y}/${M}/${D}`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)]});
        setDateObj({
          startDate: `${Y}/${M}/${D}`,
          endDate: `${Y}/${M}/${D}`
        })
        break;
      case 'week':
        let dateWeek = date.getDay();
        if (dateWeek > 0 && dateWeek <6){
          setStr(`${Y}/${M}/${D - dateWeek + 1}`);
          form.setFieldsValue({ orderData: [moment(`${Y}/${M}/${D - dateWeek + 1}`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)] });
          setDateObj({
            startDate: `${Y}/${M}/${D - dateWeek + 1}`,
            endDate: `${Y}/${M}/${D}`
          })
        } else if(dateWeek == 0) {
          setStr(`${Y}/${M}/${D - 6}`);
          form.setFieldsValue({ orderData: [moment(`${Y}/${M}/${D - 6}`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)] });
          setDateObj({
            startDate: `${ Y } / ${ M } / ${ D - 6}`,
            endDate: `${Y}/${M}/${D}`
          })
        } else if (dateWeek == 6) {
          setStr(`${Y}/${M}/${D - 5}`);
          form.setFieldsValue({ orderData: [moment(`${Y}/${M}/${D - 5}`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)] });
          setDateObj({
            startDate: `${Y}/${M}/${D - 5}`,
            endDate: `${Y}/${M}/${D}`
          })
        }
        break;
      case 'month':
        setStr(`${Y}/${M}/01`);
        form.setFieldsValue({ orderData: [moment(`${Y}/${M}/01`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)] });
        setDateObj({
          startDate: `${Y}/${M}/01`,
          endDate: `${Y}/${M}/${D}`
        })
        break;
      case 'year':
        setStr(`${Y}/01/01`);
        form.setFieldsValue({ orderData: [moment(`${Y}/01/01`, dateFormat), moment(`${Y}/${M}/${D}`, dateFormat)] });
        setDateObj({
          startDate: `${Y}/01/01`,
          endDate: `${Y}/${M}/${D}`
        })
        break;
      default:
        setStr(``);
        form.setFieldsValue({ orderData: ['', '']});
        setDateObj({
          startDate: ``,
          endDate: ``
        })
        break;
    }

以上就是扩展的全部代码了，如果对你有所帮助，那是最好的。