layui制作电子日历记事本代码



225 898 300



特效描述:layui制作 电子日历 记事本代码,layui日历每日事项记录 简单的电子日历记事本代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/date.css">

2. 引入JS

<script src="layui/layui.js"></script>

3. HTML代码

<!-- 你的HTML代码 -->
<div class="layui-container" style="padding: 15px;">  
  <div class="layui-row">
    <div class="layui-col-md12">
    <blockquote class="layui-elem-quote">基于layui的日历记事本</blockquote>
    <div class="layui-inline" id="test-n2" ></div>
    </div>
  </div>
</div>
<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> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 图片拖动 浮动导航菜单 右键菜单 时间轴 图片头像上传 文字拖动 图片广告 文字提示框 日历选择器 文件上传 拖动排序 对联广告 提示框/弹出层 时间日期插件 文本框 layer 下拉框 弹出层拖动 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 拖动拽动 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 切换按钮 日历日期时间 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到