.NET项目取件日历日期限制问题:需修复15点后禁用次日功能
修复取件日历的时间限制问题
原代码的核心问题
- 时间判断逻辑完全错误:
new Date().getTime()返回的是毫秒级时间戳,和数字15比较毫无意义;同时和d(当天0点的时间戳)的比较逻辑颠倒,永远不会触发条件。 - 日期处理错误:
day被格式化为字符串后直接做+1运算,会变成字符串拼接(比如"09"+1得到"091"而非10),导致日期格式失效。 - 仅页面加载时执行一次:用户停留在页面期间,时间跨过15点后不会自动更新限制规则。
- 客户端与服务器端
min属性冲突:服务器端的litMinDate和客户端JS设置的min可能相互覆盖,导致限制重置。
修复后的代码实现
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> // 封装计算最小日期的函数 function calculateMinDate() { const dateToday = new Date(); let minDate = new Date(dateToday); // 基础规则:禁用过往日期+当日,默认最小日期为次日 minDate.setDate(minDate.getDate() + 1); // 时间规则:当日15点后,禁用次日,最小日期改为第三天 const currentHour = dateToday.getHours(); if (currentHour >= 15) { minDate.setDate(minDate.getDate() + 1); } // 格式化为YYYY-MM-DD字符串 const year = minDate.getFullYear(); const month = String(minDate.getMonth() + 1).padStart(2, '0'); const day = String(minDate.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } $(document).ready(function() { // 页面加载时设置初始最小日期 updateMinDate(); // 每分钟检查一次时间,更新限制(避免用户长时间停留页面导致规则失效) setInterval(updateMinDate, 60000); // 日期变更时重新校验(防止手动输入不符合规则的日期) $('#booking_depart_date').on('change', function() { const minDate = calculateMinDate(); if (this.value < minDate) { this.value = minDate; // 可在这里添加错误提示 $('#error_booking_depart_date').text('请选择符合规则的取件日期'); } else { $('#error_booking_depart_date').text(''); } }); }); function updateMinDate() { const minDate = calculateMinDate(); $('#booking_depart_date').attr('min', minDate); } </script>
额外优化建议
- 移除服务器端
min属性:将HTML中的min='<asp:Literal ID="litMinDate" runat="server"/>'删除,避免客户端JS和服务器端输出的规则冲突。 - 增强用户提示:在日期不符合规则时,通过
error容器显示明确提示,提升用户体验。 - 简化日期格式化:使用
padStart方法替代手动判断补零,代码更简洁可靠。
内容的提问来源于stack exchange,提问作者Wik50
相关产品推荐
相关产品推荐

