Antd Vue range-picker 日期初始值设置 与 重置日期踩坑总结

本文讲述了如何在Ant Design Vue的Form表单中使用RangePicker组件,正确设置初始值并实现重置功能,避免了defaultValue带来的问题。作者分享了解决过程和关键代码片段,强调了initialValue在设置表单默认值的重要性。
摘要由CSDN通过智能技术生成

一、业务场景:
1.用form表单包裹,用的是 Antd Vue range-picker链接

2.创建时间初始值设置为当天的 00:00:00-23:59:59:如下截图:
在这里插入图片描述

2.日期选择器如下截图:
在这里插入图片描述

3.一进页面,直接点击重置按钮,没有触发日期选择框的onchage事件,页面的时间选择框要变成如下截图:
在这里插入图片描述

二、附上正确的代码片段:

<a-form class="ant-advanced-search-form" :form="form" @submit="handleSubmit">
  <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="创建时间" :label-col="{span:8}" :wrapper-col="{span:16}">
              <a-range-picker
                v-decorator="['createTime',{
                  initialValue:defaultTime
                }]"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onChangeRangePicker"
              />
            </a-form-item>
          </a-col>
           <a-col :span="6" style="text-align: right">
            <a-button type="info" class="button-right" @click="handleReset">重置</a-button>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-col>
  </a-row>
</a-form>

  data() {
    return {
      createStartTime: moment().format('YYYY-MM-DD' + ' 00:00:00'), // 创建起始时间-筛选框
      createEndTime: moment().format('YYYY-MM-DD' + ' 23:59:59'), // 创建结束时间-筛选框
      }
  },

  computed: {
    defaultTime() {
      if (this.createStartTime === '' || this.createEndTime === '') return []    //
      return [moment(this.createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(this.createEndTime, 'YYYY-MM-DD HH:mm:ss')]
    }
  },


 methods: {
    // 创建时间
    onChangeRangePicker(value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
      this.createStartTime = dateString.slice(0, 1).toString()
      this.createEndTime = dateString.slice(1, 2).toString()
    },
    //重置按钮
   handleReset() {
      this.createStartTime = ''
      this.createEndTime = ''
  }
}

三、踩坑点与解决:
1.刚开始写的Form表单里的日期选择框代码片段:

 <a-form-item label="创建时间" :label-col="{span:8}" :wrapper-col="{span:16}">
              <a-range-picker
                v-decorator="['createTime']"
                :default-value="[moment(createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(createEndTime, 'YYYY-MM-DD HH:mm:ss')]"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onChangeRangePicker"
              </a-select>
            </a-form-item>
//下面在computed计算属性里没有写defaultTime(){}

解析:(1)这里写了default-value,虽然实现了,界面刚进来时候初始,默认日期为当天,但是一进页面,直接点击重置按钮,虽然this.createStartTime = ‘’
this.createEndTime = ‘’,但是日期选择框展示的并没有置空
(2)排查很久,看到Antd Vue Form表单官方连接
在这里插入图片描述
(3)其中有一句特别注意:你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
(4)因此想到摈弃 defaultValue 属性,用initialValue

2.于是有了上述正确的代码片段
(1)在日期选择框写了

 v-decorator="['createTime',{
                  initialValue:defaultTime
                }]"

(2)在computed计算属性了写了如下代码段

  cocmputed: {
    defaultTime() {
    
    //当this.createStartTime === '' || this.createEndTime === '的时候,要return一个空数组
    //此时在moment解析的时候,就在界面上展示为空,否则会解析成 Invalid date(无效的日期)
     if (this.createStartTime === '' || this.createEndTime === '') return []    
     //当起始日期与结束日期不为空的时候,执行如下代码段
      return [moment(this.createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(this.createEndTime, 'YYYY-MM-DD HH:mm:ss')]
    }
  },

四、反思与总结:

  1. Antd Vue :range-picker,date-picker等日期选择框,在form表单里一旦用form包裹。如果要设置初始值,一般不推荐使用defaultValue,推荐使用initialValue。
  2. 刚开始死磕非要用defaultValue,但是未解决,就去了Antd Vue官方文档,将时间选择框和Form表单的 API /官方文字描述挑选重点,看了一遍,最终运用initialValue解决了bug。
  3. 以此也总结了两个点:
    (1)如果用一种思路弄了半个小时到一个小时还是没解决,那就换一种思路解决,不能钻牛角尖。
    (2)在写代码时候,引用了第三方的官方文档,大多数情况下,不要自己硬着头皮想,要学会灵活运用该官方文档封装好的API。
    以上就是我的拙见。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值