Layui时间日期的使用

最新推荐文章于 2023-09-10 21:06:05 发布

冒牌程序员的成长

最新推荐文章于 2023-09-10 21:06:05 发布

阅读量516

点赞数

分类专栏： Layui的使用

本文链接：https://blog.csdn.net/qq_39736671/article/details/103351970

版权

Layui的使用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Layui时间日期的使用

1.页面
2.js
3.实例展示

1.页面

首先引入layui的css和js文件：

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/span.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/src/css/layui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/cac-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/src/layui.js"></script>
<style type="text/css">
	.layui-form-checkbox[lay-skin="primary"]{
		width: 90px;
	}
	/* 时间范围只显示时分----start */
  .layui-laydate-content>.layui-laydate-list {
           padding-bottom: 0px;
           overflow: hidden;
    }
  .layui-laydate-content>.layui-laydate-list>li{
           width:50%
    }
    /* 时间范围只显示时分----end */
</style>

页面

	<form class="layui-form">
		<div class="layui-row">
			<div class="layui-form layui-inline">
				<div class="layui-inline layui-form-item">
					<label class="layui-form-label"><span class="star">*</span>时段名称：</label>
					<div class="layui-input-inline">
						<input class="layui-input" id="sdmc" lay-verify="sdmc" width="150px" placeholder="请输入时段名称" autocomplete="off" maxLength="200">
					</div>
				</div>
			</div>
		</div>
		  <div class="layui-form-item">
	     	<div class="layui-form-inline">
	     		<label class="layui-form-label"><span class="star">*</span>时间范围：</label>
					<div id="timeAdd">
						<div class="layui-input-inline">
							<input type="text" class="layui-input datetime" id="sdfw" name='sdfw' lay-verify="required" width="150px" placeholder="开始时间 - 结束时间" autocomplete="off">
						</div>
	      			</div>
			      	<div class="layui-inline layui-form-item right">
						<button type="button" id="addBtn" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
						<button id="deleteBtn" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
					</div>
   	 		</div>
   	 	</div>
		<div class="layui-row">
			<div class="layui-form layui-inline">
				<div class="layui-inline layui-form-item">
					<label class="layui-form-label"><span class="star">*</span>时段周期：</label>
					 <div class="layui-input-block">
						<input type="radio" lay-filter="testRadio" class="layui-input" name="sdzq" value="0" title="每天" checked="checked" >
					</div>
					 <div class="layui-input-block">
						<input type="radio" class="layui-input" name="sdzq" value="1" title="每周" lay-filter="testRadio">
						<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="一" title="周一" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="二" title="周二" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="三" title="周三" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="四" title="周四" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="五" title="周五" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="六" title="周六" disabled="true">
      					<input type="checkbox" name="sdzqWeek" lay-skin="primary" value="日" title="周日" disabled="true">
					</div>
					 <div class="layui-input-block" id="mon">
						<input type="radio" class="layui-input" name="sdzq" value="2" title="每月" lay-filter="testRadio">
					</div>
				</div>
			</div>
		</div>
		
		<div class="layui-inline layui-form-item" style="margin-left: 80%;margin-top:0px;">
	  		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">保存</button>
			<button class="layui-btn timeConfigInfoCancel" data-type="cancel">取消</button>
		</div>
	</form>

2.js

<script type="text/javascript">
	/* 回显修改参数 */
	var id;
	var cc=[];
	var dataIntArr=[];
	var m="";
	var p=0;
	$(document).ready(function(){
		var resultData ='${data}';
		resultData = JSON.parse(resultData);
		if(null!=resultData){
			$("#sdmc").val(resultData.sdmc);
			$("#sdmc").attr("readOnly",true);
			id=resultData.id;
			var serviceArr = resultData.sdzq;
			if(serviceArr==0){
				 $("input:radio[value='"+serviceArr+"']").attr("checked",true);
				 $("input[type=checkbox]").each(function(){
	                    $(this).attr("disabled",true);
	                });
			}
			if(serviceArr==1){
				 $("input:radio[value='"+serviceArr+"']").attr("checked",true);
				 $("input[type=checkbox][name='sdzqWeek']").each(function(){
	                    $(this).attr("disabled",false);
	                });
			}
			if(serviceArr==2){
				 $("input:radio[value='"+serviceArr+"']").attr("checked",true);
				 m=serviceArr;
			}
			if(serviceArr.length>1){
				var arr=serviceArr.split("-");
				if(arr[0]==1){
				 	$("input:radio[value='"+arr[0]+"']").attr("checked",true);
				 	 $("input[type=checkbox][name='sdzqMon']").each(function(){
		                    $(this).attr("disabled",true);
		                });
				 	$("input[type=checkbox][name='sdzqWeek']").each(function(){
	                    $(this).attr("disabled",false);
	                });
				 } 
				if(arr[0]==2){
				 	$("input:radio[value='"+arr[0]+"']").attr("checked",true);
				 	 $("input[type=checkbox][name='sdzqWeek']").each(function(){
		                    $(this).attr("disabled",true);
		                });
				 } 
				 m=arr[0];
				 cc=arr[1].split(",");
				for (var i = 0; i < cc.length; i++) {
		   			 $("input:checkbox[value='"+cc[i]+"']").attr("checked",true);
				}
			}
			var ff=resultData.sdfw.split(",");
			if(ff.length==1){
				$("#sdfw").val(resultData.sdfw);
			}else{
				$("#sdfw").val(ff[0]);
				for (var i = 0; i < ff.length; i++) {
					p++;
					html2 = "<div id='"+p+"' class='layui-input-inline'>"+"<input type='text' name='sdfw' class='layui-input datetime' value='"+ff[i+1]+"' placeholder='开始时间 - 结束时间'>"+"</div>";
					$("#timeAdd").append(html2);
				    timeAdd();
				}
			}
		}
	}); 
	
  var TimeConfigInfo={};
  layui.use(['form','transfer','layer','util','laydate'], function(){
	  var $ = layui.$;
	  form = layui.form;
	  transfer = layui.transfer;
	  layer = layui.layer;
	  util = layui.util;
	  var laydate = layui.laydate;
	  
	  form.verify({
		  sdmc : function(value) {
				var bzMaxLength = 200;
				if(value.trim()==""){
					return "时段名称不能为空！";
				}
				if(strLengthValid(value,bzMaxLength)){
		        	return '时段名称不能超过200个字符，请修改！';
		      	}
				var datas={sdmc: value.trim(),id:id};
				var message = '';
				$.ajax({
					  type:"POST",
					  url:"${pageContext.request.contextPath}/timeConfigInfo/findSdmc",
					  async: false,
					  contentType:'application/json;charset=UTF-8',
					  data:JSON.stringify(datas),
					  dataType:'json',
					  success:function(data){
						  if(data){
						  }else{
						   message ="时段名称已存在，请重新输入！"
						  }
					  }
				});
				if (message !== '') 
				      return message;
			}
		});
	  //时段范围
	  function timeAdd(){
	         lay('.datetime').each(function() {
	             laydate.render({
	                 elem : this
	                 ,type: 'time'
	                 ,trigger : 'click'
	                 ,format:'HH:mm'
	                 ,range: true
	             });
	         });
	     }
	  timeAdd();
	  //添加时间周期_每月
	  function monAdd(cc,m){
		 var html3='<br>';
		 cc.forEach(function(data,index,arr){  
		        dataIntArr.push(+data);  
		    })
		    if(m!=2){
		    	for (var i = 1; i < 32; i++) {
				 	html3 += '<input type="checkbox" disabled=true name="sdzqMon" lay-skin="primary" value="'+i+'" title="'+i+'">';
				 	if(i%5==0){
				 		html3+='<br>';
				 	}
				}
		    }else{
			  for (var i = 1; i < 32; i++) {
				  if(dataIntArr.indexOf(i)!=(-1)){
			 		html3 += '<input type="checkbox" checked=true name="sdzqMon" lay-skin="primary" value="'+i+'" title="'+i+'">';
				  }else{
			 		html3 += '<input type="checkbox"  name="sdzqMon" lay-skin="primary" value="'+i+'" title="'+i+'">';
				  }
			 	if(i%5==0){
			 		html3+='<br>';
			 	}
			}
		    }
		  $("#mon").append(html3);
		  form.render('checkbox');
	  }
	  //时段周期_每月
	  monAdd(cc,m);
	  
	  //监听radio事件
	  form.on('radio(testRadio)', function(data){
	    	if(data.value == '0'){
	    		$("input[type=checkbox]").each(function(){
		    		$(this).prop("checked",false);
		    		$(this).attr("disabled",true);
                });
	    	}else if(data.value == '1'){
	    		$("input[type=checkbox][name='sdzqMon']").each(function(){
                    $(this).prop("checked",false);
                    $(this).attr("disabled",true);
                });
	    		$("input[type=checkbox][name='sdzqWeek']").each(function(){
                    $(this).attr("disabled",false);
                });
	    	}else{
	    		$("input[type=checkbox][name='sdzqWeek']").each(function(){
                    $(this).prop("checked",false);
                    $(this).attr("disabled",true);
                });
	    		$("input[type=checkbox][name='sdzqMon']").each(function(){
                    $(this).attr("disabled",false);
                });
	    	}
	    	layui.form.render();
		});
	  //保存
	  form.on('submit(save)',function(data) {
		  TimeConfigInfo.id=id;
		  TimeConfigInfo.sdmc=$("#sdmc").val();
		  var sdfw_url =[];
	       $("input[name='sdfw']").each(function(){
	    	   if($(this).val()!=null&&$(this).val()!=""){
	    	   	sdfw_url.push($(this).val());
	    	   }
	       })
     	 	var sdfw=sdfw_url.join(",");
	       if(sdfw_url.length!=1){
	       		TimeConfigInfo.sdfw=sdfw.substring(0,sdfw.length);
	       }else{
	    		TimeConfigInfo.sdfw=sdfw;  
	       }
		  var radioSel=$("input:radio[name='sdzq']:checked").val();
		  if(radioSel=='1'){
            var arr1 = new Array();
            $("input:checkbox[name='sdzqWeek']:checked").each(function(i){
                arr1[i] = $(this).val();
            });
            var sdzqWeekStr=arr1.join(",");
			if(sdzqWeekStr==null||sdzqWeekStr==''){
				TimeConfigInfo.sdzq= radioSel;
			}else{
				TimeConfigInfo.sdzq= radioSel+"-"+ sdzqWeekStr;
			}
		  }else if(radioSel=='2'){
			  var arr2 = new Array();
			 $("input:checkbox[name='sdzqMon']:checked").each(function(i){
			     arr2[i] = $(this).val();
			  });
			 var sdzqMonStr=arr2.join(",");
			 if(sdzqMonStr==null||sdzqMonStr==''){
				TimeConfigInfo.sdzq= radioSel;
			 }else{
				TimeConfigInfo.sdzq= radioSel+"-"+ sdzqMonStr;
			 }
		  }else{
			  TimeConfigInfo.sdzq= radioSel; 
		  }
		  TimeConfigInfo.sfsc=0;
		  addData(TimeConfigInfo);
		  return false;
		});
		function addData(TimeConfigInfo){
			$.ajax({
				type : 'POST',
				dataType : "json",
				data : TimeConfigInfo,
				url : "${pageContext.request.contextPath}/timeConfigInfo/timeConfigInfoSave",
				success : function(result) {
					var resultContent = result.msg;
					var resultSuccess = result.success;
					layer.open({
						content : resultContent,
						btn : [ '确定' ],
						yes : function(index,layero) {
							if (true == resultSuccess) {
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
								parent.layui.table.reload('timeConfigInfoTableReload',{
									page : {
										curr : 1
									}
								});
							}
							layer.close(index);
						}
					});
				}
			});
		} 
	  //取消
	  $('.timeConfigInfoCancel').on('click',function() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
	  
	  //添加时间范围框
	  $('#addBtn').on('click',function(){
			p++;
		 	html2 = "<div id='"+p+"' class='layui-input-inline'>"+"<input type='text' name='sdfw' class='layui-input datetime' placeholder='开始时间 - 结束时间'>"+"</div>";
			$("#timeAdd").append(html2);
		    timeAdd();
	  });
	  //删除时间范围框
	  $('#deleteBtn').on('click',function(){
		   if(p!=0){ 
			$("#"+p+"").remove();
		   	p--;
		  }
	  });
	});
  </script>

3.实例展示

在这里插入图片描述

冒牌程序员的成长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui时间日期的使用

Layui时间日期的使用1.页面2.js3.实例展示1.页面首先引入layui的css和js文件：<link rel="stylesheet" href="${pageContext.request.contextPath}/css/span.css"><link rel="stylesheet" href="${pageContext.request.contextPa...
复制链接

扫一扫