Question

我有一个开始日期和结束日期供我选择日期。我正在使用jQuery datepicker库。

这是我现在的功能：

$(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 Date Picker - disable past dates

但是它并没有禁用它，仍然允许我选择。

Answer 1

您可以使用datepicker插件的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'
        });

Answer 2

使用以下代码，它将帮助您避免从今天开始选择旧日期。

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)
        }
    });

设置minDate以防止选择开始日期之前的结束日期

2 个答案: