DatePicker 日期选择器

日期选择器基本用法可参照官网的案例，这里记录一下精确到日的一个需求的相关实现。
需求说明：设置一个日期范围选择功能，默认显示近一个月的用户数据，不能选择当天。
需要注意的点：虽然显示的是某一天，但是我们需要注意一种情况，举个例子：默认显示的是近一个月的用户数据，以今天2020.7.21为例，日期范围选择器上显示的就是2020.6.20~2020.7.20，页面上显示的数据是否包含6.20和7.20的数据呢？以用户的角度来说，应该是包含的，那么我们在向后端请求数据的时候，就需要将开始日期和结束日期的具体时间作为参数传递过去。

具体实现：

• 默认显示近一个月的日期范围

<template>
  <div class="block">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      >
    </el-date-picker>
  </div>
</template>

<script>
const now = new Date()
const start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate() - 1).getTime()
const end = now.getTime() - 3600 * 1000 * 24

  export default {
    data() {
      return {
        dateRange: [start, end]
      };
    }
  };
</script>

实现效果：

• 不能选择当天及以后的时间

<template>
  <div class="block">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"   // 自定义时间选择选项
      >
    </el-date-picker>
  </div>
</template>

<script>
const now = new Date()
const start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate() - 1).getTime()
const end = now.getTime() - 3600 * 1000 * 24

  export default {
    data() {
      return {
        dateRange: [start, end]
      }
    },
    methods: {
    	pickerOptions() {
			disabledDate(time) {
				return time.getTime() > Date.now() - 24 * 3600 * 1000
			}
		}
    }
  };
</script>

实现效果：

• 指定起始日期和结束日期的显示时刻

<template>
  <div class="block">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :picker-options="pickerOptions"     
      >
    </el-date-picker>
  </div>
</template>

<script>
const now = new Date()
const start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate() - 1).getTime()
const end = now.getTime() - 3600 * 1000 * 24

  export default {
    data() {
      return {
        dateRange: [start, end]
      }
    },
    methods: {
    	pickerOptions() {
			disabledDate(time) {
				return time.getTime() > Date.now() - 24 * 3600 * 1000
			}
		}
    }
  };
</script>