layui laydate 日历控件的实现
程序员文章站
2024-03-24 12:16:34
...
前言
最近，工作中需要开发一个日历控件，找了一圈，发现layui的日期控件不错，学的时候就记录一下，希望大家可以一起进步。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日历</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<style>
body{padding: 20px;}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
.demo-footer a{padding: 0 5px; color: #01AAED;}
</style>
</head>
<body>
<div id="calendar"></div>
<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script>
//执行一个laydate实例
var ins1 = laydate.render({
elem: '#calendar', //指定元素 选择器 DOM对象
type: 'date', //控件选择类型 年选择器-year 年月选择器-month 日期选择器-date 时间选择器-time 日期时间选择器-datatime
range: false, //开启左右面板范围选择 开启-true 关闭-false 注：通过 range:'`' 来自定义分割符
formart: 'yyyy-MM-dd', //自定义格式 年份-YYYY 年份-y 月份-MM 月份-M 日期-dd 日期-d 小时-HH 小时-H 分钟-mm 分钟-m 秒数-ss 秒数-s 注：通过以上可任意组合
value: '2020-07-07', //初始值 支持传入符合format参数设定的日期格式字符，或者 new Date()
isInitValue: true, //初始值填充 是-true 否-false
min: '2017-01-01', //最小范围内日期时间值 设定有限范围内的日期或时间值，不在范围内的将不可选中
max: '2022-08-30', //最大范围内日期时间值 设定有限范围内的日期或时间值，不在范围内的将不可选中
trigger: 'click', //采用click弹出 默认值：focus，如果绑定的元素非输入框，则默认事件为：click
show: true, //默认显示 是-true 否-false
position: 'static', //定位方式 绝对定位-abolute 固定定位-fixed 静态定位-static
zIndex: 9999999, //层叠顺序 一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。
showBottom: false, //是否显示底部栏 是-true 否-false
btns: ['clear', 'confirm'], //工具按钮 右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm
lang: 'cn', //语言 中文版-cn 国际版-en
theme: 'default', //主题 theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
calendar: true, //是否显示公历节日 我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。
mark: {'2020-7-7':'你好'}, //标注重要的日子 calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子
done: function(value, date){
if(date.year === 2020 && date.month === 7 && date.date === 7){ //点击2017年8月15日，弹出提示语
ins1.hint('因为公司需要，来学习一下。');
}
},
ready: function(date){
console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
},
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）才会返回。对象成员同上。
},
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）才会返回。对象成员同上。
},
change: function(value, date, endDate){
ins1.hint(value); //在控件上弹出value值
}
});
</script>
</body>
</html>
源码包
源码包资源自行去，我的博客中下载，不需要积分。