layui/docs/laydate/index.md

title	toc
日期与时间选择器 laydate	true

日期与时间选择器

日期与时间选择器 laydate 提供了年、月、日、时、分、秒的多类型选择面板，也是 Layui 的常用组件之一。

示例

{{- d.include("/laydate/detail/demo.md") }}

API

API	描述
var laydate = layui.laydate	获得 laydate 模块。
laydate.render(options)	laydate 组件渲染，核心方法。
laydate.hint(id, opts) 2.8+	在对应的 laydate 组件面板上弹出提示层。
laydate.getInst(id) 2.8+	获取组件对应的渲染实例。
laydate.unbind(id) 2.8+	对目标元素解除当前实例的绑定。
laydate.close(id) 2.7+	关闭日期面板。
laydate.getEndDate(month, year)	获取某月的最后一天。

渲染

laydate.render(options);

• 参数 options : 基础属性配置项。#详见属性
  注 ^2.8+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<input type="text" id="ID-test-laydate">
<input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
<input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
 
<!-- import layui --> 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 单个渲染
  laydate.render({
    elem: '#ID-test-laydate'
  });
  // 批量渲染
  laydate.render({
    elem: '.class-test-laydate'
  });
});
</script>

属性

{{- d.include("/laydate/detail/options.md") }}

弹出提示 ^2.8+

laydate.hint(id, opts);

• 参数 id : 组件渲染时定义的 id 属性值
• 参数 opts : 该方法支持的属性可选项，详见下表

opts	描述	类型	默认值
content	提示内容	string	-
ms	提示层自动消失所需的毫秒数	number	3000

该方法用于在指定的日期面板弹出一个提示层。

var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 弹出提示
laydate.hint('test', {
  content: '提示内容'
});

获取实例 ^2.8+

laydate.getInst(id);

• 参数 id : 组件渲染时定义的 id 属性值

该方法用于获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。

var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 获取对应的实例
var inst = laydate.getInst('test');
console.log(inst); // 实例对象

解除实例绑定 ^2.8+

laydate.unbind(id);

• 参数 id : 组件渲染时定义的 id 属性值

该方法用于对目标元素对应的实例的绑定完全解除，即触发元素事件时，不再执行组件渲染。

var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 解除对应的实例绑定
laydate.unbind('test');

关闭日期面板 ^2.7+

laydate.close(id);

• 参数 id : 组件渲染时定义的 id 属性值。 若 id 参数不填，则关闭当前打开的日期面板

该方法用于关闭对应的日期面板

var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 关闭对应的日期面板
laydate.cllose('test');

获取某月的最后一天

laydate.getEndDate(month, year);

• 参数 month : 月份，默认为当前月。
• 参数 year : 年份，默认为今年。

该方法用于获取某个月份的最后一天

var days1 = laydate.getEndDate(10); // 获得 10 月的最后一天为 31 号
var days2 = laydate.getEndDate(2, 2080); // 获得 2080 年 2 月的最后一天为 29 号

贴士

laydate 曾经可作为单独组件使用，鉴于维护成本的考量，目前 laydate 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 laydate 即可。