devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Layui时间日期的使用_layui 日期选择框适应手机端

作者：我家自动化 | 2024-02-16 23:11:36

赞

踩

layui 日期选择框适应手机端

Layui时间日期的使用

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

页面

	<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273

3.实例展示

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/97627?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号