简单实用的layui日历标注记事本代码

来源:https://www.sucaihuo.com/js/3731.html 2018-06-06 12:00浏览(5513) 收藏

一款简单实用的layui日历标注记事本代码,响应式自适应电脑、平板跟手机移动端,可以在日历上设置每日事项标注记录,支持撤销、添加、修改标注记录。
简单实用的layui日历标注记事本代码
分类:日期时间 > 日历 难易:中级
查看演示 下载资源 下载积分: 20 积分

js代码

<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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2