快速上手日期插件laydate

1、laydate

　　这款插件有独立版的，也有作为layui模块的，两种使用方式差不多，就引入有区别而已

<!--这是作为模块使用-->
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>layDate快速使用</title>

  <link rel="stylesheet" href="/static/build/layui.css" media="all">

</head>

<body>

<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->

  <input type="text" class="layui-input" id="test1">

</div>

<script src="/static/build/layui.js"></script>

<script>

layui.use('laydate', function(){

  var laydate = layui.laydate;

  //执行一个laydate实例

  laydate.render({

    elem: '#test1' //指定元素

  });

});

</script>

</body>

</html>

<!--独立使用-->

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>使用 layDate 独立版</title>
</head>
<body>
　　<input type="text" id="test1">

　　<script src="laydate.js"></script>
　　<script>
　　　　//执行一个laydate实例
　　　　laydate.render({
　　　　　　elem: '#test1' //指定元素
　　　　});
　　</script>
</body>
</html>

2、参数说明：

elem：绑定的元素

type：控件选择类型，有year(年）、month（年月）、date(默认值，年月日)、time(时分秒)、datetime(年月日时分秒)

range：true或者范围连接符开启范围选择，也可自定义范围连接符为‘~’或者其他

format ：定义格式yyyy(年，四位数，不足补0)、y（年，任意位数）、MM（月，两位）、M（1位数）、dd、d、HH、H、mm、m、ss、s

value：初始值，必须遵循format定义的格式，如：'2018-08-24'

isInitValue ：初始值填充（配合value使用，默认值为：true）

min/max ：最小/大范围内的日期时间值（

　　如果值是字符串，必须严格遵循日期格式，如果是整数，小于86400000，则表示几天前或几天后；大于86400000，则会将时间戳转化为日期格式。如：最大日期：公元2018年1月1日

）

/日期有效范围只限定在：2017年

laydate.render({

  elem: '#test'

  ,min: '2017-1-1'

  ,max: '2017-12-31'

});

//日期有效范围限定在：过去一周到未来一周

laydate.render({

  elem: '#test'

  ,min: -7 //7天前

  ,max: 7 //7天后

});

//日期时间有效范围的设定:

laydate.render({

  elem: '#test'

  ,type: 'datetime'

  ,min: '2017-8-11 12:30:00'

  ,max: '2017-8-18 12:30:00'

});

//时间有效范围设定在: 上午九点半到下午五点半

laydate.render({

  elem: '#test'

  ,type: 'time'

  ,min: '09:30:00'

  ,max: '17:30:00'

});

trigger ：自定义弹出控件的事件，默认值：focus，如果绑定的元素非输入框，则默认事件为：click

show：直接显示，默认为false。如果是外部事件调用，需要设定 closeStop: '触发的元素'

position ：abolute（绝对定位，始终吸附在绑定元素周围。默认值），fixed（固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。），static（静态定位，控件将直接嵌套在指定容器中。）

zIndex ：层叠顺序，一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。

showBottom ：是否显示底部栏，默认为:true

btns ：工具按钮,默认值：['clear', 'now', 'confirm']

lang ：语言cn、en

theme：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

calendar ：是否显示公历节日，默认false

mark : 标注重要日子

mark: {

'0-10-14': '生日'

,'0-12-31': '跨年' //每年12月31日

,'0-0-10': '工资' //每个月10号

,'2017-8-15': '' //具体日期

,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章

,'2017-8-21': '发布'

}

3、几个触发事件

控件初始打开的回调：

laydate.render({

  elem: '#test'

  ,ready: function(date){

    console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

  }

});

日期时间被切换后的回调

laydate.render({

  elem: '#test'

  ,change: function(value, date, endDate){

    console.log(value); //得到日期生成的值，如：2017-08-18

    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

  }

});

控件选择完毕后的回调

laydate.render({

  elem: '#test'

  ,done: function(value, date, endDate){

    console.log(value); //得到日期生成的值，如：2017-08-18

    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

  }

});

弹出控件提示

laydate.path = '/static/xxx/'; //laydate.js 所在目录

//配置好路径后，再调用

laydate.render(options);

4、完整案例（开始日期和结束日期相互约束）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>laydate</title>

    <!-- 引入css js -->

    <link rel="stylesheet" href="css/layui.css">

    <script src="layui.js"></script>

</head>

<body>      

    <input name="start" id="search-date-start" type="text" readonly  class="int2">至

    <input name="end" id="search-date-end" type="text" readonly  class="int2">

    <script>

        layui.use('laydate', function () {

            var laydate=layui.laydate;

            var today = new Date();

            var todayDate = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate();//今天

            var startDate = laydate.render({

                elem: '#search-date-start',

                max: todayDate,

                done: function(value, date){

                    endDate.config.min ={

                        year:date.year,

                        month:date.month-1, //关键

                        date: date.date,

                    };

                }

            });

            var endDate = laydate.render({

                elem: '#search-date-end',

                max: todayDate,

                done: function(value, date){

                        startDate.config.max ={

                        year:date.year,

                        month:date.month-1, //关键

                        date: date.date,

                    };

                }

            });

        });

    </script>

</body>

</html>