快速上手日期插件laydate

时间:2021-12-09 15:07:41

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

themedefault(默认简约)、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、完整案例(开始日期和结束日期相互约束)

快速上手日期插件laydate

<!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>