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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
javascript常用对话框小集
Sep 13 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
vue实现移动端省市区选择
Sep 27 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应用提速面面观
2006/10/09 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python简单实现控制电脑的方法
2018/01/22 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
浅析Python的命名空间与作用域
2020/11/25 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
简历上的自我评价
2014/02/03 职场文书
领导干部考察材料
2014/02/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
预备党员自我评价范文
2015/03/04 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python