layui制作電子日歷記事本代碼



134 532 178



特效描述: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> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 表單 表單美化 表單插件 表單美化插件 浮動菜單 浮動導航 日歷選擇器 時間選擇器 提示框/彈出層 文本框 text文本框 彈出層拖動 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表