js-实现简单实用响应式日历日程记事本.rar资源-CSDN文库

共32个文件

js：18个

css：5个

gif：3个

版权申诉

120 浏览量 2024-02-07 00:36:47 上传评论收藏 220KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

js-实现简单实用响应式日历日程记事本.rar （32个子文件）

js-实现简单实用响应式日历日程记事本

简单实用响应式日历日程记事本js插件

img

css

date.css 363B

index.html 4KB

layui

layui.js 6KB

font

iconfont.ttf 39KB

iconfont.eot 39KB

iconfont.woff 26KB

css

layui.css 59KB

modules

laydate

default

laydate.css 7KB

code.css 1KB

layer

default

loading-2.gif 2KB

loading-1.gif 701B

loading-0.gif 6KB

icon-ext.png 6KB

layer.css 14KB

icon.png 11KB

lay

modules

layedit.js 12KB

tree.js 3KB

flow.js 2KB

table.js 20KB

form.js 9KB

laydate.js 27KB

rate.js 3KB

laypage.js 4KB

upload.js 7KB

layer.js 22KB

mobile.js 33KB

code.js 1KB

util.js 3KB

laytpl.js 2KB

jquery.js 95KB

element.js 7KB

carousel.js 4KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>简单实用响应式日历日程记事本js插件</title> <meta name="keywords" content="简单实用,响应式,日历日程,记事本,js插件" /> <meta name="description" content="简单实用响应式日历日程记事本js插件代码下载。" /> <meta name="author" content="js代码(www.jsdaima.com)" /> <meta name="copyright" content="js代码(www.jsdaima.com)" /> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="css/date.css"> </head> <body>  <div class="layui-container" style="padding: 15px;"> <div class="layui-row"> <div class="layui-col-md12"> <blockquote class="layui-elem-quote">简单实用日历记事本</blockquote> <div class="layui-inline" id="test-n2" ></div> </div> </div> </div> <script src="layui/layui.js"></script> <script> 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: '<div class="text_box">'+ '<form class="layui-form" action="">'+ '<div class="layui-form-item layui-form-text">'+ ' <textarea id="text_book" placeholder="请输入内容" class="layui-textarea"></textarea>'+ '</div>'+ '</form>'+ '</div>' ,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); } });</script> </body> </html>

评论收藏

内容反馈

版权申诉