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

layui laydate日期范围选择怎么获取开始和结束时间?

雨晨吖_6954

雨晨吖_6954

发布时间:2026-09-30 08:45:17

|

145人浏览过

|

来源于php中文网

原创

直接在done回调函数的第二个参数中获取[start, end]数组,二者均为原生Date对象,可直接调用getTime()等方法;务必使用done而非change回调以确保范围完整。

layui laydate日期范围选择怎么获取开始和结束时间?

laydate 日期范围选择后怎么取到两个值?

直接用 done 回调函数里的第二个参数,它就是个数组,[start, end],不是对象也不是字符串。很多人卡在这儿,以为要手动 parse 或拆分字符串,其实 LayDate 已经帮你转成 Date 对象了。

  • start 和 end 都是原生 Date 实例,可直接调用 .getTime()、.getFullYear() 等方法
  • 如果启用了 format: 'yyyy-MM-dd',回调里拿到的仍是 Date 对象,不是格式化后的字符串
  • 别在 change 回调里取范围值——它只触发单个日期变化,不保证两个都填完;必须用 done

为什么 value 是字符串而 done 的参数是 Date 对象?

因为 value 是输入框显示值,受 format 控制,纯展示用途;而 done 是“选完确认”事件,LayDate 主动把用户选的逻辑时间封装成标准 Date 对象传出来,方便你做计算、提交或校验。

  • 比如选了 “2024-01-01” 到 “2024-01-10”,value 是 "2024-01-01 - 2024-01-10"(字符串),但 done 的第二个参数是 [new Date(2024,0,1), new Date(2024,0,10)]
  • 如果你需要提交 ISO 字符串,得自己调 start.toISOString().split('T')[0] 或用 laydate.now(0, 'yyyy-MM-dd')
  • 注意月份是 0 起始,getMonth() 返回 0–11,别直接拼接

range 模式下怎么确保两个日期都填了才触发业务逻辑?

靠 done 回调本身就能保证:只有用户点确定、或回车、或失焦且范围完整时才会触发。但如果用户只选了开始没选结束,done 根本不会执行——这点常被忽略。

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

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

下载
  • 初始化时加 isRange: true,且不要设 value 为单个日期,否则可能降级为单选
  • 若需默认值,用数组赋值:value: ['2024-01-01', '2024-01-10'],而不是 '2024-01-01 - 2024-01-10'
  • 服务端接收时,建议统一转成时间戳或 ISO 字符串再传,避免时区歧义;LayDate 生成的 Date 对象默认按本地时区解析

常见错误:获取到 undefined 或 NaN

八成是因为没开 range 模式,或者误用了 change 回调。另一个隐蔽原因是:输入框被 JS 清空或重置过,导致 LayDate 实例内部状态丢失。

  • 检查是否漏写 type: 'date' 和 range: true(注意是 range,不是 isRange ——后者是旧版写法,v2.8+ 推荐用 range: true)
  • 别用 $('#id').val('') 清空输入框,改用 datePickerInstance.setValue('')
  • 如果页面有多个 range 日期控件,每个都要独立初始化,不能共用一个 laydate.render() 配置

实际用的时候,最稳的写法就是盯着 done 回调,拿数组解构,剩下的交给 Date API 处理。别碰输入框的 value 做逻辑判断,那是给用户看的,不是给代码信的。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

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

DeepSeek

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

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

PixTV
PixTV Hot

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

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

相关专题

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

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

2183

2023.08.11

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

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

4663

2023.10.09

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

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

5790

2024.03.19

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

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

5238

2024.03.22

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

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

743

2024.05.22

ajax教程
ajax教程

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

2420

2023.06.14

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

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

340

2023.08.31

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

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

2273

2023.11.15

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

0

2026.09.29

热门下载

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

精品课程

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

共87课时 | 12.5万人学习

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

共89课时 | 10.8万人学习

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

共5课时 | 1.6万人学习

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

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