element-ui的时间组件datetimepicker使用format,value-format格式化时间,格式化为本地时间

element-ui里面的时间样式有三种TimePicker,DatePicker,dateTimePicker
但在使用的时候去发现设置了format格式却会被转为utc时间,这样就造成的数据的偏差
对比才发面这三个组件都有一样的参数

<!--timePicker-->
	<el-time-picker
    v-model="value1"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>

<!--datePicker-->
	<el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

<!--dateTimePicker-->
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>

在引用上有稍微的区别,timePicke在组件上完全不一样,datePicke和dateTimePicker是通过type区分,
它们都有一样的设置样式的参数format

format	时间格式化(TimePicker)	string	小时:HH,分:mm,秒:ss,AM/PM A	'HH:mm:ss'

value-format	可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式

细看文档发现 value-format 可选,仅TimePicker时可用,绑定值的格式,我用的是dateTimePicker开始的时候只设置format格式,发现日期会变成utc时间,后来改用value-format设置,数据就是页面选择的时间格式了,看来是只要是有timePicker的都应该使用value-format格式来设置

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值