#VUE#element 日期选择器 date-picker 默认当月1号到当天

需求：

一进入页面就显示当月1号到当天的日期

（以及快捷选择最近一周及最近一个月）

效果：

 

 思路/步骤：

1、使用element的DatePicker 日期选择器

<template>
  <div>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

2、声明一个数组value2:[ ]，与DatePicker进行绑定 v-model="value2"

data () {
        return {
            value2:[],
        }
    },

3、在methods里面，写事件，获取开始时间与结束时间

methods: {
  getInitializeDate () {
     let date = new Date()//获取新的时间
     //获取当前年份,并且转为字符串
     let year = date.getFullYear().toString()
     //获取当前月份，因为月份是要从0开始，此处要加1，
    //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
     let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
     //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
     let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
     //字符串拼接，将开始时间和结束时间进行拼接
     let start = year + '-' + month + '-01'    //当月第一天
     let end = year + '-' + month + '-' + day  //当天
     this.value2 = [start, end] //将值设置给组件DatePicker 绑定的数据
   },
}

补充的小知识：

let myDate = new Date();
myDate.getYear();                //获取当前年份(2位)
myDate.getFullYear();            //获取完整的年份(4位,1970-????)
myDate.getMonth();               //获取当前月份(0-11,0代表1月)
myDate.getDate();                //获取当前日(1-31)
myDate.getDay();                 //获取当前星期X(0-6,0代表星期天)
myDate.getTime();                //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();               //获取当前小时数(0-23)
myDate.getMinutes();             //获取当前分钟数(0-59)
myDate.getSeconds();             //获取当前秒数(0-59)
myDate.getMilliseconds();        //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

4、在created生命周期进行调用此方法：

   created() {
        this.getInitializeDate();//获取当月默认日期（当月1号到当天）
    }

5、快捷设置【最近一周】以及【最近一个月】

data () {
        return {
            value2:[],
            pickerOptions: {
            shortcuts: [{
            text: '最近一周',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
            }
          }]
        },
        }
    },