直接上代碼
<!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': '預(yù)發(fā)' //如果為空字符，則默認(rèn)顯示數(shù)字+徽章
,
'2019-12-21': '發(fā)布'
},
done: function(value, date) {
if(date.year === 2019 && date.month === 12 && date.date === 9) { //點(diǎn)擊2017年8月15日隅要，彈出提示語(yǔ)
ins1.hint('議程開(kāi)始');
}
}
});
</script>
</html>
tip:
1,layui的日期和時(shí)間組件, 有獨(dú)立的模塊 laydate, 可以直接下載,引入(如果只是實(shí)現(xiàn)日歷功能,直接使用模塊,更方便,整潔)
2, 使用<div class="layui-inline" id="test-n1"></div>標(biāo)簽, 不使用input標(biāo)簽, 可以直接讓日歷組件直接顯示, 而不是input聚焦之后顯示
3, 提示"ins1"未定義， 需要在laydate.render實(shí)例化的時(shí)候， 賦值給ins1
var ins1 = laydate.render({ });
4, calendar: true, 屬性代表搞乏，展示公歷的節(jié)假日（例如圣誕帅矗，元旦蔓钟。。奖慌。）
theme: 'molv', 屬性代表，日歷的主題是‘墨綠’松靡，也可以自定義（傳16進(jìn)制的值就好简僧，例如：theme: '#2F8BD6'）
mark：{} 屬性代表， 在日歷上所標(biāo)注的點(diǎn)雕欺，主要是提示作用岛马， done: function（）{} 函數(shù)，就是在點(diǎn)擊標(biāo)注點(diǎn)之后屠列，觸發(fā)的一個(gè)事件
