本文共 2767 字，大约阅读时间需要 9 分钟。

layui.laydate 时间日期组件

layui.laydate 是一个功能强大的日期和时间组件，支持多种选择类型和自定义配置，适用于各种日期和时间的输入场景。

主要功能

layui.laydate 的核心功能主要包括以下五种选择器类型：

基础参数

通过核心方法 laydate.render(options)，可以设置laydate 组件的基础参数。这些参数对组件的功能和行为有重要影响。

1. elem

指定绑定日期元素的 ID 或 DOM 对象。

laydate.render({ elem: '#startTime' });

2. type

指定日期选择器的类型。

• 类型：String，默认值：date
• 可选值：year、month、date、time、datetime
  示例：

laydate.render({ elem: '#startTime', type: 'date' });

3. range

开启左右面板范围选择功能。

• 类型：Boolean 或 String，默认值：false
• 当 true 时，默认使用“-”分割范围，或者可以指定其他分割字符。
  示例：

laydate.render({ elem: '#startTime', range: '~' });

4. format

自定义日期格式。

• 类型：String，默认值：yyyy-MM-dd
• 支持的格式符包括：yyyy、y、MM、M、dd、d、HH、H、mm、m、ss、s
  示例：

laydate.render({ elem: '#startTime', format: '北京时间：yyyy年MM月dd日 HH时mm分ss秒' });

5. value

指定初始值，需符合 format 参数设定的格式，或者通过 new Date() 获取当前时间。

• 类型：String 或 Date，默认值：new Date()
  示例：

laydate.render({ elem: '#startTime', value: '2018-07-03' });

6. isInitValue

是否允许填充初始值，默认为 true。

laydate.render({ elem: '#startTime', value: '2018-07-03', isInitValue: false });

7. min 和 max

设定日期时间的最小和最大范围。

• 类型：String，默认值：min: '1900-1-1'、max: '2099-12-31'
• 可选值需符合 format 参数设定的格式，或者直接使用时间戳表示。
  示例：

laydate.render({ elem: '#startTime', min: '-7', max: '+7' });

8. trigger

自定义弹出控件的触发事件。

• 类型：String，默认值：focus
• 可选值包括：click、dblclick 等。
  示例：

laydate.render({ elem: '#startTime', trigger: 'dblclick' });

9. show

是否显示默认控件，默认为 false。

laydate.render({ elem: '#startTime', show: true });

10. position

控件的定位方式。

• 类型：String，默认值：absolute
• 可选值：absolute、fixed、static
  示例：

laydate.render({ elem: '#startTime', position: 'fixed' });

11. showBottom

是否显示底部栏，默认为 true。

laydate.render({ elem: '#startTime', showBottom: false });

12. btns

底部栏工具按钮。

• 类型：Array，默认值：['clear', 'now', 'confirm']
• 示例：

laydate.render({ elem: '#startTime', btns: ['clear', 'confirm'] });

13. lang

日期组件的语言设置。

• 类型：String，默认值：cn
• 可选值包括：cn（中文）和en（英文）。
  示例：

laydate.render({ elem: '#startTime', lang: 'en' });

14. theme

控件的主题风格。

• 类型：String，默认值：default
• 可选值包括：default（简约）、molv（墨绿）、grid（格子主题）等。
  示例：

laydate.render({ elem: '#startTime', theme: 'molv' });

15. calendar

是否显示公历节日。

• 类型：Boolean，默认值：false
  示例：

laydate.render({ elem: '#startTime', calendar: true });

16. mark

标注重要日子。

• 类型：Object，默认值：null
• 示例：

laydate.render({ elem: '#startTime', mark: { '0-12-31': '跨年', '0-0-10': '工资' }));

回调函数

laydate 组件支持以下回调函数，用于在控件操作时触发自定义逻辑：

示例：

laydate.render({ 
    elem: '#startTime', 
    change: function(value, date, endDate) {
        console.log(value); // 生成的日期值，如 '2017-08-18'  
        console.log(date); // 日期时间对象  
        console.log(endDate); // 结束日期时间对象  
    }
});

通过这些参数和回调函数，可以对日期时间组件进行高度定制，满足多种应用场景的需求。