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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
javascript回到顶部特效
Jul 30 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
原生js+ajax分页组件
Jan 30 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
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
javascript Math.random()随机数函数
2009/11/04 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python地震数据可视化详解
2019/06/18 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Python的collections模块真的很好用
2021/03/01 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
文员岗位职责
2013/11/09 职场文书
白酒营销策划方案
2014/08/17 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA