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现在数据就跟前端展示一样了

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

目录
打赏
0
0
0
0
4
分享
相关文章
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
462 1
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8月前
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
1198 2
Vue3日期选择器(DatePicker)
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
这篇文章介绍了Vue中组件自定义事件的绑定和解绑方法,通过代码实例详细说明了在父子组件间如何传递数据,包括使用`$emit`触发事件、`$on`和`$off`绑定和解绑事件,以及在实际项目中的应用和调试技巧。
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
67 0
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
这篇博客文章讲解了Vue中绑定样式和条件渲染的方法,包括类样式绑定的不同写法、`v-show`和`v-if`的条件渲染区别以及它们的使用场景和特点,并通过代码实例和测试效果来展示具体应用。
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
|
9月前
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
353 0
|
9月前
|
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
321 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等