layui 实现日历插件
2019-12-05 本文已影响0人
苦茶_12138
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-inline" id="test-n1"></div>
</body>
<script type="text/javascript">
var ins1 = laydate.render({
elem: '#test-n1',
position: 'static',
calendar: true,
theme: 'molv',
mark: {
'2019-12-09': '预发' //如果为空字符，则默认显示数字+徽章
,
'2019-12-21': '发布'
},
done: function(value, date) {
if(date.year === 2019 && date.month === 12 && date.date === 9) { //点击2017年8月15日，弹出提示语
ins1.hint('议程开始');
}
}
});
</script>
</html>
tip:
1,layui的日期和时间组件, 有独立的模块 laydate, 可以直接下载,引入(如果只是实现日历功能,直接使用模块,更方便,整洁)
2, 使用<div class="layui-inline" id="test-n1"></div>标签, 不使用input标签, 可以直接让日历组件直接显示, 而不是input聚焦之后显示
3, 提示"ins1"未定义， 需要在laydate.render实例化的时候， 赋值给ins1
var ins1 = laydate.render({ });
4, calendar: true, 属性代表，展示公历的节假日（例如圣诞，元旦。。。）
theme: 'molv', 属性代表，日历的主题是‘墨绿’，也可以自定义（传16进制的值就好，例如：theme: '#2F8BD6'）
mark：{} 属性代表， 在日历上所标注的点，主要是提示作用， done: function（）{} 函数，就是在点击标注点之后，触发的一个事件
