修改ant-design-vue a-date-picker标签提交的数据格式

受累的大忽悠
888 阅读2分钟

结论

a-date-picker 标签有个 valueFormat属性可以用来设置提交的数据格式

<a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="item.scheduled_end_time" />

image.png

背景

最近在自己尝试写个系统，然后接触了些前端。有个表单页面会让用户选择时间，然后我用来a-date-picker 标签，但不知道为什么，提交的数据一直是默认的格式，我后端期望的是YYYY-MM-DD HH:mm:ss格式，之后就有了本次记录

过程

起始

一开始，我想修改a-date-picker的提交格式，通过官网，发现format（也百度啥的了，好像都是用的这个，可能是我搜索的方式不对，他们格式化的都是前台），以为这个格式化是一个所有的格式化，也看了[官网](日期选择框 DatePicker - Ant Design Vue (antdv.com))的样例

image.png

image.png

于是，我写了，发现没用，然后我就写了下面的一个方法，通过函数的方式处理提交数据

              <a-config-provider :locale="locale">
                <a-date-picker :format="dateFormat"  v-model:value="item.scheduled_end_time" @change="(value)=>handleDateChange(value, index)" />
              </a-config-provider>

      const dateFormat = 'YYYY-MM-DD HH:mm:ss';
      const formSubItems = ref([{order:1, file_name: '', contributor_id: 0, scheduled_end_time:""}]);
      function handleDateChange(value, index) {
        // 首先确保 value 是有效的
        let dayjsDate = dayjs(value);
        if (!dayjsDate.isValid()) {
          console.error('Invalid date');
          return;
        }
        formSubItems.value[index].scheduled_end_time = dayjsDate.format(dateFormat)
        
      }

当时方向可以用了

变化

当我写完这个处理函数后，在我mac电脑上没有出现任何问题，但在我windows 上跑的时候，出现 date.locale is not a function错误（当时我有点懵）， 到现在我也不知道为啥mac电脑上可以，windows 上不行。但报这个错的原因是我处理函数返回的是一个字符串，切换成时间格式就可以，可惜，切换成时间格式相当于啥都没改，提交的格式还是默认的

image.png

结束

后面我查了很多地方，也没有得出个结果，有说时区，有的换成了moment库（结论没用），绕来绕去，我又去翻官网，找到了一行

image.png 死马当活马医，就试试，发现好了，也不用啥函数了

<a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="item.scheduled_end_time" />

总结

a-date-picker 标签的 format属性修改的是前台的展示， valueFormat属性是修改的提交数据的格式 总的说还是没经验

avatar
文章
阅读
粉丝