我有一个开始日期和结束日期供我选择日期。我正在使用jQuery日期选择器库。
这是我的函数现在的样子:
$(function() {
$(".txtEndDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '../../../images/calendar.png',
buttonImageOnly: true,
title:'Click to open calendar',
alt:'Click to open calendar'
});
});
$(function() {
$(".txtStartDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '../../../images/calendar.png',
buttonImageOnly: true,
title:'Click to open calendar',
alt:'Click to open calendar',
onSelect: function() {
var start = $(this).datepicker("getDate");
start.setDate(start.getDate() + 7);
$(".txtEndDate").datepicker("setDate", start);
}
});
});
它有效,但我想在不允许用户选择今天之前的日期时做到这一点,因为它无论如何都没有意义。例如,选择2018-01-01
不应该是有效的。你明白了。
找到了一个建议使用 minDate
来解决此问题的文档。它说:
//initialize the datepicker
$( ".selector" ).datepicker({
minDate: new Date(2007, 1 - 1, 1)
});
//get or set mindate option
// Getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
// Setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
鉴于我对字段代表什么感到困惑,有没有办法阻止人们选择今天之前的任何日期?
我尝试了这个解决方案:jQuery 日期选择器 - 禁用过去的日期
但它不会禁用它,仍然允许我选择。
您可以使用
日期选择器插件的 minDate 属性禁用过去的日期,如下所示。
$(".txtEndDate").datepicker({
minDate: new Date(), // Add this to diсable past date
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '../../../images/calendar.png',
buttonImageOnly: true,
title:'Click to open calendar',
alt:'Click to open calendar'
});
使用以下代码,它将帮助您防止从今天开始选择旧日期。
minDate : 0 // for current date
minDate: new Date(2007, 1 - 1, 1) // for particular minDate
$("input.DateFrom").datepicker({
minDate: 0
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input class="DateFrom">
结束日期的代码减去开始日期,请参阅代码:-
$("#StartDate").datepicker({
numberOfMonths: 2,
onSelect: function(selected) {
$("#EndDate").datepicker("option","minDate", selected)
}
});
$("#EndDate").datepicker({
numberOfMonths: 2,
onSelect: function(selected) {
$("#StartDate").datepicker("option","maxDate", selected)
}
});