因为按照有按年限制的也有要按照几个月份限制的，所以小编将这些封装了一个工具类

let demoFormatUtil = {};
 * 时间日期处理：根据传入日期：返回之前的几年，几月，几日的日期：返回格式：“YY-MM-DD”
 * @param date 时间new Date()或者“2020-03-24”
 * @param dateType Y：年，M：月，D：日
 * @param dateNum 几年，几月，几天
demoFormatUtil.transformationDate = function(date, dateType, dateNum) {
  let retrueDate;
  let dateValue = new Date(Date.parse(date));
  /*返回前几年*/
  if (dateType === "year") {
    dateValue.setFullYear(dateValue.getFullYear() - dateNum);
  /*返回前几月*/
  if (dateType === "month") {
    dateValue.setMonth(dateValue.getMonth() - dateNum);
  /*返回前几天*/
  if (dateType === "day") {
    dateValue.setDate(dateValue.getDate() - dateNum);
  let yy = dateValue.getFullYear();
  let mm = dateValue.getMonth() + 1; //因为getMonth（）返回值是 0（一月） 到 11（十二月） 之间的一个整数。所以要给其加1
  let dd = dateValue.getDate();
  if (mm < 10) {
    mm = "0" + mm;
  if (dd < 10) {
    dd = "0" + dd;
  retrueDate = yy + "-" + mm + "-" + dd;
  return retrueDate;
 * 日历控件，配置时间限制
 * @type {{oneDayBefore: (function(*): boolean), todayDayBefore: (function(*): boolean)}}
demoFormatUtil.pickerOptions = {
   * 限制选择今天之前日期（包括今天）
   * @param time
   * @returns {boolean}
  todayDay: {
    disabledDate: function(time) {
      return time.getTime() > Date.now();
   * 限制选择今天之前日期（不包括今天）
   * @param time
   * @returns {boolean}
  todayDayBefore: {
    disabledDate: function(time) {
      return time.getTime() > Date.now() - 1 * 8.64e7;
   * 限制选择近1年的日期（去年的本月1日到今天）
   * @param time
   * @returns {boolean}
  oneYear: {
    disabledDate: function(time) {
      if (new Date(time).getTime() > new Date().getTime()) {
        return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
      } else {
        // 判断年 导历史按月
        let y = new Date().getFullYear() - 1;
        let isLeap = (0 === y % 4




    
 && 0 === y % 100) || 0 === y % 400;
        let days = isLeap ? 366 : 365;
        let monthDayNum = new Date().getDate() + 1;
        return time.getTime() < Date.now() - (days + monthDayNum) * 8.64e7;
   * 限制选择查询历史1年前数据
   * @param time
   * @returns {boolean}
  oneYearBefore: {
    disabledDate: function(time) {
      if (new Date(time).getTime() > new Date().getTime()) {
        return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
      } else {
        let y = new Date().getFullYear() - 1;
        let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
        let days = isLeap ? 366 : 365;
        let monthDayNum = new Date().getDate() + 1;
        return time.getTime() > Date.now() - (days + monthDayNum) * 8.64e7;
export default demoFormatUtil;
因为按照有按年限制的也有要按照几个月份限制的，所以小编将这些封装了一个工具类
 
<template>
    <!--vue 时间选择控件测试-->
    <div class="hello">
            选中的日期：{{startDate}}到{{endDate}}
        </div>
            时间范围：
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="D"
                近一年</el-radio
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="H"
                历史</el-radio
        </div>
                操作时间：<el-date-picker
                    v-model="dataPickerData.datePickerSpace"
                    type="daterange"
                    unlink-panels
                    :default-value="dataPickerData.limitDatePickerSpace"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="
                    end-placeholder="结束日期"
                    :picker-options="
                historyFlag === 'D'
                  ? dataPickerData.limitCurrentTime
                  : dataPickerData.limitHistoryTime
            </el-date-picker>
            </div>
        </div>
    </div>
</template>
<script>
import formatUtil from "./formatUtil";
export default {
  name: 'DatePickerDemo',
  data () {
    return {
      startDate: "",
      endDate: "",
      // 历史选择变量
      historyFlag: "D",
      // 为了区分点击时候没有查询就导出，导致导出历史记录混乱的三方变量
      isSearchHistory: "D",
      dataPickerData: {
        // 日期时间选择数组【开始时间，结束时间】
        datePickerSpace: null,
        // 日期选择数组空间可选范围控制
        limitDatePickerSpace: null,
        limitCurrentTime: formatUtil.pickerOptions.oneYear,
        limitHistoryTime: formatUtil.pickerOptions.oneYearBefore
  methods: {
    /*当前历史的切换方法： 切换默认可选时间范围
     * 例如： 1个月前
    changeHistory() {
      this.dataPickerData.datePickerSpace = null;
      this.dataPickerData.limitDatePickerSpace = null;
      let end = null;
      let start = null;
      if (this.historyFlag === "H") {
        end = formatUtil.transformationDate(new Date(), "year", 1);
        start = formatUtil.transformationDate(end, "year", 1);
      } else {
        end = formatUtil.transformationDate(
          formatUtil.dateFormat(new Date(), "yyyy-MM-dd")
        start = formatUtil.transformationDate(new Date(), "year", 1);
      this.dataPickerData.limitDatePickerSpace = [start, end];
  watch: {
    // 查询条件时间处理：将时间数组拆分并放入查询条件中
    "dataPickerData.datePickerSpace": function(val) {
      if (val && val.length > 0) {
        this.startDate = val[0];
        this.endDate = val[1];
      } else {
        this.startDate = null;
        this.endDate = null;
</script>
                    限制一年和一年之前因为业务要求，是按照月份导历史，所以我的查询条件是从 2020-05-18一直追到2019年五月一号&lt;template&gt;    &lt;!--vue 时间选择控件测试--&gt;    &lt;div class="hello"&gt;        &lt;div&gt;            选中的日期：{{startDate}}到{{endDate}}        &lt;/div&gt;        &lt;div&gt;            时