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仿flash上传头像效果实现代码
Jul 18 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
使用 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中的一个中文字符串截取函数
2007/02/14 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
pytorch permute维度转换方法
2018/12/14 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
比驿:全球酒店比价网
2018/06/20 全球购物
公益活动策划方案
2014/01/09 职场文书
社区工作感言
2014/02/21 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
公司更名通知函
2015/04/24 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
Python基础之pandas数据合并
2021/04/27 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python