一款简单实用的layui日历标注记事本代码，响应式自适应电脑、平板跟手机移动端，可以在日历上设置每日事项标注记录，支持撤销、添加、修改标注记录。
查看演示
下载资源：
52
次 下载资源
下载积分：
20
积分
js代码
layui.use(['layer', 'form','jquery','laydate'], function() {
var layer = layui.layer,
$ = layui.jquery,
laydate = layui.laydate,
form = layui.form;
//定义json
var data={};
var new_date = new Date();
loding_date(new_date ,data);
//日历插件调用方法
function loding_date(date_value,data){
laydate.render({
elem: '#test-n2'
,type: 'date'
,theme: 'grid'
,max: '2099-06-16 23:59:59'
,position: 'static'
,range: false
,value:date_value
,calendar: true
,btns:false
,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)才会返回。对象成员同上。
//layer.msg(value)
//调用弹出层方法
date_chose(value,data);
}
, mark:data//重要json！
});
}
//获取隐藏的弹出层内容
var date_choebox = $('.date_box').html();
//定义弹出层方法
function date_chose(obj_date,data){
var index = layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
title:'添加记录',
area: ['400px', 'auto'], //宽高
btn:['确定','撤销','取消'],
content: '
'
'+'
' '+
'
'
'+'
,success:function(){
$('#text_book').val(data[obj_date])
}
,yes:function (){
//调用添加/编辑标注方法
if($('#text_book').val()!=''){
chose_moban(obj_date,data);
layer.close(index);
}else{
layer.msg('不能为空', {icon: 2});
}
},btn2:function (){
chexiao(obj_date,data);
}
});
}
//定义添加/编辑标注方法
function chose_moban(obj_date,markJson){
//获取弹出层val
var chose_moban_val = $('#text_book').val();
$('#test-n2').html('');//重要！由于插件是嵌套指定容器，再次调用前需要清空原日历控件
//添加属性
markJson[obj_date] = chose_moban_val;
console.log(JSON.stringify(markJson));
//再次调用日历控件，
loding_date(obj_date,markJson);//重要！，再标注一个日期后会刷新当前日期变为初始值，所以必须调用当前选定日期。
}
//撤销选择
function chexiao(obj_date,markJson){
//删除指定日期标注
delete markJson[obj_date];
console.log(JSON.stringify(markJson));
//原理同添加一致
$('#test-n2').html('');
loding_date(obj_date,markJson);
}
});
