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

Posted 2023-05-07

【中文标题】设置 minDate 以防止在开始日期之前选择结束日期

【英文标题】：Setting minDate to prevent from choosing enddate before start date

【发布时间】：2019-09-12 05:35:11

【问题描述】：

我有一个开始日期和结束日期供我选择日期。我正在使用 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

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

【参考方案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'
        );

【讨论】：

new Date()，将采用本地系统的默认格式

所以将它添加到 txtenddate 和 txtstartdate 中？

是的，您可以将其添加到 txtendate 和 txtstartdate 日期选择器

如果我尝试选择今天之前的日期会怎样？

添加这将禁用今天之前的上一个日期，它不允许您选择过去的日期

【参考方案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)
        
    );  

【讨论】：

为什么是0？而不是当前日期

@Daredevil 0 指的是当前日期，您也可以像这样将日期更改为固定日期 minDate: new Date(2007, 1 - 1, 1)

有没有办法阻止人们选择结束日期

@Daredevil 确定你可以像这样使用 maxDate: "+1m +1w" 。设置结束日期。但它使用较少来设置结束日期

我不关注，我如何确保我不能选择小于开始日期的结束日期？