el-date-picker的时间段限制(只允许选择当月的最后一天和下月的第一天)

本文链接：https://blog.youkuaiyun.com/weixin_44553861/article/details/114628836

缘起

公司的需求，要求选择的时间点必须是本月最后一天和下个月的第一天，用的是elementui的data-picker组件,所以只要加个限制就可，具体效果如下：
在这里插入图片描述

具体实现代码

<el-col :span="23">
	<el-form-item label="时间点" prop="timePoint" :rules="rulesChild.timePoint" style="padding-right: 12px;">
		<el-date-picker 
			v-model="ruleFormChild.timePoint"
            class="timechange"
            type="datetime"
            placeholder="选择时间点"
            value-format="yyyy-MM-dd HH:mm:ss"
            @focus="disDate"
            @change="getLastData"
            :picker-options="pickerOptions"
			style="width: 53%;padding-left: 7px">
		</el-date-picker>
    </el-form-item>
</el-col>

export default {
  data () {
    return {
      value: {},
      pickerOptions: {}
    }
  },
  mounted () {
  	// 页面初始化时配置 pickerOptions
  	this.disabledDate()
  },
  methods: {
  	//限制日期
    disDate() {
    	// 当前日期
        let now = new Date();
        //本月结束时间
        let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        let timeEnd = Date.parse(monthEndDate);
        this.pickerOptions.disabledDate = time => (time.getTime() < timeEnd) || (time.getTime() > timeEnd + 60 * 60 * 1000 * 24)
    },
  }  
}