layui laydate日期范围选择 layui如何实现日期区间选择

酷伟酱_9320

酷伟酱_9320

2026-04-13

609人浏览

原创

range: true 是最简方案,但分隔符默认为“-”;设 range: '至' 可自定义分隔符;分开绑定需用父容器+range数组;动态联动须用 setOptions 更新 min/max;长期有效用 max+'9999-12-31'配合匹配 format 的 shortcuts。

range: true 是最简方案,但分隔符会卡住你

直接启用双控件范围选择,range: true 就够了,但它硬编码用 - 当分隔符——如果 ui 要求写“至”“到”“~”,光靠这个参数没法改。别急着加 js 拼字符串,laydate 早留了口子:range: '至' 就能替换分隔符,连正则都不用写。

常见错误是以为必须手动监听两个 input 再赋值,结果日期格式错乱、联动失效。其实只要确保 elem 绑的是单个 <input>,且没额外加 value 或 readonly 干扰初始化,range: true 就能自动拆解、校验、回填。

  • 分隔符必须是纯字符串,不能带空格(' 至 ' 会导致解析失败)
  • 输入框初始值若含非法格式(如 "2025-01-01 ~ 2025-02-01"),组件可能拒绝渲染或只取前半段
  • type 为 time 时,range: true 仍有效,但分隔符只影响输入框显示,不影响时间滚动逻辑

分开绑定两个 input:必须用父容器 + range 数组

当设计稿明确要求“开始日期”和“结束日期”是两个独立输入框,且中间有固定文案(比如“至”字),就得走分开绑定路线。关键不是选两个 elem,而是把它们包进一个共同父容器,再用 range: ['#start', '#end'] 告诉 laydate 哪俩是搭档。

容易踩的坑是漏掉父容器的 id 或类名,或者把 elem 错误指向某个 input——laydate 会静默失败,控制台也不报错,表单就完全点不动。

  • 父容器必须是块级元素(如 <div class="layui-inline">),行内元素可能触发定位异常 <li> <code>range 数组里两个选择器必须真实存在,且不能是动态生成后未重 render 的 DOM
  • 若用 layui.form 配合,记得在 form.render() 后再调 laydate.render(),否则表单验证可能不识别新值
  • 动态限制起止日期联动:靠 min/max 回调,不是靠 disabledDate

    用户选了开始日期,结束日期最小值就得同步更新;反之亦然。这时候别用 disabledDate——它只禁用单日,不改变可选范围边界,也无法触发另一侧组件重绘。真正该用的是 min 和 max 的函数式写法,配合实例的 setOptions 手动刷新。

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

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

    下载

    例如:开始日期选中 2026-03-15,结束日期组件就要立刻执行 laydateIns.setOptions({ min: '2026-03-15' })。注意,这里 laydateIns 是 render 返回的实例,得提前存好变量,不然找不到对象。

    • 不要在 change 回调里直接改 min/max 字符串,必须调 setOptions 并传入新配置
    • 若两个日期组件共用同一份配置(比如都来自 layui.use),需确保实例变量不被覆盖或混淆
    • 移动端上,频繁 setOptions 可能导致面板闪烁,建议加防抖(延迟 100ms 再执行)

    长期有效/永久日期怎么填:max + shortcuts 是标准解法

    合同、会员、证书这类“长期有效”场景,不能瞎填 9999-12-31 就完事。数据库字段要支持,前端展示要美化,用户还得有一键选择入口——这三件事,laydate 用 max: '9999-12-31' 和 shortcuts 数组就能闭环。

    重点是 shortcuts 里的 value 必须和 format 匹配。比如 format 是 yyyy年MM月dd日,那 value 就不能写 '9999-12-31',而得写 '9999年12月31日',否则点“长期”按钮没反应。

    • 多个快捷项(如“1年后”“永久”)可以共存,但 value 值不能重复,否则后写的会覆盖前写的
    • 如果项目要做国际化,shortcuts.text 可以动态替换,但 value 仍需保持中文格式(laydate 不解析英文月份)
    • 后端接收 9999-12-31 时,务必做显式判断,别当成普通日期参与计算,否则时间戳溢出或比较逻辑崩塌
    实际开发中最容易忽略的,是 range 模式下两个日期之间的语义约束——laydate 不会自动阻止“开始日期晚于结束日期”,也不会在提交前校验合法性。这部分必须由你用 form.verify 或自定义 submit 处理,别指望组件代劳。

相关文章

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

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

下载

相关标签:

layui

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

相关专题

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

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

2023.08.11

2403

5

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

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

2023.10.09

5203

6

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

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

2024.03.19

6250

13

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

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

2024.03.22

5818

10

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

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

2024.05.22

823

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2720

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2553

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

热门下载

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

精品课程

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

共87课时 | 12.8万人学习

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

共89课时 | 11万人学习

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

共5课时 | 1.6万人学习