DatePicker选择日期后格式变成UTC

最新推荐文章于 2025-03-27 15:18:18 发布

原创最新推荐文章于 2025-03-27 15:18:18 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

74 篇文章

订阅专栏

本文讲解了如何使用DatePicker组件在选择日期后将其格式转换为UTC，并展示了如何通过on-change事件处理返回值，直接将格式化的日期赋值给数据属性，以实现所需的时间显示格式。

需求：DatePicker组件，选择日期后格式变成UTC，例如：选择的日期是2019-03-10，得到的结果却是2019-03-10T16:00:00.000Z，页面显示是Sat Mar 09 2019 00:00:00 GMT+0800 (中国标准时间)
解决方法：用on-change事件的返回值，给绑定的数据赋值。查文档可知道on-change的返回值是已经格式化后的日期，是我们想要的格式，在<template>中$event是on-change的返回值，所以直接用简易写法“birthday=$event”就可以赋值。

<div>
  <DatePicker type="date"
              format="yyyy-MM-dd"
              @on-change="birthday=$event"
              :value="birthday" />
</div>
 
<script>
export default {
  data(){
    return {
      birthday: '2019-03-10'
    }
  }
}
</script>