DatePicker日期选择器的使用（先选择年份或月份，再选择日期，日期在当前年或月之外的置灰显示）

一、基本使用

效果展示：

 代码如下：

<el-date-picker v-model="listQuery.times" type="daterange" range-separator="-" start-placeholder="开始日期" unlink-panels
    end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>

代码解释：

1、type:显示类型。值有year/month/date/dates/week/datetime/datetimerange/daterange/monthrange。type="date"表示选择日，type="week"表示选择周，type="month"表示选择月，type="year"表示选择年，type="dates"表示选择多个日期，type="daterange"表示日期范围，type="monthrange"表示月份范围，

2、value-format：指定绑定值的格式。不指定则绑定值为 Date 对象。

3、unlink-panels：在范围选择器里取消两个日期面板之间的联动

由于日期范围涉及两个值，所以绑定一个数组；

data() {
    return {
        listQuery: {
            times: [],
        }
    }
},

 el-date-picker的size属性的值有mini和small，默认为small

二、日期选择器（先选中月份再选择日期，月份设置当前月份之后置灰，日期设置当前月之前和之后的时间禁止选择）

逻辑：先选择月份，再选择日期，选择日期时，当前选择的月份范围内的日期才可以被选中，之前和之后的置灰显示

先筛选月份

 再选择日期

代码：

template

<el-form-item label="筛选月份:">
        <el-date-picker
            v-model="listQuery.queryDate"
            format="YYYY年MM月"
            value-format="YYYYMM"
            type="month"
            :disabledDate="disabledDate"
            :clearable="false"
            placeholder="选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="上传时间：">
        <el-date-picker
            v-model="updateDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            clearable
            :disabledDate="disabledDate2"
        />
      </el-form-item>

数据模型

data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        startDate: null,
        endDate: null,
        queryDate: parseTime(new Date(), '{y}{m}'), // 给一个默认值
      },
      updateDate: [],
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    }

disabledDate的作用是，大于当前时间的月份置灰。

如果是默认年月日，则为queryDate: parseTime(new Date(), '{y}-{m}-{d}')

监听器：当月份变化时，上传时间置空

watch:{
    'listQuery.queryDate':function (){
        this.updateDate = []
    }
  },

methods

methods: {
    disabledDate2(time) {
      debugger
      let formatStr = '{y}-{m}-{d}'
      let formatStr2 = formatStr.substring(0, formatStr.length - 4)
      let startDate = this.listQuery.queryDate
      startDate = insertStr(startDate, 4, '-')
      let lastDay = getLastDay2(startDate);
      let endDate = parseTime(lastDay, formatStr2)
      let nowDate = parseTime(getLastDay(), formatStr2)
      let isNowDate = time.getTime() > Date.now()
      if (endDate !== nowDate) {
        isNowDate = time.getTime() > lastDay.getTime();
      }
      return parseTime(time, formatStr) < parseTime(getFirstDay2(startDate, true), formatStr) || isNowDate
    },
    getList() {
      if(this.updateDate && this.updateDate.length == 2){
        this.listQuery.startDate = this.updateDate[0]
        this.listQuery.endDate = this.updateDate[1]
      }
      this.tableLoading = true;
      getOutstoreLogList(this.listQuery).then(res => {
        this.outstoreLogList = res.data;
        this.total = res.total;
      }).finally(() => {
        this.tableLoading = false;
      })
    },
}

disabledDate2方法解析如下：该方法的作用是将该月范围之外的日期置灰显示。

      disabledDate2(time) {
        let formatStr = '{y}-{m}-{d}' // 年月日格式
        debugger
        let formatStr2 = formatStr.substring(0, formatStr.length - 4) // 年月格式
        let startDate = this.listQuery.queryDate // 202208
        startDate = insertStr(startDate, 4, '-') // 年和月中间插入-,即2022-08
        let lastDay = getLastDay2(startDate); // 得到改月最后一天，即2022-08-31
        let endDate = parseTime(lastDay, formatStr2) // 将最后一天格式化为年和月
        let nowDate = parseTime(getLastDay(), formatStr2) // 当前月份，即2022-08
        let isNowDate = time.getTime() > Date.now()
        if (endDate !== nowDate) { // 如果月份不等，那么将大于最后一天的时间设置为禁用
          isNowDate = time.getTime() > lastDay.getTime();
        }
        // 将小于这个月第一天的时间设置为禁用
        let firstday = parseTime(getFirstDay2(startDate, true), formatStr) // 2022-08-01
        return parseTime(time, formatStr) < firstday || isNowDate
      },

disabledDate2中用到的方法在index.js中，如下：

//获取指定月第一天
export function getFirstDay(date) {
    if (!date) {
        date = new Date()
    }
    date.setDate(1);
    return date
}
//获取指定月第一天
export function getFirstDay2(dateStr) {
    return getFirstDay(new Date(dateStr))
}
//获取指定最后一天
export function getLastDay(date){
    if (!date) {
        date = new Date()
    }
    date = new Date(date.getFullYear(), date.getMonth() + 1, 0)
    return date
}
//获取指定最后一天
export function getLastDay2(dateStr){
    return getLastDay(new Date(dateStr))
}

/**
 * 在字符串指定位置插入字符串
 * souece 原字符串 start 要截取的位置 newStr 要插入的字符
 */
export function insertStr(source, start, newStr) {
    return source.slice(0, start) + newStr + source.slice(start)
}

引入：

import {parseTime, getFirstDay2, insertStr, getLastDay, getLastDay2} from '@/utils/index'

三、日期选择器（先选中年份再选择日期，年份设置当前年份之后置灰，日期设置当前年之前和之后的日期禁止选择）

逻辑：逻辑：先选择年份，再选择日期，选择日期时，当前选择的年份范围内的日期才可以被选中，之前和之后的置灰显示。

先筛选年份

再选择日期

代码：

template

<el-form-item label="筛选年份:">
        <el-date-picker
            v-model="listQuery.year"
            format="YYYY年"
            value-format="YYYY"
            type="year"
            :disabledDate="disabledDate"
            :clearable="false"
            placeholder="选择年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="出库时间：">
        <el-date-picker
            v-model="outstoreDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            clearable
            :disabledDate="disabledDate2"
        />
      </el-form-item>

数据模型

data() {
      return {
        listQuery: {
          page: 1,
          limit: 10,
          startDate: null,
          endDate: null,
          year: parseTime(new Date(), '{y}'),
        },
        outstoreDate: [],
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }
    },

监听器

watch:{
      'listQuery.year':function (){
        this.outstoreDate = []
      }
    },

方法：

methods: {
      disabledDate2(time) { // 逻辑:先获取年份，再得到当年最后一天和当年第一天
        let formatStr = '{y}-{m}-{d}' // 年月日格式
        let year = this.listQuery.year
        var firstDay = new Date(year);
        firstDay.setDate(1);
        firstDay.setMonth(0);
        var lastDay = new Date(new Date(year).getFullYear() + 1,new Date(year).getMonth() - 1,0)
        return (parseTime(time, formatStr) < parseTime(firstDay, formatStr)) || (parseTime(time, formatStr) > parseTime(lastDay, formatStr))
      },
      getList() {
        if(this.outstoreDate && this.outstoreDate.length == 2){
          this.listQuery.startDate = this.outstoreDate[0]
          this.listQuery.endDate = this.outstoreDate[1]
        }
        this.tableLoading = true;
        getList(this.listQuery).then(res => {
          this.sliceList = res.data;
          this.total = res.total;
        }).finally(() => {
          this.tableLoading = false;

        })
      },
}

引入parseTime方法

import { parseTime } from '@/utils/index'

parseTime方法如下：

export function parseTime(time, cFormat) {
    if (arguments.length === 0) {
        return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if (('' + time).length === 10) time = parseInt(time) * 1000
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

三、日期选择器（将年月分开）

<el-form-item label="筛选年份:">
        <el-date-picker
          v-model="listQuery.year"
          format="yyyy年"
          value-format="yyyy"
          type="year"
          :clearable="false"
          :picker-options="{disabledDate}"
          placeholder="选择年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发运月份:">
        <el-date-picker
          v-model="listQuery.deliverMonth"
          popper-class="monthStyle"
          type="month"
          format="MM月"
          value-format="MM"
          placeholder="选择月"/>
      </el-form-item>

disabledDate

methods: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
}

popper-class=“monthStyle”用来复写样式，通过css将上半部分的header隐藏掉
在App.vue中style写样式

<style lang="scss">
.monthStyle{
  .el-date-picker__header--bordered {
    display: none !important;
  }
}
</style>

效果如下：

选择年份

选择月份

请求后台时将年份和月份拼接再访问后台

this.listQuery.deliverDate = this.listQuery.year + (this.listQuery.deliverMonth == null ? "" : this.listQuery.deliverMonth),