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

layui laydate设置默认值 layui日期组件如何初始化时间

秋丽姑娘_5429

秋丽姑娘_5429

发布时间:2026-03-17 12:24:12

|

608人浏览过

|

来源于php中文网

原创

<p>laydate 的 value 必须严格匹配 format 格式,否则默认值不显示;range 模式需两端时间合法且分隔符为“ - ”;多实例需 each 遍历初始化,推荐用 new Date() 或 toISOString() 生成标准时间字符串。</p>

value 参数必须严格匹配 format 格式,否则默认值不显示

laydate 不会自动解析或容错你传的字符串时间——比如 format: 'yyyy-mm-dd hh:mm:ss' 时,value: '2026-03-16' 就无效;必须写成 value: '2026-03-16 00:00:00' 才能渲染成功。

常见错误现象:控件打开后空白、placeholder 还在、控制台无报错但就是不填值。

  • 用 new Date() 最省心,它天然适配所有 type('date'、'datetime'、'time')
  • 若用字符串,建议统一用 toISOString().slice(0, 19).replace('T', ' ') 生成标准格式(如 "2026-03-16 21:51:00")
  • PHP 模板中嵌入时注意引号转义:value: "{:date('Y-m-d H:i:s', time())}"

range 模式下设默认时间段,别只靠 value 字符串拼接

想让范围选择器一打开就默认选中“今天 00:00:00 至 23:59:59”,光写 value: '2026-03-16 00:00:00 - 2026-03-16 23:59:59' 是不够的——laydate 要求两端时间都合法且符合 format,且中间分隔符必须是空格+短横+空格(' - '),不能是中文破折号或连字符。

  • 推荐动态构造:value: new Date().toJSON().slice(0,10) + ' 00:00:00 - ' + new Date().toJSON().slice(0,10) + ' 23:59:59'
  • 如果结束时间固定为当天 23:59:59,但开始时间要可调,建议用 ready 回调 + 手动触发时间面板(见下一条)
  • max 和 min 对 range 的两个输入框分别生效,不是全局限制

想让结束时间默认为 23:59:59?别硬点 DOM,用 ready + done 更稳

网上流传的用 $(".laydate-main-list-1 ...").click() 模拟点击来选中最后一秒的做法,极易失效——Layui 版本一升级、DOM 结构微调、异步加载延迟,就会点错位置或找不到元素。

真正可靠的方式是在 ready 钩子中获取当前日期对象,再用 done 回调同步更新另一个输入框:

laydate.render({
  elem: '#range',
  type: 'datetime',
  range: true,
  format: 'yyyy-MM-dd HH:mm:ss',
  ready: function() {
    // 初始化时把结束时间设为今天 23:59:59
    const today = new Date();
    today.setHours(23, 59, 59, 0);
    $('#range').val($('#range').val().split(' - ')[0] + ' - ' + layui.util.toDateString(today, 'yyyy-MM-dd HH:mm:ss'));
  },
  done: function(value, date, endDate) {
    if (value && value.includes(' - ')) {
      const [start, end] = value.split(' - ');
      if (!end || end.trim() === '') {
        const d = new Date(start);
        d.setHours(23, 59, 59, 0);
        $(this.elem).val(start + ' - ' + layui.util.toDateString(d, 'yyyy-MM-dd HH:mm:ss'));
      }
    }
  }
});

多个相同 class 的 input 初始化失败?必须 each 循环 render

直接写 elem: '.filter-time' 只会让第一个匹配元素生效,这是 laydate 内部实现机制决定的——它不支持批量绑定,也不做 NodeList 遍历。

错误现象:页面有 3 个 class="filter-time" 的输入框,只有第一个能点开日历,其余点击无反应。

  • 正确做法:用 jQuery 或原生 querySelectorAll 遍历,每个都单独 laydate.render({elem: element})
  • 不要在循环里重复 layui.use,只在外层调一次
  • 避免在 AJAX 动态插入后忘记重新初始化(需手动调 laydate.render)

laydate 初始化看似简单,但 value 格式、range 分隔逻辑、多实例绑定、以及时间精度(尤其是 23:59:59 这种边界值)几个点,稍不注意就会卡住一整天。最稳妥的路径是:用 new Date() 或 toJSON() 生成时间字符串,用 ready 和 done 做二次修正,对多个控件坚决不用 class 简写。

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

热门AI工具

更多
豆包大模型

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

WorkBuddy

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

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

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

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

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

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

2123

2023.08.11

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

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

4523

2023.10.09

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

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

5670

2024.03.19

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

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

5118

2024.03.22

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

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

723

2024.05.22

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

80

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

20

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

20

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

20

2026.09.22

热门下载

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

精品课程

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

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