代码拉取完成，页面将自动刷新
基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。 查看例子展示
依赖laydate，所以必须引用laydate!
插件目录一定为以下结构：
|-- extends
|-- css
|-- laydateTab.css
|-- laydateTab.js
项目目录结构假设为：
|-- project
|-- js
|-- layui
|-- css
|-- layui.css
|-- extends
|-- css
|-- laydateTab.css
|-- laydateTab.js
|-- lay
...
|-- font
...
|-- images
...
|-- layui.all.js
|-- layui.js
则引用方式为：
layui.config({
base: 'js/layui/extends/'
}).extend({
laydateTab: 'laydateTab'
}).use(['laydateTab'], function(){
var laydateTab = layui.laydateTab;
});
项目目录结构假设为：
|-- project
|-- js
|-- laydate
|-- laydate.js
|-- theme
|-- default
...
|-- laydate.css
|-- extends
|-- css
|-- laydateTab.css
|-- laydateTab.js
则引用方式为：
<script src="js/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/extends/laydateTab.js" type="text/javascript" charset="utf-8"></script>
layui.laydateTab获取laydateTab对象。layui.config({
base: 'js/layui/extends/' //假设这是你存放拓展模块的根目录
}).extend({ //设定laydateTab模块别名
laydateTab: 'laydateTab'
}).use(['laydateTab'], function(){
var laydateTab = layui.laydateTab;
laydateTab.render({
elem : '#indate'
});
});
laydateTab获取laydateTab对象。laydateTab.render({
elem : '#indate'
});
laydateTab.render({
elem : '#indate' // 绑定触发元素
});
比较复杂的绑定配置
laydateTab.render({
elem : '#indate', // 绑定触发元素
type : ['year', 'month'], //显示的类型选项卡
title : ['年份', '月份'], // 日期选择选项卡显示的标题名称
range : '~', // 开启范围，使用Array则对类型区分使用该参数
selected : 'month', // 初始化默认显示的选项卡
theme : '#393D49', //主题
// 渲染成功之后回调
success : function(tabElem, options) {
console.log(tabElem); // 日期选项卡对应的标签元素
console.log(options); // 渲染的参数
},
// 切换选项卡的回调
changeTab : function(type, title) {
console.log(type); // 当前选择的类型
console.log(title); // 当前选择的类型标题名称
},
// 选择完毕的回调, 可参考laydate done回调
done : function(value, date, endDate) {
console.log(value); // 生成的值(选择后的值)
console.log(date); // 日期时间对象
console.log(date); //结束的日期时间对象
layer.msg('当前选择的值为:<br> ' + value);
},
// 销毁选项卡之后的回调
end : function(elem) {
console.log(elem); // 所绑定的触发元素 - elem对象
}
});
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| elem | String/DOM | 指定laydateTab的触发的元素，必填 | '#demo' |
| trigger | String | 触发显示laydateTab的事件，默认值：click | 'mouseover' |
| type | Array / String | 需要渲染的选项卡类型。 1. 默认值: ['year', 'month', 'date'] 2. 选项卡类型值： year : 年 month : 月 date : 日期 time : 时间 datetime : 日期时间 3. 内置String快捷类型： yms : 年、月、日期3个选项卡 ym : 年、月2个选项卡 md : 月、日期2个选项卡 all : 年、月、日期、时间、日期时间全部5个选项卡 |
'yms' [year', 'month', 'date'] |
| title | Array | [选填]日期选择选项卡显示的标题名称，如果填写，则使用数组写出和type对应的选项卡标题名称，如果数组中某个值为null，则使用内置默认值。 默认值如下： year: 年 month: 月 date: 日期 datetime: 日期时间 time: 时间 |
['年份', '月份', '日期'] |
| value | Array / String | 日期默认值,使用数组则需要和type一一对应。 | '2020-12-01' |
| selected | String | 初始化默认显示的选项卡。 | 'date' |
| theme | String | 主题；theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题） | '#393D49' |
| locationValueTab | Boolean | 有初始值情况下，是否定位到初始值对应的选项卡类型,默认true，false不进行定位 | false |
| success | Function | 渲染显示成功之后的回调，返回2个参数，分别为日期选项卡对应的标签元素、渲染配置 | function(tabElem, options) { console.log(tabElem); console.log(options); } |
| changeTab | Function | 切换选项卡的回调，返回1个参数-选项卡对应的类型、类型标题名称 | function(type, title) { console.log(type); console.log(title); } |
| done | Array / Function | 选择完毕的回调,如果是数组，则数组存放的也需要为function，可参考laydate done回调;回调参数带有3个参数分别代表：生成的值、日期时间对象、结束的日期时间对象；如果return String类型的值回去，则将return的值给elem赋值 |
function(value, date, endDate){ console.log(value); console.log(date); console.log(endDate); } |
| end | Function | 销毁选项卡之后的回调，返回1个参数-所绑定的elem对象 | function(elem) { console.log(elem); } |
tips : position参数不可使用
其他配置参考laydate配置, 选项卡全通用则使用单个值，区分选项卡则使用数组。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型