快速上手日期插件laydate
Posted myivan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速上手日期插件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>
以上是关于快速上手日期插件laydate的主要内容，如果未能解决你的问题，请参考以下文章