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

很多时候要动态校验开始结束时间,每次都要写一次,太麻烦,以备后面拷贝使用,

代码作用简介:

开始结束时间,联动,开始时间前后移动,对应结束时间相应变化,时间差30天

html:

<input type="date" placeholder="请输入(From)..." id="txtStartDate" value="${startDate }" onblur="onblurStartDate();" />
<input type="date" placeholder="请输入(To)..." id="txtEndDate" value="${endDate }" onblur="onblurEndDate();" />

js:

<script type="text/javascript">
/**
 * 动态校验开始时间
 * @returns
 */
function onblurStartDate() {
	var startDateStr = $("#txtStartDate").val();
	var nowDate = new Date().toISOString().substring(0, 10); //当前时间截取操作
	var endDateStr = addDate(startDateStr, 29);

	if(startDateStr >= nowDate) {
		alert("开始时间不能大于等于今天!");
		var endDate = addDate(nowDate, -29);
		$("#txtStartDate").val(endDate);
		return;
	}
	if(endDateStr >= nowDate) {
		$("#txtEndDate").val(nowDate);
		return false;
	}
	$("#txtEndDate").val(endDateStr);
}

/**
 * 动态校验结束时间
 * @returns
 */
function onblurEndDate() {
	var endDateStr = $("#txtEndDate").val();
	var nowDate = new Date().toISOString().substring(0, 10); //当前时间截取操作

	if(endDateStr > nowDate) {
		alert("结束时间不能大于今天!");
		$("#txtEndDate").val(nowDate);
		var startDate = addDate(nowDate, -29);
		$("#txtStartDate").val(startDate);
		return false;
	}
	var startDateStr = addDate(endDateStr, -29);
	$("#txtStartDate").val(startDateStr);
}

/**
 * 日期加减法 格式:addDate('2017-01-11',20)
 * @param date计算开始的日期
 * @param days需要加的天数 (正数加,负数减)
 * @returns 计算后的时间
 */
function addDate(date, days) {
	var d = new Date(date);
	d.setDate(d.getDate() + parseInt(days));
	var m = d.getMonth() + 1;
	m = parseInt(m) < 10 ? ('0' + m) : m;
	var day = parseInt(d.getDate()) < 10 ? ('0' + d.getDate()) : d.getDate();
	return d.getFullYear() + '-' + m + '-' + day;
}
</script>

java后台:

/**
 * 	页面初始化+指定时间
 * @param request
 * @param response
 * @return
 */
@RequestMapping(value = { "/pageInit.do" })
protected String pageInit(final HttpServletRequest request, final HttpServletResponse response) {
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	request.setAttribute("startDate", sdf.format(TimeUtils.addDate(new Date(), -29)));
	request.setAttribute("endDate", sdf.format(new Date()));
	return "taskManage/taskindex";
}

总结

到此这篇关于js 动态校验开始结束时间的文章就介绍到这了,更多相关js 动态校验时间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • js校验开始时间和结束时间

    本文实例为大家分享了js校验开始时间和结束时间的具体代码,供大家参考,具体内容如下 <html> <head> <script> function checkTime(){ var startTime = document.getElementById("_startTime").value.trim(); var endTime = document.getElementById("_endTime").value.trim()

  • JS实现时间校验的代码

    常用于活动时间结束弹窗提示 注意: 1.只是JS校验时间提示,并不安全 2.前台页面的时间校验不影响后台,所以,当用户修改本地计算机时间时,可能存在不安全因素 1.直接看代码 var mydate = new Date(); var date = myDate(); function activeData(){ if(!isDateBetween(date,'2018/01/30','2018/03/31')){ //在有效时间,对应处理逻辑 }else{ //不在有效时间,对应处理逻辑 } }

  • js实现时间日期校验

    本文实例为大家分享了js实现时间日期校验的具体代码,供大家参考,具体内容如下 1. 通用的时间校验方式 $.validator.addMethod("validatestart", function(value, element) { var start = new Date($('#startTime').val()).getTime(); var end = new Date($('#endTime').val()).getTime(); if(end < start){ r

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

    很多时候要动态校验开始结束时间,每次都要写一次,太麻烦,以备后面拷贝使用, 代码作用简介: 开始结束时间,联动,开始时间前后移动,对应结束时间相应变化,时间差30天 html: <input type="date" placeholder="请输入(From)..." id="txtStartDate" value="${startDate }" onblur="onblurStartDate();"

  • jquery js 获取时间差、时间格式具体代码

    调取 复制代码 代码如下: GetDateDiff(start, end, "day") /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中,年月日为全格式,例如 : 2010-10-12 01:00:00 * 返回精度为:秒,分,小时,天 */ function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 star

  • easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码

    一.Html代码 注意的是需要加上data-options="editable:false",不能直接修改日期 <tr> <td width="15%" class="label">合同起始日期:</td> <td width="35%"> <input value="${loan.contractBegtime}" class="f1 eas

  • vue 判断两个时间插件结束时间必选大于开始时间的代码

    效果展示: 代码展示: <template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="timeValue" placeholder="选择的日期结果"

  • JS比较两个时间大小的简单示例代码

    如下所示: 复制代码 代码如下: if (new Date(strSD.replace(/\-/g, '\/')) > new Date(strED.replace(/\-/g, '\/'))) { //开始时间大于了结束时间                alert("时间选择有误!开始日期必须小于或者等于结束时期!");                return false;}

  • js显示当前系统时间的代码

    js获取当前系统时间 复制代码 代码如下: var myDate = new Date();      myDate.getYear();        //获取当前年份(2位)      myDate.getFullYear();    //获取完整的年份(4位,1970-????)      myDate.getMonth();       //获取当前月份(0-11,0代表1月)      myDate.getDate();        //获取当前日(1-31)      myDate

  • js实现Form栏显示全格式时间时钟效果代码

    本文实例讲述了js实现Form栏显示全格式时间时钟效果代码.分享给大家供大家参考.具体如下: 这里演示的Form栏特效时钟,显示全日期格式的时间日期效果,可显示星期几.几月几号,以往都是直接显示在网页中,而本代码是将时间显示在表单的文本框中,看一下代码就明白了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-form-input-showtime-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3

随机推荐