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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
JS图片预加载插件详解
Jun 21 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
Vue中this.$router.push参数获取方法
Feb 27 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
vue全局使用axios的操作
Sep 08 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JS中数据结构之栈
2019/01/01 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python调用C++程序的方法详解
2017/01/24 Python
python操作oracle的完整教程分享
2018/01/30 Python
python numpy元素的区间查找方法
2018/11/14 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python中常见错误及解决方法
2020/06/21 Python
详解python 内存优化
2020/08/17 Python
母亲七十大寿答谢词
2014/01/18 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
母亲节寄语大全
2015/02/27 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
甲午大海战观后感
2015/06/02 职场文书
教师病假条范文
2015/08/17 职场文书