記錄layui使用之laydate

laydate官方文檔 https://www.layui.com/doc/modules/laydate.html
記錄layui框架laydate的使用

日期範圍

<div class="layui-inline">
					<label class="layui-form-label">日期範圍</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test6" th:field="*{sdate}">
					</div>
</div>

對應的js

	<script src="/lib/layuiadmin/layui/lay/modules/laydate.js"></script>//引入laydate
	var data=new Date();//獲取當前日期
    var monthCurr=data.getMonth()+1;
    var yearCurr=data.getFullYear();
    var monLength=monthCurr.toString().length;
    var dateCurr = data.getDate();
    var dateLength=dateCurr.toString().length;
    
    if(monLength==1){
       var monthCurr1="0"+monthCurr
    }else{
       var monthCurr1=monthCurr;
    }
    if(dateLength==1){
        var dateCurr1="0"+dateCurr
     }else{
        var dateCurr1=dateCurr;
     }
     
	var laydate = layui.laydate;
 	laydate.render({
	    elem: '#test6'
	    ,range: '~'//一定要設置，要不有時候會報錯
	    ,type: 'date'
	    ,format: 'yyyy-MM-dd'
	    ,trigger:'click'
	    /* ,value:""+yearCurr+"-"+monthCurr1+"-"+dateCurr1+" ~ "+yearCurr+"-"+monthCurr1+"-"+dateCurr1+"" */
	    ,change: function(value, date, endDate){
	    	
	     }
		,done: function(value, date, endDate){
			$('#test6').val([[${commonBean.sdate}]]);
        }  
	  }); 

彈出層使用日期控件

彈出層使用時間控件時需要重新渲染

$('#addTime').on('click', function() {
		var form = layui.form;
		var laydate = layui.laydate;
		layer.open({
			type : 1,
			title : "高峯低谷設置",
			closeBtn : 0,
			area : [ '40%', '45%' ],
			anim : 5,
			shadeClose : false,
			closeBtn : 1,
			content : $("#addOne"),
			skin : 'layui-layer-dialog-open',
			success : function(layero, index) {//渲染
				laydate.render({
					elem : '#stime',
					type : 'time',
					format : 'HH:mm',//對時間進行了格式化，顯示時分
					trigger:'click'//一定要設置這個，不然有時候會出現一閃而過，或者彈不出來的情況
				})
				laydate.render({
					elem : '#etime',
					type : 'time',
					format : 'HH:mm',
					trigger:'click'
				})
				form.render();
			},
			cancel : function(index, layero) {
				//if (confirm('確定要關閉麼')) { //只有當點擊confirm框的確定時，該層纔會關閉
					layer.close(index);
				//}
				return false;
			},
			end : function() {
				$("#addOne").css("display", "none");
			}
		})
	})