laydateTab 日期时间选择Tab laydateTab - layui 第三方组件平台

文档

详细文档请看 https://gitee.com/xumisky/laydate-tab
例子请看 https://xumisky.gitee.io/laydate-tab
安装教程

依赖laydate，所以必须引用laydate!
插件目录一定为以下结构：

|-- extends  
   |-- css
      |-- laydateTab.css
   |-- laydateTab.js

1. 使用layui模块化引入
项目目录结构假设为：

|-- project
  |-- js
     |-- layui
       |-- extends
          |-- css
	     |-- laydateTab.css
          |-- laydateTab.js
       |-- css
          |-- layui.css
       |-- lay
	     ...
          |-- font
	    ...
          |-- images
	    ...
       |-- layui.all.js
       |-- layui.js

则引用方式为：
1. 先加载layui相关的js、css
2. 模块加载代码如下

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>
<script src="js/extends/laydateTab.js" type="text/javascript" charset="utf-8"></script>

使用说明
获取laydateTab对象

1. 使用layui模块化引入，使用``layui.laydateTab``获取laydateTab对象。

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'
});

3. 具体例子参考 https://gitee.com/xumisky/laydate-tab/tree/master/examples/ 文件夹里面。
最简单的绑定配置

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); //结束的日期时间对象
   },
   // 销毁选项卡之后的回调
   end : function(elem) {
       console.log(elem); // 所绑定的触发元素 - elem对象 
   }
});

详细介绍请看码云 https://gitee.com/xumisky/laydate-tab

下载

立即下载去码云下载去 GitHub 下载

该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。