Layui如何实现laydate日期选择器选择后的回调逻辑

夏婷姑娘_2687

夏婷姑娘_2687

2026-07-22

913人浏览

原创

laydate回调逻辑取决于版本、配置项和按钮类型:done全版本兼容但需通过value判空;change实时触发但不适用于最终确认;onConfirm/onclear仅v5.1.0+支持;choose已废弃。

laydate 的回调逻辑不是“选完就走”,而是取决于你用哪个回调、怎么配按钮、以及当前用的是哪个版本——尤其 onclear 和 onconfirm 在旧版里根本不存在,硬写进去不会执行。

done 回调:最常用但容易误判清空动作

done 是唯一全版本兼容的回调,它会在点击「确定」「现在」「清空」甚至手动输入后失焦时都触发。但它的第一个参数 value 是唯一可靠信号:

  • 选日期后:value 是格式化字符串(如 "2026-07-01")
  • 点清空后:value 是空字符串 ""(不是 null 或 undefined)
  • 不要依赖 date 对象判空——清空时它仍返回默认时间(如 {year: 2026, month: 6, date: 1})
  • 如果同时要重置关联控件的 min/max,必须在 value === "" 分支里手动设回原始值,否则联动会卡住

change 回调:适合实时响应年/月切换,但不适用于“确认后才生效”场景

change 在用户滚动年份、点击左右箭头、或点选某个月时立即触发,不是等点「确定」才执行。它适合做实时加载(比如按年查报表),但不适合校验或提交:

  • 年选择器(type: 'year')下,change 比 done 更早触发,且只传 value(如 "2025")和 date
  • 日期选择器中,每点一次日历格子都会触发 change,频繁调用可能影响性能
  • 它不等用户点「确定」,所以不能替代 done 做最终确认逻辑

onConfirm 和 onclear:v5.1.0+ 才支持,旧版必须手动模拟

如果你用的是 layui 2.8.x 自带的 laydate(通常是 v5.0.9),onConfirm 和 onclear 配置项直接被忽略。此时只能靠 DOM 操作或 done 判空:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • onConfirm 只在点「确定」按钮时触发,适合做最终校验(比如检查是否晚于开始时间);但 v5.0.x 不识别,得手动绑定:document.querySelector('.layui-laydate-footer .layui-btn-primary').onclick
  • onclear 同理,v5.0.x 不支持,必须用 done 中判断 value === "" 来模拟
  • 手动绑定时注意:清空后要同步调用 picker.close() 关闭面板,否则日历还悬着
  • 获取实例要用 laydate.getInst('#elem'),不是 laydate.render() 的返回值(后者只首次有效)

choose 回调已废弃,别再用

choose 是 laydate v1.x 的老写法,从 v5.0 开始就被标记为废弃,文档里不再提及。它和 done 行为类似,但参数顺序不同、缺少 endDate,且新版中可能不触发或行为异常:

  • 新项目一律用 done 或 change
  • 如果看到旧代码里还有 choose: function(value),优先替换成 done: function(value, date, endDate)
  • 不要混用 choose 和 done,会导致重复执行

真正麻烦的不是写哪个回调,而是搞清你手里的 laydate 到底是哪个版本——laydate.v5.0.9 和 v5.1.0+ 对同一个配置项的反应完全不同,不查版本号就瞎配,八成白忙活。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2743

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5943

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6890

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6638

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

943

5

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

40

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

20

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

40

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习