antd RangePicker组件设置默认值

本文介绍如何在使用React和Ant Design时,为RangePicker组件设置默认值和实现特定范围的选择限制。通过自定义代码,当选择特定选项时,RangePicker将自动限制在指定范围内,并设置默认值为该范围的起始和结束日期。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

公司在用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;
    }

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

<think>好的,我需要回答用户关于AntDesign(antd)时间尺度组件的使用方法和示例的问题。首先,我需要确认用户所说的“时间尺度组件”具体指哪个组件。根据antd的文档,可能是指时间选择器(TimePicker)、日期选择器(DatePicker)、范围选择器(RangePicker)或者时间轴(Timeline)等组件。用户提到的是“时间尺度”,可能涉及时间范围的选取或展示,所以更可能是指TimePicker、DatePicker或RangePicker。接下来,我需要查阅antd的官方文档来确认这些组件的正确用法。根据记忆,DatePicker和TimePicker是常用的时间选择组件RangePicker用于选择日期范围。此外,时间轴(Timeline)用于展示时间顺序的事件,可能不符合用户的需求。因此,用户可能需要的是如何选择时间或日期范围的组件。然后,我需要生成示例代码,展示这些组件的基本使用。例如,DatePicker的基本用法,TimePicker的选择时间,以及RangePicker选择日期范围。同时,需要确保代码语法正确,并符合用户的问题中的要求,如使用中文回答,行内公式用$...$,独立公式用$$...$$,但这里可能不涉及数学公式,所以可能不需要处理这部分。另外,用户的问题中引用了站内引用,但内容似乎与antd无关,因此可能需要忽略这些引用,专注于提供正确的antd组件信息。需要确保回答结构清晰,分步骤说明使用方法,并提供代码示例。最后,生成相关问题,例如如何自定义格式、处理时区问题或验证时间输入等,这些是用户可能进一步关心的问题。需要确保问题相关且有助于用户深入学习antd的时间组件。</think>### Ant Design时间选择组件使用指南 Ant Design(antd)中与时间选择相关的主要组件包括`TimePicker`、`DatePicker`和`RangePicker`,以下是具体使用方法: --- #### 一、基础时间选择(TimePicker) ```jsx import { TimePicker } from 'antd'; import moment from 'moment'; function Demo() { return ( <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} format="HH:mm" onChange={(time, timeString) => console.log(timeString)} /> ); } ``` * 支持设置默认值`defaultValue` * `format`参数控制显示格式(如`HH:mm:ss`) * `onChange`回调返回moment对象和时间字符串 --- #### 二、日期范围选择(RangePicker) ```jsx import { DatePicker } from 'antd'; const { RangePicker } = DatePicker; function Demo() { return ( <RangePicker showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" onChange={(dates, dateStrings) => console.log(dateStrings)} /> ); } ``` * 支持同时选择日期和时间 * `showTime`配置时间选择面板 * `disabledDate`可设置禁用日期 --- #### 三、自定义时间刻度 通过`TimePicker`的`hourStep`/`minuteStep`控制粒度: ```jsx <TimePicker minuteStep={15} secondStep={10} format="HH:mm:ss" /> ``` 该示例将: 1. 分钟选择间隔15分钟 2. 秒钟选择间隔10秒 3. 显示秒级精度 --- #### 四、禁用时间范围 ```jsx <TimePicker disabledHours={() => [0, 1, 2]} disabledMinutes={(selectedHour) => selectedHour === 9 ? [30, 31, 45] : [] } /> ``` * 禁用凌晨0-2点 * 当选择9点时禁用30、31、45分 --- #### 五、结合Form表单使用 ```jsx import { Form, DatePicker } from 'antd'; <Form.Item label="项目周期" name="projectPeriod" rules={[{ required: true }]} > <RangePicker showTime /> </Form.Item> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值