layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

基于layui的laydate實(shí)現(xiàn)的日期時(shí)間選擇組件選項(xiàng)卡，可以支持多個(gè)日期類型切換選擇，且對(duì)于laydate的配置全部支持。

更新：2020-12-22 創(chuàng)建：2021-1-15

文檔


詳細(xì)文檔請(qǐng)看 https://gitee.com/xumisky/laydate-tab
例子請(qǐng)看 https://xumisky.gitee.io/laydate-tab
安裝教程
依賴laydate，所以必須引用laydate!
插件目錄一定為以下結(jié)構(gòu)：
|-- extends  
   |-- css
      |-- laydateTab.css
   |-- laydateTab.js
1. 使用layui模塊化引入
項(xiàng)目目錄結(jié)構(gòu)假設(shè)為：
|-- project
  |-- js
     |-- layui
       |-- extends
          |-- css
	     |-- laydateTab.css
          |-- laydateTab.js
       |-- css
          |-- layui.css
       |-- lay
	     ...
          |-- font
	    ...
          |-- images
	    ...
       |-- layui.all.js
       |-- layui.js
則引用方式為：
1. 先加載layui相關(guān)的js、css
2. 模塊加載代碼如下 
layui.config({  
	base: 'js/layui/extends/'
}).extend({ 
	laydateTab: 'laydateTab' 
}).use(['laydateTab'], function(){
	var laydateTab = layui.laydateTab;
});
2. 使用laydate單獨(dú)引入

項(xiàng)目目錄結(jié)構(gòu)假設(shè)為：
|-- 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>
使用說明
獲取laydateTab對(duì)象
1. 使用layui模塊化引入，使用``layui.laydateTab``獲取laydateTab對(duì)象。 

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'
});
3. 具體例子參考 https://gitee.com/xumisky/laydate-tab/tree/master/examples/ 文件夾里面。
最簡(jiǎn)單的綁定配置
laydateTab.render({
   elem : '#indate' // 綁定觸發(fā)元素
});
比較復(fù)雜的綁定配置
laydateTab.render({
   elem : '#indate', // 綁定觸發(fā)元素
   type : ['year', 'month'], //顯示的類型選項(xiàng)卡
   title : ['年份', '月份'], // 日期選擇選項(xiàng)卡顯示的標(biāo)題名稱
   range : '~', // 開啟范圍，使用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

下載

立即下載 去碼云下載 去 GitHub 下載
該擴(kuò)展組件由第三方用戶主動(dòng)投遞，并由其自身進(jìn)行維護(hù)，本站僅做收集。