vue element ui里的日期时间选择器 中国标准时间转化为年月日时分秒

<el-date-picker
     end-placeholder="结束日期"
     range-separator="至"
     start-placeholder="开始日期"
     type="datetimerange"
     v-model="value1"
     :default-time="['00:00:00', '23:59:59']"
     >
</el-date-picker>

上面代码效果图

element ui上的日期时间选择器里面的时间为中国标准时间,选择时间,打印出来为下图

但一般后台需要的是年月日时分秒,需要我们进行处理

data(){
    return{
      beginTime: null,
      endTime: null,
    }
}

methods:{
  filterTime(time) {
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
      },
}
//点击查询按钮
searchTableData(){
if(this.value1 != null){//如果不选择时间,或者选择时间再将时间清除,直接点击查询,会报错,所以要判断一下,这个为时间不为空走这个。
    this.beginTime = this.filterTime(this.value1[0]),
    this.endTime = this.filterTime(this.value1[1])
  }else {//判断选择时间再将时间清除
     this.beginTime = null
     this.endTime = null
        }
this.getTableData();//调用表格接口

}

补充——————————————————————————————————

element ui上面有个属性format显示输入框里面的格式。

<el-date-picker
     end-placeholder="结束日期"
     range-separator="至"
     start-placeholder="开始日期"
     type="datetimerange"
     v-model="value1"
     :default-time="['00:00:00', '23:59:59']"
     value-format="yyyy-MM-dd HH:mm:ss"
     >
</el-date-picker>

重点:value-format="yyyy-MM-dd HH:mm:ss",写上这句代码就不用处理年月日时分秒了,返回的就是我们需要的格式。

  • 5
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿wei程序媛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值