Layui日期插件如何设置选择起始时间后终止时间自动推算

夜伟姑娘_2345

夜伟姑娘_2345

2026-04-30

493人浏览

原创

laydate中设置起始时间后自动推算终止时间需更新实例config.value并调用reload(),解析value字符串计算新日期,格式化为与format完全一致的字符串,同步更新end.config.min(注意month从0开始),避免直接操作dom或忽略时区/前导零。

laydate 设置起始时间后自动推算终止时间(如 +30 天)

直接在 done 回调里用 $("#endtime").val() 赋值是无效的——laydate 不会响应 dom 值变更,必须调用实例的 config.value 并触发 reload()。

常见错误是拼字符串加天数后直接塞进 input,结果下次点开控件还是显示原始日期,因为 laydate 内部状态没同步。

  • 用 new Date(dateStr) 解析起始时间,再通过 setDate() 或 setTime() 推算终止时间,避免手动字符串切割(易出时区/闰月问题)
  • 推算后需格式化为与 format 完全一致的字符串,比如 format: 'yyyy-MM-dd' 就不能输出 '2026-4-21'(少前导零)
  • 更新完 end.config.value 后必须立即调用 end.reload(),否则 UI 不刷新

type='datetime' 下精确到秒的自动推算(如 +1 小时)

如果起止都要带时间,且需按小时/分钟推算(比如会议开始后 1 小时结束),date 参数里的 hours/minutes 字段不可靠——它只反映用户点击的面板日期,不包含输入框里手动改的时间。

真正可用的是 value 字符串,必须解析它:

done: function(value, date, endDate) {
  if (!value) return;
  const start = new Date(value);
  const end = new Date(start.getTime() + 60 * 60 * 1000); // +1 小时
  const formatted = `${end.getFullYear()}-${String(end.getMonth()+1).padStart(2,'0')}-${String(end.getDate()).padStart(2,'0')} ${String(end.getHours()).padStart(2,'0')}:${String(end.getMinutes()).padStart(2,'0')}:${String(end.getSeconds()).padStart(2,'0')}`;
  end.config.value = formatted;
  end.reload();
}

注意:这里没用 toISOString(),因为 laydate 默认用本地时区渲染,用 UTC 时间会导致显示偏差(比如你在北京选 10:00,toISOString() 输出的是 02:00)。

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

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

下载

联动时避免 min/max 错位导致无法选择

起始时间变更后,不仅要设终止时间的默认值,还必须同步更新它的 min,否则用户可能选到比起点更早的时间——但这个 min 是对象结构,不是字符串:

  • end.config.min = { year: date.year, month: date.month - 1, date: date.date } —— 注意 month 是 0 起始
  • 如果 type 是 'datetime',还得补上 hours/minutes/seconds,否则默认从 00:00:00 开始限制
  • 别漏掉 end.config.min.month = date.month - 1 这行,很多案例里就因为少这句,导致 min 月份始终是 0

按钮触发推算(如“+7 天”)时的注意事项

用户点按钮推算,不是靠 done 回调,而是主动读取当前起始值再计算。这时最容易踩的坑是:$("#startTime").val() 可能为空或格式非法,必须校验:

  • 先用 $.trim($("#startTime").val()) 去空格
  • 用 new Date(str) 构造,检查 isNaN() 防止无效日期(比如 "2026-02-30")
  • 推算后调用 end.config.value = xxx + end.reload(),而不是 $("#endTime").val(xxx)
  • 如果起始时间控件还没初始化(比如异步加载表单),直接读 .val() 会是空字符串,应确保 laydate 实例已创建

复杂点在于:推算逻辑要和用户实际看到的 format 对齐,比如 format 是 'yyyy年MM月dd日',那你就得自己写格式化函数,laydate 不提供反向解析。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

4031

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

6908

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

814

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

2025.12.30

373

8

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

2025.12.31

501

12

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

2025.12.31

338

7

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2025.12.31

581

20

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

2025.12.31

538

20

热门下载

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

精品课程

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

共87课时 | 12.8万人学习

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

共89课时 | 11万人学习

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

共5课时 | 1.6万人学习