[JavaScript知识库]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>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖