结束日期小于开始日期

最新推荐文章于 2023-10-04 15:05:34 发布
转载 最新推荐文章于 2023-10-04 15:05:34 发布 · 322 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yangpeng-jingjing/p/5139269.html
文章标签：

#javascript #ViewUI

本文介绍如何在网页中使用EasyUI DateBox组件实现开始日期和结束日期的范围限制，确保结束日期始终大于开始日期。通过定义onSelect事件函数，实现了日期输入的逻辑校验和界面交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script>
function onSelect(d) {
var issd = this.id == 'sd', sd = issd ? d : new Date($('#sd').datebox('getValue')), ed = issd ? new Date($('#ed').datebox('getValue')) : d;
if (ed < sd) {
alert('结束日期小于开始日期');
//只要选择了日期，不管是开始或者结束都对比一下，如果结束小于开始，则清空结束日期的值并弹出日历选择框
$('#ed').datebox('setValue', '').datebox('showPanel');
}
}
</script>

 

开始日期：<input class="easyui-datebox" id="sd" data-options="onSelect:onSelect" />
结束日期：<input class="easyui-datebox" id="ed" data-options="onSelect:onSelect" />

转载于:https://www.cnblogs.com/yangpeng-jingjing/p/5139269.html

el-date-picker 设置结束时间不能小于开始时间
King Saj
12-05 2306
需求: 用户选择完开始时间之后,设置的结束时间不能小于开始时间 代码: <el-row> <el-col :span="12"> <el-form-item label="公示开始日期"> <el-date-picker style="width:100%" v-model="queryPa
layui 结束日期不能小于开始日期的设置
肖肖肖丽珠的博客
07-22 1568
<form class="layui-form" action=""> <label>交易记录查询</label> <div class="layui-inline"><input class="layui-input" placeholder="请选择开始日期"...
使用 Element+vue实现开始时间结束时间限制
小猪的博客
11-25 1767
html部分： <div> <div style=" width: 220px; margin: 20px auto 0;"> <el-date-picker v-model="start...
开始日期不限制，结束日期不能小于开始日期
huxihua2006的博客
03-17 653
===数据源 form2: { project_term_start: “”, //工程起期 project_term_end: “”, //工程止期 }, //日期限制 startDateLimit: { 开始日期不需要限制了 // disabledDate: (time) => { // let endTime = this.form2.project_term_end; // if (endTime) { // return time.getTime() &g
vue+elementui 日期时间控件 结束日期不能小于开始日期
Start2019
01-06 4096
1.年月日之间：结束日期不能小于开始日期；2.年月日 时分秒之间：结束日期可以与开始时间相等，此外时分秒也要做限制，去掉面板上的“此刻”按钮。
elementui日期选择器控制结束日期不能小于开始日期
鹏仔工作室的秘密基地
09-25 3018
项目中，有选择开始日期和结束日期的，写好了分享给大家吧！如有问题，请多多指教，谢谢。 功能是开始日期可选今日或今日之后的日期，结束日期必须在开始日期之后，用的是elementui，案例分享给大家。 我的效果是 报名开始时间（当日起之后）、报名结束时间（报名开始时间之后）、会议开始时间（报名结束时间之后）、会议结束时间（会议开始时间之后）。 根据下图所示，选择A之后（清除B、C、D），B只能选择A之后的日期，选择B之后（清除C、D），C只能选择B之后的日期，选择C之后（清除D...
EasyUI Datebox 日期验证之开始日期小于结束时间
08-30
本文将详细讲解如何使用EasyUI Datebox 进行日期验证，特别是实现开始日期小于结束时间的验证规则。 首先，我们需要创建两个Datebox，一个用于选择开始日期，另一个用于选择结束日期。在HTML代码中，我们创建了两个...
js前台判断开始时间是否小于结束时间
10-28
本次我们将详细介绍如何使用JavaScript前台判断开始时间是否小于结束时间，并结合jQuery简化DOM操作。 首先，要实现这样的功能，我们需要通过jQuery来获取用户输入的开始时间和结束时间。在上述提供的代码片段中，...
My97DatePicker结束日期不能大于开始日期
qq993461639的专栏
03-20 6052
结束日期不能大于开始日期
vue+element el-date-picker日期筛选选择7天以内及小于当天日期,如果先选结束时间那么开始日期不能大于结束日期并小于当前日期
周家大小姐
10-28 1775
需求: 1.先开始日期,只能选大于当前日期,结束日期不能选开始日期这天,并小于前日期的后七天 2.如果先选结束日期,要求结束日期可选为当前日期之后的日期,再选开始日期,开始日期不能选结束日期的那天,并开始日间不能大于结束日期,而要在当天日期的有效内 代码如下: <el-row> <el-col :span="12"> <el-form-item label="布控起始时.
My97DatePicker 日期控制，开始时间不能大于结束时间，结束时间不能小于开始时间
热门推荐
coco_ethan的专栏
04-25 1万+
马克 一下，最近写日期控件时，用到了My97DatePicker控件，感觉挺不错的。基本日期功能都有。推荐使用这款！！！   其中，通过id来控制，具体看下面代码的颜色对应。 起始日期： startDate" name="startInfoChangeDate" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')}'});"
jeesite 结束时间小于开始时间
weixin_41733882的博客
05-20 531
最近公司使用jeesite开源框架，网上查找很多都没有很好的解决，最终还是找到解决方法 开始时间 <#form:input path="startTime" readonly="true" maxlength="20" class="form-control Wdate" dataFormat="datetime" onclick="WdatePicker({dateFmt:'y...
设置开始日期始终小于结束日期的思路
yezi153的博客
01-06 956
1.设置最小的结束日期为起始日期 2.设置最大的起始日期为结束日期
比较日期 结束日期不能早于开始日期
jingjingzhanghy的专栏
01-05 1928
<br />function getUserWorkId(CreateTime,SolveTime) { var DateOne = document.getElementById(CreateTime).value; var DateTwo = document.getElementById(SolveTime).value; var OneMonth = DateOne.substring(5,DateOne.lastIndexOf
iview 时间日期选择器限制开始时间不能小于当前系统日期时间，结束时间不能小于开始时间和当前系统日期时间时间
m0_65709345的博客
10-04 1142
废话不多说直接上代码。
elementUI中日期选择器，控制开始时间小于结束时间
weixin_42508745的博客
10-26 1782
此处做一个解释： ：picker-options=“updateTime” 为当前时间日期选择器特有的选项参考下表，而且可以用vue中的函数来做筛选，将data数据源中的updateTime给：picker-options使用 <el-form-item style='width: 100%;' label="开始日期:"> <el-date-picker style='width: 100%;' value-format="yyyy-MM-dd" form
前台控制开始日期小于结束日期
獨 家花雨的博客
08-25 357
// 开始日期 $('#beginDate').datepicker({ format: 'yyyy-mm-dd', language: 'zh-CN', autoclose: true, todayHighlight: true, format: "yyyy-mm-dd"}).on('changeDate', function(ev){
帆软设置开始时间结束时间、周报、季报，时间加减报表
weixin_46605842的博客
11-12 6465
1.开始结束时间（范围）：设置过滤条件订购日期大于等于开始日期并且小于等于结束日期。 2.周报：选定日期为当前周，查询周报 第一个公式：=DATEDELTA($Date, if(tointeger(WEEKDAY($Date)) == 0, -7, 0 - WEEKDAY($Date)))即返回查询日期所在周的第一天。 第二个公式：=DATEDELTA($Date, if(tointeger(WEEKDAY($Date)) == 0, 0, 7 - WEEKDAY($Date)))返回查询日.
验证查询条件 - 起始时间和终止日期
永恒小菜的专栏
10-10 1479
  function selectSubmit(){               //1.重新判断再生和失效班组文本域中是否有内容.没有的话则将隐藏域中的值清空        // var depname = document.getElementById("depname").value;        // var invaliddepname = document.getElementByI
react antd rangepicker怎么禁用开始日期，且结束日期不能小于开始日期
最新发布
03-26
<think>好的，我现在需要帮助用户解决在React中使用Ant Design的RangePicker组件时禁用开始日期，并确保结束日期不能小于开始日期的问题。首先，我得回忆一下Ant Design的RangePicker组件相关的文档和常见用法。 用户提到了两个引用，引用[1]是关于如何禁用不在当前月范围内的日期，引用[2]则提到如何禁用当前之前的时间和日期。这两个引用应该能提供一些思路，比如使用disabledDate函数来控制禁用的日期。 首先，禁用开始日期的部分。用户可能希望开始日期不能早于某个特定日期，比如今天之前。这时候可以参考引用[2]中的方法，使用disabledDate来限制开始日期只能选择今天或之后。例如，设置disabledDate函数，当current日期在某个起始日期之前时返回true，禁用这些日期。 然后是结束日期不能小于开始日期的问题。这里需要动态地根据已选择的开始日期来禁用结束日期的选项。也就是说，当用户选择了开始日期后，结束日期的可选范围应该从开始日期之后。这需要用到antd的RangePicker的value和onCalendarChange事件，或者在disabledDate函数中动态获取开始日期的值。 不过，RangePicker是一个联合选择器，开始和结束日期是相互关联的。因此，可能需要将开始日期和结束日期的值保存在state中，然后在disabledDate函数中根据当前选择的类型（开始或结束）来应用不同的禁用规则。 例如，当用户选择开始日期时，禁用所有晚于当前结束日期的日期；而选择结束日期时，禁用所有早于开始日期的日期。但用户的需求是禁用开始日期本身，比如开始日期不能早于某个特定日期，同时结束日期必须大于等于开始日期。 可能的步骤： 1. 使用state来保存开始和结束日期。 2. 在disabledDate函数中，根据当前选择的日期类型（start或end）来动态判断是否需要禁用。 3. 当选择开始日期时，确保其不早于某个最小值（比如今天），并且结束日期不能早于已选的开始日期。 4. 当选择结束日期时，确保其不小于已选的开始日期。 但这里有个问题，RangePicker的disabledDate函数是在渲染每个日期时调用的，如何区分当前是选择开始还是结束日期呢？查阅antd的文档，发现RangePicker的disabledDate函数可以通过参数中的type来判断是'start'还是'end'。不过，在旧版本中可能不支持，或者需要结合其他方法。 或者，可以在onCalendarChange事件中获取当前活动的面板（start或end），然后动态调整disabledDate的条件。例如，当用户点击开始日期输入框时，设置一个状态变量表示当前正在选择开始日期，此时disabledDate函数只禁用早于允许的最早开始日期（比如今天之前）；当用户点击结束日期输入框时，disabledDate函数则禁用早于已选开始日期的日期。 另外，需要确保结束日期不能小于开始日期，因此当开始日期改变后，结束日期如果存在且小于新的开始日期，则需要清空结束日期，或者自动调整。 总结可能的实现步骤： 1. 使用useState来管理startDate和endDate。 2. 定义disabledDate函数，根据当前选择的类型（start或end）来禁用相应日期。 3. 在RangePicker的onChange或onCalendarChange中更新startDate和endDate，并处理结束日期小于开始日期的情况。 4. 当开始日期改变后，如果结束日期存在且小于新的开始日期，则重置结束日期。 可能的代码结构： - 状态：const [dates, setDates] = useState([null, null]); - disabledDate函数根据dates中的开始和结束日期来动态禁用。 - 使用onCalendarChange来捕获日期选择的变化，并更新状态。 需要处理的情况包括： - 当用户选择开始日期时，结束日期的可选范围必须大于等于开始日期。 - 当用户选择结束日期时，开始日期已经被选中，因此结束日期不能早于开始日期。 此外，可能还需要处理初始状态下的情况，比如开始日期未选择时，结束日期应该被完全禁用，或者根据业务需求处理。 参考引用中的例子，禁用函数可能需要访问到已选择的开始日期，这可以通过闭包或者状态来实现。例如，在disabledDate函数内部使用dates[0]作为开始日期，当选择结束日期时，禁用所有在开始日期之前的日期。 同时，用户可能还希望开始日期不能早于某个特定日期，比如今天，所以需要结合两个条件：开始日期不能早于今天，结束日期不能早于开始日期。 综上，具体的实现代码可能如下： 定义状态： const [dates, setDates] = useState([null, null]); 处理日期变化： const handleDateChange = (dates) => { const [start, end] = dates; if (start && end && end.isBefore(start)) { // 如果结束日期早于开始日期，可能自动调整或提示错误 // 这里可以选择不更新结束日期，或者重置 setDates([start, null]); } else { setDates(dates); } }; 定义disabledDate函数： const disabledDate = (current, type) => { if (!current) { return false; } // 禁用今天之前的日期作为开始日期 if (type === 'start') { return current < moment().startOf('day'); } // 结束日期不能早于开始日期 if (type === 'end' && dates[0]) { return current < dates[0] || current < moment().startOf('day'); } return false; }; 然后在RangePicker组件中： <RangePicker value={dates} onChange={handleDateChange} disabledDate={disabledDate} /> 不过，antd的RangePicker的disabledDate函数是否支持传入type参数？需要查阅antd的文档确认。根据antd的文档，disabledDate的参数是当前的日期和当前日期类型（'start'或'end'），在v4版本中可能支持。例如，在v4中，disabledDate的参数可能是一个函数，接收currentDate和info，其中info.type表示当前是开始还是结束日期。 例如，正确的disabledDate函数可能如下： const disabledDate = (current, { type }) => { if (type === 'start') { // 开始日期不能早于今天 return current && current < moment().endOf('day'); } if (type === 'end') { // 结束日期不能早于开始日期，且不能早于今天 return current && (dates[0] ? current < dates[0] : current < moment().endOf('day')); } return false; }; 这样，当选择开始日期时，只能选今天及之后；当选择结束日期时，必须大于等于开始日期，同时如果开始日期未选，则结束日期也不能早于今天。 同时，在handleDateChange中，需要处理当开始日期改变后，如果结束日期存在且早于新的开始日期，则自动清空结束日期。 不过，可能还需要考虑时间部分的问题，比如是否包含当天的时间。例如，使用moment().startOf('day')来确保当天的0点，这样当天的时间不会被禁用。 可能需要调整disabledDate的条件： 开始日期不能早于今天： return current.isBefore(moment().startOf('day')); 结束日期不能早于开始日期： return current.isBefore(dates[0].startOf('day')); 这样，确保日期比较是基于天的。 综上，最终的实现可能需要结合这些考虑，调整disabledDate函数和handleDateChange逻辑。 可能还需要处理用户手动输入的情况，确保输入的日期符合条件。 最后，将代码整合成一个完整的示例，确保语法正确，并测试其功能是否满足用户需求。</think>在React中使用Ant Design的RangePicker组件禁用开始日期并限制结束日期的实现步骤如下： ### 1. 设置状态管理日期范围 通过`useState`管理开始和结束日期： ```javascript import { useState } from 'react'; import moment from 'moment'; const [dates, setDates] = useState([null, null]); ``` ### 2. 定义动态禁用逻辑 根据日期类型（`start`或`end`）动态禁用选项： ```javascript const disabledDate = (current, { type }) => { if (!current) return false; const today = moment().startOf('day'); // 禁用开始日期的条件：早于今天 if (type === 'start') { return current < today; } // 禁用结束日期的条件：早于今天或早于已选的开始日期 if (type === 'end') { const startDate = dates[0]?.startOf('day'); return current < today || (startDate && current < startDate); } return false; }; ``` ### 3. 处理日期选择事件 在`onChange`中更新状态，并自动修正无效的结束日期： ```javascript const handleDateChange = (newDates) => { const [start, end] = newDates; if (start && end && end.isBefore(start, 'day')) { setDates([start, null]); // 若结束日期早于开始日期，则清空结束日期 } else { setDates(newDates); } }; ``` ### 4. 绑定组件属性 将逻辑绑定到RangePicker组件： ```jsx <RangePicker value={dates} onChange={handleDateChange} disabledDate={disabledDate} format="YYYY-MM-DD" /> ``` ### 关键点说明 - **开始日期限制**：通过`type === 'start'`判断当前选择的是开始日期，禁用今天之前的日期[^2]。 - **结束日期联动**：当选择结束日期时，若已选开始日期存在，则禁用早于开始日期的选项；否则仍限制为今天之后[^1]。 - **状态修正**：若用户手动修改导致结束日期早于开始日期，自动清空结束日期以保证数据一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值