el-date-picker：选择日期的限制

本文介绍: element–ui作为vue的龙头ui 组件库，深受前端开发者的喜爱。本文着重记录如何使用 el–date–picker 日期选择器，怎么去限制选择日期。先上官网链接—

&lt;template&gt;
    &lt;div class="content"&gt;
        <el-date-picker v-model="value" type="date" placeholder="选择日期"&gt;
        </el-date-picker&gt;
    </div&gt;
</template&gt;

<script&gt;
export default {
    data() {
        return {
            value: ''
        };
    }
};
</script&gt;

<el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"&gt;</el-date-picker>

data() {
        return {
            value: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            }
        };
   },

const DAY = 10
const nowTimer = Date.now()
const lastTimer = nowTimer + DAY * 24 * 60 * 60 * 1000

pickerOptions: {
    disabledDate(time) {
        return time.getTime() < nowTimer || time.getTime() > lastTimer;
    },
}

 <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

      const date = new Date()
      const year = date.getFullYear(); //获取年份
      let month = date.getMonth() + 1; //获取月份

const startDate = `${year}-${month}-01 00:00:00`

const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
const endDate = `${year}-${month}-${lastDay} 23:59:59`

new Date(startDate).getTime(), new Date(endDate).getTime()

    const getDateRange = () => {
      const date = new Date()
      const year = date.getFullYear(); //获取年份
      let month = date.getMonth() + 1; //获取月份
      const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
      month = month < 10 ? '0' + month : month;
      const startDate = `${year}-${month}-01 00:00:00`
      const endDate = `${year}-${month}-${lastDay} 23:59:59`
      return [new Date(startDate).getTime(), new Date(endDate).getTime()]
    }

pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

import dayjs from "dayjs"

const getDateRange = () => {
    const startTimer = dayjs().startOf('month').valueOf()
    const endTimer = dayjs().endOf('month').valueOf()
    return [startTimer, endTimer]
}

pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

import dayjs from "dayjs"
const isBetween = require('dayjs/plugin/isBetween')
dayjs.extend(isBetween)

const getDateRange = () => {
    const startDate = dayjs().startOf('month').format("YYYY-MM-DD")
    const endDate = dayjs().endOf('month').format("YYYY-MM-DD")
    return [startDate, endDate]
}

disabledDate(time) {
     const [startDate, endDate] = getDateRange()
     const result = dayjs(time).isBetween(startDate, dayjs(endDate), 'day', '[]')
     return !result
},