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

 更新时间:2020年05月25日 09:22:54   作者:莫若夕禾  
这篇文章主要介绍了js 动态校验开始结束时间的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

代码作用简介:

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

相关文章

  • Js生成随机数/随机字符串的方法小结【5种方法】

    Js生成随机数/随机字符串的方法小结【5种方法】

    这篇文章主要介绍了Js生成随机数/随机字符串的方法,结合实例形式总结分析了5种Js生成随机数/随机字符串的操作技巧,需要的朋友可以参考下
    2020-05-05
  • 使用javascript做的一个随机点名程序

    使用javascript做的一个随机点名程序

    这篇文章主要介绍了使用javascript做的一个随机点名程序,经测试,效果相当不错,需要的朋友可以参考下
    2014-02-02
  • JS中如何使用 filter() 方法过滤数组元素

    JS中如何使用 filter() 方法过滤数组元素

    filter()方法是JavaScript中用于过滤数组元素的常用方法,它接受一个回调函数作为参数,返回一个新数组,本文总结了使用filter()方法的最佳实践,感兴趣的朋友一起看看吧
    2025-01-01
  • JavaScript交换变量常用4种方法解析

    JavaScript交换变量常用4种方法解析

    这篇文章主要介绍了JavaScript交换变量常用4种方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • javascript 三种编解码方式

    javascript 三种编解码方式

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent
    2010-02-02
  • 复制小说文本时出现的随机乱码的去除方法

    复制小说文本时出现的随机乱码的去除方法

    想把小说复制下来慢慢看,却发现复制到记事本里出现一大堆乱七八糟的东西,很是不爽。于是就想了个简单的办法把它干掉了。
    2010-09-09
  • 详解ES9的新特性之异步遍历Async iteration

    详解ES9的新特性之异步遍历Async iteration

    在ES6中,引入了同步iteration的概念,随着ES8中的Async操作符的引用,是不是可以在一异步操作中进行遍历操作呢?今天要给大家讲一讲ES9中的异步遍历的新特性Async iteration。
    2021-06-06
  • JS 网页彩蛋 实现代码

    JS 网页彩蛋 实现代码

    显示一定时间后消失,刷新之后清空变量值,重新开始记录键值。 程序的原理就是检测按键的键值,当达到预定条件时执行规定的函数。
    2009-09-09
  • three.js实现3d全景看房示例

    three.js实现3d全景看房示例

    这篇文章主要为大家介绍了three.js实现3d全景看房示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • element UI中在 el-select 与 el-tree 结合组件实现过程

    element UI中在 el-select 与 el-tree 结合组件实现过程

    项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程,对 el-select 与 el-tree 结合组件实现过程感兴趣的朋友跟随小编一起看看吧
    2023-02-02

最新评论