iview Datepicker日期时间选择器,设置结束时间比开始时间多23:59:59

啰啰嗦嗦的序言:
vue iview项目,PC内管系统,搜索条件有开始结束两个时间输入框,有默认值,结束时间比开始时间多差不多24小时

效果:
在这里插入图片描述

<template>
   <Form :model='formInLine' :label-width='90' inline>
      <FormItem label='开始时间'>
         <DatePicker type='datetime' v-model='formInLine.startTime'  style='width: 160px' clearable></DatePicker>
      </FormItem>
      <FormItem label='结束时间'>
         <DatePicker type='datetime' v-model='formInLine.endTime'  style='width: 160px' clearable></DatePicker>
      </FormItem>
   </Form>
</template>

<script>
  export default {
    name: 'addFriends',
    data () {
      return {
         formInLine: {
           startTime: '',
           endTime: '',
         }
      }
    },
    mounted () {
      let startTime = new Date().toLocaleDateString();
      this.formInLine.startTime = this.formateDateTime(new Date(startTime).getTime())
      
      let endTime = (new Date(startTime).getTime()) + 86399999; // 默认比开始时间多一天
      this.formInLine.startTime = this.formateDateTime(endTime)
    },
    methods: {
       formateDateTime (time) {
         if (time == '' || !time) {
            return "";
         }
         let date = new Date(time);
         let Y = date.getFullYear();
         let M = date.getMonth() + 1;
         let D = date.getDate();
         let h = date.getHours();
         let m = date.getMinutes();
         let s = date.getSeconds();
         
         M = M < 10 ? ('0' + M) : M;
         D = D < 10 ? ('0' + D) : D;
         h = h < 10 ? ('0' + h) : h;
         m = m < 10 ? ('0' + m) : m;
         s = s < 10 ? ('0' + s) : s;
         
         return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s 
       }
    }
    
  }
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值