一款基于layui框架的一款简单的日历日期记事本。该插件完全由layui前端框架二次开发完成,基于独立插件laydate5.0。不考虑页面样式的同学们也可以去官方下载独立的laydate插件。
使用方法
在页面引入需要用到的layui.js文件
<script src="layui/layui.js"></script>
日历插件调用
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! }); }
编辑标注
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); }