基于layui的laydate實(shí)現(xiàn)的日期時(shí)間選擇組件選項(xiàng)卡，可以支持多個(gè)日期類型切換選擇，且對(duì)于laydate的配置全部支持。
|-- extends
|-- css
|-- laydateTab.css
|-- laydateTab.js
|-- project則引用方式為：
|-- js
|-- layui
|-- extends
|-- css
|-- laydateTab.css
|-- laydateTab.js
|-- css
|-- layui.css
|-- lay
...
|-- font
...
|-- images
...
|-- layui.all.js
|-- layui.js
layui.config({
base: 'js/layui/extends/'
}).extend({
laydateTab: 'laydateTab'
}).use(['laydateTab'], function(){
var laydateTab = layui.laydateTab;
}); 2. 使用laydate單獨(dú)引入|-- 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>使用說(shuō)明
<script src="js/extends/laydateTab.js" type="text/javascript" charset="utf-8"></script>
layui.config({
base: 'js/layui/extends/' //假設(shè)這是你存放拓展模塊的根目錄
}).extend({ //設(shè)定laydateTab模塊別名
laydateTab: 'laydateTab'
}).use(['laydateTab'], function(){
var laydateTab = layui.laydateTab;
laydateTab.render({
elem : '#indate'
});
}); 2. 使用laydate模塊單獨(dú)引入，使用``laydateTab``獲取laydateTab對(duì)象。 laydateTab.render({
elem : '#indate'
});
laydateTab.render({
elem : '#indate' // 綁定觸發(fā)元素
});比較復(fù)雜的綁定配置laydateTab.render({
elem : '#indate', // 綁定觸發(fā)元素
type : ['year', 'month'], //顯示的類型選項(xiàng)卡
title : ['年份', '月份'], // 日期選擇選項(xiàng)卡顯示的標(biāo)題名稱
range : '~', // 開(kāi)啟范圍，使用Array則對(duì)類型區(qū)分使用該參數(shù)
selected : 'month', // 初始化默認(rèn)顯示的選項(xiàng)卡
theme : '#393D49', //主題
// 渲染成功之后回調(diào)
success : function(tabElem, options) {
console.log(tabElem); // 日期選項(xiàng)卡對(duì)應(yīng)的標(biāo)簽元素
console.log(options); // 渲染的參數(shù)
},
// 切換選項(xiàng)卡的回調(diào)
changeTab : function(type, title) {
console.log(type); // 當(dāng)前選擇的類型
console.log(title); // 當(dāng)前選擇的類型標(biāo)題名稱
},
// 選擇完畢的回調(diào), 可參考laydate done回調(diào)
done : function(value, date, endDate) {
console.log(value); // 生成的值(選擇后的值)
console.log(date); // 日期時(shí)間對(duì)象
console.log(date); //結(jié)束的日期時(shí)間對(duì)象
},
// 銷毀選項(xiàng)卡之后的回調(diào)
end : function(elem) {
console.log(elem); // 所綁定的觸發(fā)元素 - elem對(duì)象
}
}); 詳細(xì)介紹請(qǐng)看碼云 https://gitee.com/xumisky/laydate-tab