讲师中心 微信公众号
AI工具推荐 视频效率加速

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

夏婷姑娘_2687

夏婷姑娘_2687

发布时间:2026-07-22 11:12:42

|

913人浏览过

|

来源于php中文网

原创

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+ 对同一个配置项的反应完全不同,不查版本号就瞎配,八成白忙活。

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

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

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

2743

2023.08.11

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

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

5943

2023.10.09

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

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

6890

2024.03.19

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

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

6658

2024.03.22

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

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

943

2024.05.22

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

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

60

2026.10.28

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

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

20

2026.10.28

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

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

40

2026.10.28

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

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

140

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn