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>