antd Form表单getFieldDecorator中设置RangePicker的默认时间

最新推荐文章于 2023-10-16 15:51:38 发布

原创最新推荐文章于 2023-10-16 15:51:38 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#antd #RangePicker #defaultValue #Form

antd 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了在antd的时间选择器RangePicker中设置默认值的方法。普通情况下可用defaultValue，但在Form表单中，需使用getFieldDecorator的initialValue属性，并给出了核心代码示例。

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

在antd中的时间选择器RangePicker中，使用defaultValue来设置默认值。如下所示：

    <RangePicker
      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
      format={dateFormat}
    />

但如果RangePicker在Form表单中，使用defaultValue就不行了。而应该要使用getFieldDecorator 中的一个initialValue属性。代码如下：

        <Form.Item {...formItemLayout} label="时间范围">
          {getFieldDecorator('timeRange', {
            rules: [
              {
                required: true,
                message: '请选择时间范围',
              },
            ],
            initialValue: [ // 核心代码
              moment(‘2019/07/15’, dateFormat),
              moment(‘2019/07/16’, dateFormat),
            ],
          })(
            <RangePicker
              format={dateFormat}
              onChange={e => {
                this.rangePickerChange(e);
              }}
            />
          )}
        </Form.Item>

核心代码：

initialValue: [ // 核心代码
moment(‘2019/07/15’, dateFormat),
moment(‘2019/07/16’, dateFormat),
],