当前位置: 首页 > news >正文

el-date-picker设置只有某些日期可选

示例图:

<el-date-pickerv-model="topFormObj.upTime"type="date"value-format="timestamp"format="dd/MM/yyyy":picker-options="pickerOptions"
/>

固定限制每周的周末+周三不可选

data() {return {pickerOptions: {disabledDate(time) {// 使用getDay()方法获取星期几return time.getDay() === 6 || time.getDay() === 0 || time.getDay() === 3}}}
}

根据接口返回的日期时间戳设置只有某些日期可选

假设接口返回只有07/10/2024和09/10/2024这两天可以选择,并且返回的时间戳并非0点的。

首先利用new Date(时间戳).setHours(0, 0, 0, 0)方法将时间戳转化为0点的时间戳。

const tt = [new Date(1728440229000).setHours(0, 0, 0, 0), new Date(1728267429000).setHours(0, 0, 0, 0)]data() {return {pickerOptions: {disabledDate(time) {return !tt.includes(time.getTime())}}}
}

限制只能选当月或者以后的月份(包括未来的年份),禁止选过去的月份(包括过去的年份)

<el-date-pickerv-model="topFormObj.upTime"type="month"value-format="timestamp"format="dd/MM/yyyy":picker-options="pickerOptions"
/>
data() {return {pickerOptions: {disabledDate(time) {var now = new Date()now.setHours(0, 0, 0, 0)return time.getTime() < now.getTime()}}}
}

http://www.lryc.cn/news/459924.html

相关文章:

  • java数据库操作-cnblog
  • HCIP-HarmonyOS Application Developer 习题(九)
  • redis集成到spring boot中使用
  • Spring Boot、Spring MVC和Spring有什么区别
  • Flip动画
  • Java通过RAG构建专属知识问答机器人_超详细
  • 2.1 使用点对点信道的数据链路层
  • 台式机来电自启动设置
  • 【最新华为OD机试E卷-支持在线评测】考勤信息(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)
  • netdata保姆级面板介绍
  • 苹果最新论文:LLM只是复杂的模式匹配 而不是真正的逻辑推理
  • Python知识点:基于Python工具,如何使用Scikit-Image进行图像处理与分析
  • MongoDB初学者入门教学:与MySQL的对比理解
  • Oracle AI Vector Search
  • 基于SpringBoot的健身会员管理系统实战分享
  • Elasticsearch高级搜索技术-结构化数据搜索
  • ffmpeg面向对象——类所属的方法探索
  • TensorRT-LLM七日谈 Day3
  • 如何使用Pandas库处理大型数据集?
  • XHR 创建对象
  • # 在执行 rpm 卸载软件使用 nodeps 参数时,报错 error: package nodeps is not installed 分析
  • C++的类和动态内存分配(深拷贝与浅拷贝)并实现自己的string类
  • 通过观测云 DataKit Extension 接入 AWS Lambda 最佳实践
  • MySQL-三范式 视图
  • 多线程(三):线程等待获取线程引用线程休眠线程状态
  • Hi3244 应用指导
  • 【LeetCode热题100】哈希
  • Java的四种循环语句
  • Qt杂记目录
  • 项目开发--基于docker实现模型容器化服务