VUE element-ui 之时间格式转时区格式

简介: VUE element-ui 之时间格式转时区格式

步骤:
模板:

<el-date-picker
            v-model="createTime"
            type="daterange"
            :clearable="false"
            range-separator="-"
            style="width: 210px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择日期"
            class="filter-items"
            value-format="yyyy-MM-dd"
            :default-time="['00:00:00', '23:59:59']"
            @change="dataChange"
          />

js:

dataChange(val) {
      console.log(`时间格式---`, val)//时间格式--- (2) ['2021-01-01', '2021-01-09', __ob__: Observer]
      const date = new Date((+new Date(val[0]) + 8 * 3600 * 1000)) //new Date() 括号里的加上丢失的8小时
      console.log(`时区格式---`, date.toISOString())//时区格式--- 2021-01-01T00:00:00.000Z
    }

注意:toISOString() 转换日期时,会丢失时区,导致时间少8小时所以转换前new Date(+new Date()+8*3600*1000)处理丢失的8小时。

相关文章
|
2月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
36 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
2月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
144 1
|
2月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
2月前
|
JavaScript
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
72 0
|
14天前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
24 5
|
14天前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
25 1
|
14天前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
13 1
|
15天前
|
前端开发 JavaScript
vue + element-UI 图片压缩canvas【详解】(含完整demo)
vue + element-UI 图片压缩canvas【详解】(含完整demo)
23 1
|
15天前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
32 1
|
5天前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
12 0