js 动态校验开始结束时间

痛定思痛。 2023-10-06 09:23 9阅读 0赞

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

代码作用简介：

开始结束时间，联动，开始时间前后移动，对应结束时间相应变化，时间差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";
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 动态校验开始结束时间

很多时候要动态校验开始结束时间，每次都要写一次，太麻烦，以备后面拷贝使用，代码作用简介：开始结束时间，联动，开始时间前后移动，对应结束时间相应变化，时间差30天 ht

痛定思痛。/ 2023年10月06日 09:23/ 0 赞/ 10 阅读

相关 element 校验开始时间小于结束时间,结束时间大于开始时间

<el-col :span="12"> <el-form-item label="期望发货时间：" prop="orderE

男娘i/ 2023年03月12日 14:29/ 0 赞/ 115 阅读

相关 php获取当天的开始时间和结束时间

//当天开始时间 $start_time=strtotime(date("Y-m-d",time())); //当天结束之间 $end_ti

快来打我*/ 2023年02月20日 02:58/ 0 赞/ 2 阅读

相关【工具类】获取指定日期开始时间和结束时间

> `前言` 如题转载自：[https://www.cnblogs.com/cc-java/p/6699045.html][https_www.cnblogs.com_

你的名字/ 2022年12月25日 07:59/ 0 赞/ 338 阅读

相关 JS获取当天、本周、本月、本年开始时间和结束时间

一天的开始时间 function startTime(time) { const nowTimeDate = new Date(time);

「爱情、让人受尽委屈。」/ 2022年12月03日 08:39/ 0 赞/ 1258 阅读

相关 layDate 时间范围限制开始时间小于结束时间

var startDate=laydate.render({ elem: 'start', done:function(valu

本是古典何须时尚/ 2022年12月01日 15:50/ 0 赞/ 422 阅读

相关 ElementUI TimePicker固定时间范围，开始时间小于结束时间

一、概述根据项目需求： 1. 开始时间必须小于结束时间，不能等于结束时间。 2. 结束时间必须小于开始时间，不能相等。 2. 开始时间和结束时间，最小间隔30分钟

╰+攻爆jí腚メ/ 2022年10月07日 12:47/ 0 赞/ 595 阅读

相关 html开始时间和结束时间,JS中验证开始时间和结束时间

1、html html代码 \开始时间： \结束时间： //当保存时触发方法2、js js代码 function travelSave()\{ if(checkVa

太过爱你忘了你带给我的痛/ 2022年10月06日 09:55/ 0 赞/ 388 阅读

相关关于活动开始时间大于结束时间的验证

//==========关于活动开始时间大于结束时间的判断============== ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

Myth丶恋晨/ 2022年03月26日 08:52/ 0 赞/ 350 阅读

相关 js获取当天当周当月的开始时间和结束时间

[javascript] view plain copy function getSystemDate(){ var syst

阳光穿透心脏的1/2处/ 2021年10月08日 06:40/ 0 赞/ 874 阅读