目录
一:基本用法
Layui 是一个基于 jQuery 的前端UI框架,它提供了众多的组件和工具,其中包括日期选择器组件。在 Layui 中使用日期选择器组件非常简单,只需要引入 Layui 的CSS和JS文件,然后在HTML代码中添加一个元素,如:
<input type="text" class="layui-input" id="test-date" placeholder="请选择日期">
接下来在JavaScript代码中初始化日期选择器组件,并设置相应的参数,如:
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test-date' //指定元素
});
});
其中,laydate.render方法用于初始化日期选择器,elem参数指定要绑定日期选择器的元素
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'}">
<script>
layui.use(function(){
var laydate = layui.laydate;
// 单个渲染
laydate.render({
elem: '#ID-test-laydate'
});
// 批量渲染
laydate.render({
elem: '.class-test-laydate'
});
});
</script>
属性
属性名 | 描述 | 类型 | 默认值 | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
elem | 绑定元素选择器或 DOM 对象 |
string/DOM | - | ||||||||||||||||||||||||||
组件面板选择类型。支持以下可选值:
效果详见: #示例 |
string |
|
|||||||||||||||||||||||||||
开启左右面板的范围选择,将会根据
详细用法可参考: #示例 |
boolean string array |
|
|||||||||||||||||||||||||||
rangeLinked 2.8+ | 是否开启日期范围选择时的区间联动标注模式,该必须开启 |
boolean |
|
||||||||||||||||||||||||||
fullPanel 2.8+ | 是否开启全面板,即日期和时间显示在同一面板。 当 |
boolean |
|
||||||||||||||||||||||||||
自定义日期和时间值的返回格式,默认值:
通过上述格式符组成日期时间字符串,如下所示:
相关用法可参考: #示例 |
|||||||||||||||||||||||||||||
初始值。值支持以下类型:
|
string date |
|
|||||||||||||||||||||||||||
isInitValue | 是否将初始值填充在目标元素中,一般配合 |
boolean |
|
||||||||||||||||||||||||||
shortcuts 2.8+ |
用于开启面板左侧的快捷选择栏。其值配置规则如下:
其中
|