layui文本框实现选择起始时间和结束时间

喜欢ヅ旅行 2022-05-08 21:25 428阅读 0赞

首先要调用layui时间插件必须下载layui.js文件，这个可以在官网去下载的([https://www.layui.com/][https_www.layui.com])，我这个功能是可以选择当前时间的前一天，或者后一小时的时间，这个根据具体需求可以修改的：

如下图所示：

![70][]

html代码：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    
    	<body>
    		<input type="text" id="text1" datatype='ddd1' value="2018-9-2 18:43:30" />
    		<input type="text" id="text2" datatype='ddd2' value="2018-9-2 18:43:30" />
    
    		<input type="text" id="text3" datatype='ddd3' />
    		<input type="text" id="text4" datatype='ddd4' />
    	</body>
    
    </html>

js代码：（代码中写有注释，大家可以看看，有不懂的可以问我）

<script src="../demo/js/jquery-1.11.3.js"></script>
    <script src="layui.js"></script>
    <script>
    	timeshowtwo('#text1', '#text2');
    	timeshowtwo('#text3','#text4');
    	//timeshowtwo('#text4', '#text3');
    
    	function timeshowtwo(t1, t2) {
    		layui.use('laydate', function() {
    			var min = '1440';//获取多少分钟后的时间
    			var laydate = layui.laydate;
    			var currentime = frontOneHour('yyyy-MM-dd hh:mm:ss') //当前时间格式化
    			//第一个框的时间
    			var oneTime = beforeTime(currentime,60)//获取当前时间前一小时的时间
    			var twoTime = "";
    			//常规用法
    			laydate.render({
    				elem: t1,
    				calendar: true,//显示公历节日
    				trigger: 'click',
    				type: 'datetime',
    				value: new Date(),
    				format: 'yyyy-M-d H:m:s',
    				done: function(value, date) {
    					var datatype=$(t1).attr('datatype');
                        if(datatype=='ddd1'){
                            console.log(datatype+'第1个框');
                            //min=$('jjkkk')
                            //获取第一个时间框下拉分钟的值
                            // if(parseInt(min) > 1440) {
                            //     //让第一个下拉框不能选中
                            // }
                        }else if(datatype=='ddd3'){
                            console.log(datatype+'第3个框');
                            //获取第二个时间框下拉分钟的值
                        }else if(datatype=='ddd5'){
                            console.log(datatype+'第5个框');
                            //获取第二个时间框下拉分钟的值
                        }
                        twoTime=afterTime(value, min);
    					laydate.render({
    						elem: t2,
    						calendar: true,
    						type: 'datetime',
    						value: twoTime,//
    						format: 'yyyy-M-d H:m:s',
    					});
    
    				}
    			});
    			//默认1小时之后的时间
    			laydate.render({
    				elem: t2,
    				type: 'datetime',
    				value: beforeTime(currentime, 60),
    				format: 'yyyy-M-d H:m:s',
    				 done: function(value, date) {
                        var datatype=$(t2).attr('datatype');
                        if(datatype=='ddd2'){
                            console.log(datatype+'第2个框');
                            //min=$('jjkkk')
                            //获取第一个时间框下拉分钟的值
                            // if(parseInt(min) > 1440) {
                            //     //让第一个下拉框不能选中
                            // }
                        }else if(datatype=='ddd4'){
                            console.log(datatype+'第4个框');
                            //获取第二个时间框下拉分钟的值
                        }else if(datatype=='ddd6'){
                            console.log(datatype+'第6个框');
                            //获取第二个时间框下拉分钟的值
                        }
                        oneTime=beforeTime(value, min);
                        laydate.render({
                            elem: t1,
                            calendar: true,
                            type: 'datetime',
                            value: oneTime,
                            format: 'yyyy-M-d H:m:s'
    
                        });
                    }
    			});
    
    		});
    
    	}
    
    	
    
    	function frontOneHour(fmt) {
    		var currentTime = new Date(new Date().getTime())
    		//		console.log(currentTime) // Wed Jun 20 2018 16:12:12 GMT+0800 (中国标准时间)
    		var o = {
    			'M+': currentTime.getMonth() + 1, // 月份
    			'd+': currentTime.getDate(), // 日
    			'h+': currentTime.getHours(), // 小时
    			'm+': currentTime.getMinutes(), // 分
    			's+': currentTime.getSeconds(), // 秒
    			'q+': Math.floor((currentTime.getMonth() + 3) / 3), // 季度
    			'S': currentTime.getMilliseconds() // 毫秒
    		}
    		if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (currentTime.getFullYear() + '').substr(4 - RegExp.$1.length))
    		for(var k in o) {
    			if(new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    		}
    		return fmt;
    	}
    
    	//获取选择时间之后多少分钟的时间
    	function afterTime(value, t) {
    		var date = new Date(value);
    		var seperator1 = "-";
    		var seperator2 = ":";
    		//前十分钟时间
    		var minutes = parseInt(t);
    
    		var interTimes = minutes * 60 * 1000;
    
    		var interTimes = parseInt(interTimes);
    		date = new Date(Date.parse(date) + interTimes);
    
    		var month = date.getMonth() + 1;
    		var strDate = date.getDate();
    		var hour = date.getHours();
    		var minutes = date.getMinutes();
    		if(month >= 1 && month <= 9) {
    			month = "0" + month;
    		}
    		if(strDate >= 0 && strDate <= 9) {
    			strDate = "0" + strDate;
    		}
    		if(hour >= 0 && hour <= 9) {
    			hour = "0" + hour;
    		}
    		if(minutes >= 0 && minutes <= 9) {
    			minutes = "0" + minutes;
    		}
    		var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
    			" " + hour + seperator2 + minutes +
    			seperator2 + date.getSeconds();
    		return currentdate;
    	}
    
    	//获取选择时间之前多少分钟的时间
    	function beforeTime(value, t) {
    		var date = new Date(value);
    		var seperator1 = "-";
    		var seperator2 = ":";
    		//前十分钟时间
    		var minutes = parseInt(t);
    
    		var interTimes = minutes * 60 * 1000;
    
    		var interTimes = parseInt(interTimes);
    		date = new Date(Date.parse(date) - interTimes);
    
    		var month = date.getMonth() + 1;
    		var strDate = date.getDate();
    		var hour = date.getHours();
    		var minutes = date.getMinutes();
    		if(month >= 1 && month <= 9) {
    			month = "0" + month;
    		}
    		if(strDate >= 0 && strDate <= 9) {
    			strDate = "0" + strDate;
    		}
    		if(hour >= 0 && hour <= 9) {
    			hour = "0" + hour;
    		}
    		if(minutes >= 0 && minutes <= 9) {
    			minutes = "0" + minutes;
    		}
    		var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
    			" " + hour + seperator2 + minutes +
    			seperator2 + date.getSeconds();
    		return currentdate;
    	}
    </script>

[https_www.layui.com]: https://www.layui.com/
[70]: /images/20220509/6ca30929993442889c835d3643b32662.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关用jquery写一个时间选择器要求开始时间小于结束时间

jQuery 是一个流行的 JavaScript 库，可以用来简化 HTML DOM 的操作。如果你想用 jQuery 写一个时间选择器，可以这样做： 1. 在 HTML

约定不等于承诺〃/ 2024年03月25日 08:29/ 0 赞/ 83 阅读

相关 vue element-ui （DatePicker)日期选择器获取开始时间和结束时间

<el-date-picker v-model="formData.createTime" type="

川长思鸟来/ 2023年06月29日 05:42/ 0 赞/ 31 阅读

相关 Vue Mint-UI Datetime picker 中的起始时间和结束时间

Vue Mint-UI Datetime picker 中的起始时间和结束时间 Datetime picker 效果 1、官网效果 ![img][] 官网上

た入场券/ 2023年02月21日 12:59/ 0 赞/ 15 阅读

相关 layui选择日期时间段,获取开始时间和结束时间

layui.laydate.render({ elem: 'date', type: 'date',

比眉伴天荒/ 2023年02月19日 03:29/ 0 赞/ 33 阅读

相关 Java获取当天的起始时间和结束时间

import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut

不念不忘少年蓝@/ 2022年12月14日 15:54/ 0 赞/ 186 阅读

相关 layui组件--选择时间文本框

layui组件–选择时间文本框通过使用layui框架，创建一个起始时间和终止时间都有的时间选择的组件。 <!DOCTYPE html> <html>

系统管理员/ 2022年10月29日 03:30/ 0 赞/ 24 阅读

相关 html开始时间和结束时间,JS中验证开始时间和结束时间

1、html html代码 \开始时间： \结束时间： //当保存时触发方法2、js js代码 function travelSave()\{ if(checkVa

太过爱你忘了你带给我的痛/ 2022年10月06日 09:55/ 0 赞/ 344 阅读

相关 Java获取当天的起始时间和结束时间

import java.text.SimpleDateFormat; import java.util.Calendar; import jav

叁歲伎倆/ 2022年06月14日 00:50/ 0 赞/ 291 阅读

相关 layui时间区间搜索功能如何锁定开始时间结束时间的可选范围

1.示例图： ![70][] 代码： `<div class="layui-form-inline">` `<label class="layui-form-label

Love The Way You Lie/ 2022年05月13日 12:04/ 0 赞/ 425 阅读

相关 layui文本框实现选择起始时间和结束时间

首先要调用layui时间插件必须下载layui.js文件，这个可以在官网去下载的([https://www.layui.com/][https_www.layui.com])，

喜欢ヅ旅行/ 2022年05月08日 21:25/ 0 赞/ 429 阅读