el-date-picker 限制开始时间和结束时间

el-date-picker 限制开始时间和结束时间

需求:el-date-picker 月份限制开始时间和结束时间

开始时间:202307

结束时间:202407

代码实现

vue 页面

javascript 复制代码
  <el-form-item label="月份" prop="monthList">
          <el-date-picker v-model="allForm.monthList" type="monthrange" range-separator="至" start-placeholder="开始月份"
            end-placeholder="结束月份" value-format="yyyy-MM" :picker-options="pickerOptions">
          </el-date-picker>
   </el-form-item>

script

javascript 复制代码
<script>
export default {
 data() {
    return {
      allForm: {},
      allRules: {
        monthList: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          const now = new Date()
          const year = now.getFullYear()
          const month = now.getMonth()

          // 去年当前月份的前一个月
          const startYear = year - 1
          const startMonth = month === 0 ? 11 : month - 1
          const startDate = new Date(startYear, startMonth, 1)

          // 当前月份的前一月
          const endYear = year
          const endMonth = month === 0 ? 11 : month - 1
          const endDate = new Date(endYear, endMonth, 1)

          return (
            time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime()
          )
        }
      }
      
    }
  }
}
</script>

效果图

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君018 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色10 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅11 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试