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


Posted in Javascript onMay 25, 2020

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

代码作用简介:

开始结束时间,联动,开始时间前后移动,对应结束时间相应变化,时间差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 动态校验时间内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery的:parent选择器定义和用法
Jul 01 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
Three.js快速入门教程
Sep 09 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 #Javascript
Node.js API详解之 repl模块用法实例分析
May 25 #Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 #Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 #Javascript
使用React代码动态生成栅格布局的方法
May 24 #Javascript
ES6对象操作实例详解
May 23 #Javascript
ES6函数和数组用法实例分析
May 23 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php分页函数示例代码分享
2014/02/24 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python中如何使用insert函数
2020/01/09 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
科室工作的个人自我评价
2013/10/30 职场文书
村党支部换届选举方案
2014/05/02 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
北京英文导游词
2015/02/12 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
国富论读书笔记
2015/06/26 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书