Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差

简介: Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差

这个格式只作用在了前端日期显示上,并没有改变传回后端的数据格式。

经历

这是一个日期选择器

1.<a-range-picker
        style="width: 400px"
        v-model:value="shijian"
        :ranges="ranges"  //预设时间范围快捷选择,会在左边出现小蓝框
        :disabled-date="disabledDate"  //不可选择的日期
        :disabled-time="disabledRangeTime"  //不可选择的时间
        :show-time="{  //增加时间选择功能
          hideDisabledOptions: true,  //隐藏禁止选择的选项
          defaultValue: [  //默认时间
            moment('00:00:00', 'HH:mm:ss'),
            moment('00:00:00', 'HH:mm:ss'),
          ],
        }"
//设置日期格式,为数组时支持多格式匹配,展示以第一个为准,这个格式只作用在了前端日期显示上
        format="YYYY-MM-DD HH:mm:ss"  
        @change="shijianobj"   //时间发生变化的回调
      />

从网上查了好多资料,说是地区的时差导致的,那就应该是把😂,我这相差16小时,导致传给后端的数据不准确

image.png

上面双向绑定的shijian打印出来是这个

image.png

最后终于还是解决了

moment是个js时间格式化的库

const shijianobj = (e) => {
    let a = moment(e[0]._d).format("YYYY-MM-DD HH:mm:ss");
    let b = moment(e[1]._d).format("YYYY-MM-DD HH:mm:ss");
    console.log(a,b);
    };

image.png现在数据就跟前端展示一样了

就可以把上面的时间格式转换成框里的格式 ,然后传给后端就可以了

相关文章
|
1天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
3 0
BIGEMAP地图VUE中引入
|
1天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
6 0
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
7 2
|
7天前
|
JavaScript
|
1天前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
7 1
|
1天前
|
JavaScript
VUE之彩虹点击
VUE之彩虹点击
4 1