Laydate 教程：从入门到精通

Laydate 是一款由国人开发的轻量级、易用且功能强大的日期时间选择器组件，它专为 Web 开发者设计，可以轻松集成到任何前端项目中，Laydate 的核心优势在于其简洁的 API、丰富的皮肤主题以及良好的浏览器兼容性。

目录

  1. 快速上手 (5分钟搞定)
    • 1 引入 Laydate
    • 2 初始化 Laydate
    • 3 基础示例
  2. 核心配置项详解
    • 1 基础配置 (type, elem, format)
    • 2 主题与外观 (theme)
    • 3 范围选择 (range, type='dateRange')
    • 4 时间选择 (type='time')
    • 5 其他常用配置项
  3. 事件回调
    • 1 done - 选择完毕后回调
    • 2 change - 日期时间改变时回调
    • 3 clear - 清除日期时回调
  4. 高级用法
    • 1 多个实例绑定
    • 2 动态绑定/解绑
    • 3 限制可选日期
    • 4 手动调用与销毁
  5. 完整示例代码
  6. 总结与官方资源

快速上手 (5分钟搞定)

1 引入 Laydate

你需要将 Laydate 的 CSS 和 JS 文件引入到你的 HTML 页面中，最简单的方式是通过 CDN。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Laydate 快速上手</title>
    <!-- 1. 引入 Laydate 的 CSS 文件 -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
</head>
<body>
    <!-- 你的内容 -->
    <input type="text" id="test1" placeholder="请选择日期">
    <!-- 2. 引入 Layui 的核心 JS 文件 -->
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script>
        // 3. 初始化 Laydate
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            // 执行一个 laydate 实例
            laydate.render({
                elem: '#test1' // 指定元素
            });
        });
    </script>
</body>
</html>

代码解释:

  1. CSS: <link rel="stylesheet" ...> 引入了 Laydate 的样式文件，这是组件能正常显示的基础。
  2. JS: <script src=".../layui.js"></script> 引入了 Layui 的核心库，Laydate 是 Layui 的一个模块，所以必须先加载 Layui。
  3. 初始化: layui.use('laydate', function(){...}) 是 Layui 模块加载的标准写法，它会加载 laydate 模块，并在加载完成后执行回调函数。
  4. 渲染: laydate.render({...}) 是创建日期选择器的核心方法。elem: '#test1' 告诉 Laydate 在哪个元素（这里是 ID 为 test1 的 input）上渲染日期选择器。

打开这个 HTML 文件，点击输入框，一个漂亮的日期选择器就出现了！

核心配置项详解

laydate.render() 方法可以接收一个配置对象，以实现更丰富的功能。

1 基础配置

配置项 类型 默认值 描述
type String date 控器类型，可选值：date(日期选择), datetime(日期时间选择), time(时间选择), year(年选择), month(年月选择), dateRange(日期范围)
elem String / HTMLElement - 指定元素，可以是 #id 或 .class，也可以是 DOM 对象
format String yyyy-MM-dd 日期格式，非常灵活，详见下方格式说明
value String / Date - 初始值，支持 yyyy-MM-dd 格式的字符串或 Date 对象

格式说明 (format):

  • yyyy: 四位年份 (e.g., 2025)
  • MM: 两位月份 (e.g., 01, 12)
  • dd: 两位日期 (e.g., 01, 31)
  • HH: 两位小时 (24小时制)
  • mm: 两位分钟
  • ss: 两位秒

示例：

// 渲染一个日期时间选择器，格式为 'yyyy年MM月dd日 HH:mm:ss'
laydate.render({
    elem: '#test2',
    type: 'datetime',
    format: 'yyyy年MM月dd日 HH:mm:ss'
});

2 主题与外观

配置项 类型 默认值 描述
theme String / Array default 主题名称，如 molv(墨绿), grid(网格), red(红色), #393D49(自定义颜色值)

示例：

// 渲染一个墨绿主题的日期选择器
laydate.render({
    elem: '#test3',
    theme: 'molv'
});

3 范围选择

用于选择一个时间范围,如“开始日期”和“结束日期”。

配置项 类型 默认值 描述
range Boolean / String false 是否开启范围选择，若为 true，则默认显示两个输入框，若为 String，则为自定义分隔符，如 至。
type String date 当开启范围选择时，type 应设为 dateRange, datetimeRange, yearRange, monthRange。

示例：

// 渲染一个日期范围选择器，中间用 "至" 分隔
laydate.render({
    elem: '#test4',
    type: 'dateRange', // 必须为 dateRange
    range: '至', // 使用自定义分隔符
    format: 'yyyy-MM-dd'
});

4 时间选择

仅用于选择时间。

配置项 类型 默认值 描述
type String date 设为 time 即可。
format String HH:mm:ss 时间选择器的格式。

示例：

// 渲染一个时间选择器
laydate.render({
    elem: '#test5',
    type: 'time',
    format: 'HH:mm'
});

5 其他常用配置项

配置项 类型 默认值 描述
min String / Date - 最小可选日期
max String / Date - 最大可选日期
trigger String click 触发方式，click(单击触发) 或 focus(聚焦触发)
showBottom Boolean true 是否显示底部栏（如：清空、确定按钮）
btns Array ['clear', 'now', 'confirm'] 底部栏按钮，可自定义顺序和内容

事件回调

Laydate 提供了几个实用的事件，让你在特定时机执行自己的代码。

事件名 参数 描述
done value 选择完毕后触发的回调，value 是选中的日期时间值
change value 日期时间被切换时触发的回调，无论是点击面板还是通过快捷键
clear - 清除日期时触发的回调

示例：

laydate.render({
    elem: '#test6',
    done: function(value, date){
        console.log('你选择的日期是：' + value); // 得到日期生成的值，如：2025-08-18
        console.log('日期对象：', date); // 得到日期对象：{year: 2025, month: 7, date: 18, hours: 0, minutes: 0, seconds: 0}
    },
    clear: function(){
        console.log('日期已清除');
    }
});

高级用法

1 多个实例绑定

为多个元素绑定 Laydate 只需多次调用 laydate.render() 即可。

layui.use('laydate', function(){
    var laydate = layui.laydate;
    // 实例1
    laydate.render({ elem: '#date1' });
    // 实例2
    laydate.render({ 
        elem: '#date2',
        type: 'datetime'
    });
    // 实例3
    laydate.render({ 
        elem: '#date3',
        type: 'time'
    });
});

2 动态绑定/解绑

当元素是动态生成的（如通过 AJAX 或模板引擎渲染）时，需要在元素渲染出来之后再调用 laydate.render()。

动态绑定:

// 假设这是通过 JS 动态添加的 input
document.getElementById('dynamic-container').innerHTML = '<input type="text" id="dynamic-date">';
// 在元素添加后，再进行渲染
layui.use('laydate', function(){
    var laydate = layui.laydate;
    laydate.render({ elem: '#dynamic-date' });
});

解绑销毁:

如果需要移除日期选择器,可以使用 laydate.destroy()。

var laydate = layui.laydate;
// 先创建一个实例
var ins1 = laydate.render({ elem: '#test7' });
// ... 在某个时刻，需要销毁它
ins1.destroy(); // 销毁该实例

3 限制可选日期

通过 min 和 max 配置项，可以限制用户只能选择某个范围内的日期。

laydate.render({
    elem: '#test8',
    min: '2025-01-01', // 最小可选日期
    max: '2025-12-31'  // 最大可选日期
});
// 也可以用 Date 对象
var minDate = new Date(2025, 0, 1); // 月份从0开始
var maxDate = new Date(2025, 11, 31);
laydate.render({
    elem: '#test9',
    min: minDate,
    max: maxDate
});

4 手动调用与销毁

Laydate 实例对象会返回一个 ins 对象，你可以通过它来手动操作。

layui.use('laydate', function(){
    var laydate = layui.laydate;
    // 得到实例对象
    var ins = laydate.render({
        elem: '#test10',
        trigger: 'focus' // 使用聚焦触发
    });
    // 可以通过 ins 手动打开
    // document.getElementById('test10').focus(); // trigger 是 'focus'，focus元素即可打开
    // 销毁实例
    // setTimeout(function(){
    //     ins.destroy();
    // }, 5000);
});

完整示例代码

这是一个包含所有上述示例的完整 HTML 文件，你可以直接复制下来运行，体验各种功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Laydate 完整示例</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <style>
        .demo-container { padding: 20px; }
        .demo-item { margin-bottom: 15px; }
    </style>
</head>
<body>
<div class="layui-container demo-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>Laydate 功能演示</legend>
    </fieldset>
    <div class="demo-item">
        <label class="layui-form-label">基础日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-date" placeholder="yyyy-MM-dd">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">日期时间</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">墨绿主题</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-theme" placeholder="yyyy-MM-dd">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">日期范围</label>
        <div class="layui-input-inline" style="width: 290px;">
            <input type="text" class="layui-input" id="demo-range" placeholder="开始日期 至 结束日期">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">时间选择</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-time" placeholder="HH:mm">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">限制日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-limit" placeholder="仅可选2025年内">
        </div>
    </div>
    <div class="demo-item">
        <label class="layui-form-label">事件回调</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="demo-event" placeholder="选择日期查看控制台">
        </div>
    </div>
</div>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
layui.use(['laydate', 'layer'], function(){
    var laydate = layui.laydate;
    var layer = layui.layer;
    // 1. 基础日期
    laydate.render({
        elem: '#demo-date'
    });
    // 2. 日期时间
    laydate.render({
        elem: '#demo-datetime',
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm:ss'
    });
    // 3. 墨绿主题
    laydate.render({
        elem: '#demo-theme',
        theme: 'molv'
    });
    // 4. 日期范围
    laydate.render({
        elem: '#demo-range',
        type: 'dateRange',
        range: '至',
        format: 'yyyy-MM-dd'
    });
    // 5. 时间选择
    laydate.render({
        elem: '#demo-time',
        type: 'time',
        format: 'HH:mm'
    });
    // 6. 限制日期
    laydate.render({
        elem: '#demo-limit',
        min: '2025-01-01',
        max: '2025-12-31'
    });
    // 7. 事件回调
    laydate.render({
        elem: '#demo-event',
        done: function(value, date){
            layer.msg('你选择的日期是：' + value);
            console.log('日期对象：', date);
        },
        clear: function(){
            layer.msg('日期已清除');
        }
    });
});
</script>
</body>
</html>

总结与官方资源

Laydate 的设计哲学是 简单易用，通过 laydate.render() 一个方法，配合简洁的配置项，就能实现绝大多数日期时间选择的需求，对于开发者来说，学习成本极低，可以快速集成到项目中。

官方资源:

希望这份教程能帮助你快速掌握 Laydate！如果在开发中遇到问题，多查阅官方文档通常能找到答案。