`
退役的龙弟弟
  • 浏览: 451816 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

完整的时间(开始和结束时间)输入框验证js

 
阅读更多

1、html

(1)时间输入框

当使用时间插件改变时间时,会触发onchange()事件

<p><span class="search_name">起始时间:</span>
	<input type="text" id="starttime" readonly="readonly"
	onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',lang:'zh-cn',maxDate:'%y-%M-%d',minDate:'%y-%M-<%=a%>{%d-2}'})"
	onchange="checkNull('starttime')"/>
</p>
<p><span class="search_name">结束时间:</span>
	<input type="text" id="endtime" readonly="readonly"
	onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',lang:'zh-cn',maxDate:'%y-%M-%d',minDate:'%y-%M-<%=a%>{%d-2}'})" 
	onchange="checkNull('endtime')"/>
</p>

 (2)查询

 <button type="button" onclick="query()" class="search_btn">查询</button> 

 

2、js

/* 
			检测时间是否为空 */
		function checkNull(id){
			//开始时间
			if(id == "starttime"){
				startTime = $("#starttime").val();
				
				if(isNull(startTime)){
					alert("起始时间不能为空");
					return false;
				}
				return true;
			}
			
			//结束时间
			if(id == "endtime"){
				endTime = $("#endtime").val();
				
				if(isNull(endTime)){
					alert("结束时间不能为空");
					return false;
				}
				return true;
			}
		}
		
		/*
			检测开始时间是否小于结束时间(字符串也可以之间比较难控制相差的时间长度,使用毫秒计算) */
		function checkDate(){
			var startTimeMills = getDateMillsByDateString("starttime");
			var endTIimeMills =  getDateMillsByDateString("endtime");
			//开始时间和结束世间的最大间隔:3天
			var interval = 3*24*60*60*1000;
			
			if(startTimeMills < endTIimeMills && 0 < endTIimeMills - startTimeMills < interval){
				return true;
			}
			alert("起始时间需要小于结束时间");
			return false;
		}
		
		/*
			查询 操作*/
		function query(){
			if(!checkNull('starttime')){
				return ;
			}
			if(!checkNull('endtime')){
				return;
			}
			if(!checkDate()){
				return;
			}
			
			$("#form1").submit();
		}
		
		//将字符串时间(yyyy-MM-dd HH:mm:ss)转换成毫秒
		function getDateMillsByDateString(timeId){
			var timeStr = $("#" + timeId).val();
			
			var dateAndTimeArray = timeStr.split(" ");
			var dateArray = dateAndTimeArray[0].split("-");
			var timeArray = dateAndTimeArray[1].split(":");
			
			var date = new Date(dateArray[0],dateArray[1],dateArray[2],timeArray[0],timeArray[1],timeArray[2]);
			
			var dateMills = date.getTime();
			
			return dateMills;
		}
		
		
		//判断字符串时间是否为空
		function isNull(timeString){
			if(timeString == null || timeString == ""){
				return true;
			}
			return false;
		}

 

分享到:
评论

相关推荐

    可选择起始日期和结束日期的时间选择器.rar

    8. **AJAX**:如果需要实时更新服务器端的数据,开发者可能会使用AJAX(异步JavaScript和XML)技术,无刷新地发送和接收数据。 9. **模块化和封装**:为了代码的可维护性和复用性,项目可能采用了模块化的设计,将...

    js前台判断开始时间是否小于结束时间

    在这个场景中,我们需要在前端检查用户输入的开始时间是否小于结束时间。这段代码实现了这个功能,主要涉及了以下几个知识点: 1. **DOM选择器**:使用jQuery库中的`$(“#txtBeginTime”)`和`$(“#txtEndTime”)`来...

    js 动态校验开始结束时间的实现代码

    在JavaScript中,动态校验开始结束时间主要是为了确保用户输入的时间符合特定的规则,例如开始时间不能晚于或等于当前时间,结束时间不能早于开始时间,并且开始和结束时间之间的时间差至少为30天。这个场景在很多...

    js时间选择插件

    2. **范围选择**:允许用户选择一个时间范围,例如会议的开始和结束时间。 3. **步进控制**:可以设定时间选择的步进值,例如每5分钟或15分钟为一格。 4. **输入格式**:支持自定义显示和输入的时间格式,如24小时...

    JS倒计时输入框带铃声报警音乐特效源码.zip

    这个"JS倒计时输入框带铃声报警音乐特效源码.zip"文件是一个包含JavaScript代码实现的特定功能模块,主要提供了倒计时功能,并且在达到预设时间时会触发铃声或音乐报警效果,从而提升用户的感知和互动性。...

    Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    在开发Web应用时,我们经常需要让用户选择日期和时间,Vue.js 是一个流行的...这一系列的操作,展现了Vue.js 和iView 结合使用的强大能力,以及如何灵活运用JavaScript和Vue.js响应式原理来构建动态的用户界面。

    用js判断时间的大小

    在JavaScript中进行时间比较是一项非常实用且常见的任务,尤其是在处理表单验证、日历功能或者任何需要基于时间逻辑的应用场景中。本篇文章将详细介绍如何利用JavaScript来判断两个时间的大小关系,并通过一个具体的...

    jquery easyui 对于开始时间小于结束时间的判断示例

    这两个输入框的ID分别为 "start2" 和 "end2",并为结束时间的输入框添加了一个 "validType" 属性,该属性指定了验证规则,即 `md['#start2']`,这表示结束时间需要比 "#start2"(开始时间)的值大。 ```html ${...

    EasyUI Datebox 日期验证之开始日期小于结束时间

    message: '结束时间要大于开始时间!' } }); ``` 在`validator`函数中,我们获取开始日期输入框的值,然后将日期字符串格式从"YYYY-MM-DD"转换为JavaScript Date对象,以便进行比较。我们通过比较这两个日期对象...

    常用的js验证

    - `^` 和 `$` 表示字符串的开始和结束。 - `\d{2,3}` 表示2到3位数字。 - `-` 表示连接符。 - `(\d{7,8})` 表示7到8位数字。 - `-(\d{3,})?` 表示可选的分机号,1位以上数字。 - **执行流程**: - 获取输入框...

    PopupCalendar日历选择输入框

    在任务管理应用中,用户可以设定任务的开始和结束时间。 为了便于集成和使用,PopupCalendar通常会提供详细的开发者文档,包括API参考、示例代码以及常见问题解答。开发人员可以根据这些资源快速了解如何在自己的...

    时间控件

    时间控件在IT行业中是网页或应用程序用户界面中不可或缺的一部分,它们允许用户选择或输入特定...在实际项目中,应根据具体需求选择合适的时间控件类型,并利用JavaScript和相关库来实现高效、用户友好的时间管理功能。

    input 时间日历插件

    应用实例方面,时间日历插件广泛应用于在线预订系统(如机票、酒店预订)、会议调度软件、任务管理工具等,帮助用户快速设定事件或任务的开始和结束时间。同时,它们也可以用于表单填写,如填写出生日期、会议时间等...

    My97DatePicker 时间选择框 小示例

    这个小示例主要展示了如何在网页中应用My97DatePicker,以及如何对所选时间进行格式化处理,同时实现开始时间和结束时间的联动功能。 1. **My97DatePicker的基本使用** My97DatePicker是一个JavaScript库,通过...

    jQuery模拟阿里云购买服务器页面时间定位选择效果.zip

    `index.html`文件通常会包含HTML结构,其中包含用于显示和选择时间范围的元素,比如两个日期输入框,分别代表开始时间和结束时间。 接着,我们需要创建CSS样式以美化这些元素。`css`文件中的样式可以定义日期选择器...

    时间控件time

    在`generalProAdd.jsp`页面中,这个时间控件可能被用来添加或编辑项目的一般属性,例如开始时间或结束时间。开发者通常会结合JavaScript或jQuery进行更复杂的交互处理,比如验证时间格式、设置时间范围限制或者实现...

    多种日历表、时间日期选择插件

    1. 输入框输入:用户可以直接在输入框中手动输入日期或时间,插件会自动验证输入的有效性,并提供友好的用户体验,如自动完成和错误提示。 2. 单选模式:适用于单一的日期或时间选择,常见于填写生日、预约日期等...

    详解js正则表达式验证时间格式xxxx-xx-xx形式

    总结以上知识点,掌握JavaScript正则表达式验证时间格式不仅能够提升用户输入体验,还可以增强网站或应用的健壮性和可靠性。在实际开发过程中,开发者应根据实际情况调整正则表达式的复杂度和验证逻辑,确保既能覆盖...

Global site tag (gtag.js) - Google Analytics