基于layui的laydate實(shí)現的日期時(shí)間選擇組件選項卡，可以支持多個(gè)日期類(lèi)型切換選擇，且對于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單獨引入|-- 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/' //假設這是你存放拓展模塊的根目錄
}).extend({ //設定laydateTab模塊別名
laydateTab: 'laydateTab'
}).use(['laydateTab'], function(){
var laydateTab = layui.laydateTab;
laydateTab.render({
elem : '#indate'
});
}); 2. 使用laydate模塊單獨引入，使用``laydateTab``獲取laydateTab對象。 laydateTab.render({
elem : '#indate'
});
laydateTab.render({
elem : '#indate' // 綁定觸發(fā)元素
});比較復雜的綁定配置laydateTab.render({
elem : '#indate', // 綁定觸發(fā)元素
type : ['year', 'month'], //顯示的類(lèi)型選項卡
title : ['年份', '月份'], // 日期選擇選項卡顯示的標題名稱(chēng)
range : '~', // 開(kāi)啟范圍，使用Array則對類(lèi)型區分使用該參數
selected : 'month', // 初始化默認顯示的選項卡
theme : '#393D49', //主題
// 渲染成功之后回調
success : function(tabElem, options) {
console.log(tabElem); // 日期選項卡對應的標簽元素
console.log(options); // 渲染的參數
},
// 切換選項卡的回調
changeTab : function(type, title) {
console.log(type); // 當前選擇的類(lèi)型
console.log(title); // 當前選擇的類(lèi)型標題名稱(chēng)
},
// 選擇完畢的回調, 可參考laydate done回調
done : function(value, date, endDate) {
console.log(value); // 生成的值(選擇后的值)
console.log(date); // 日期時(shí)間對象
console.log(date); //結束的日期時(shí)間對象
},
// 銷(xiāo)毀選項卡之后的回調
end : function(elem) {
console.log(elem); // 所綁定的觸發(fā)元素 - elem對象
}
}); 詳細介紹請看碼云 https://gitee.com/xumisky/laydate-tab