如何在 html5 输入类型 Date 中限制过去的日期答案

【问题标题】：How do I restrict past dates in html5 input type Date如何在 html5 输入类型 Date 中限制过去的日期
【发布时间】：2017-04-07 09:30:06
【问题描述】：

我正在尝试在 input type="date" 中限制过去的日期。我可以限制未来的日期，但我不知道如何限制过去的日期。

$(function(){
    var dtToday = new Date();
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var minDate= year + '-' + month + '-' + day;
    
    $('#txtDate').attr('min', minDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

有什么建议吗？

【问题讨论】：

Restrict future dates in HTML 5 data input的可能重复
@Esko 那是未来的日期，对吗？
最小和最大，如果最小日期是今天，那么你不能选择昨天。
我认为没有问题。您问题中的 sn-p 工作正常！

标签： javascript html

【解决方案1】：

您可以以编程方式执行以下操作来禁用过去的日期：

<input type='date' min={new Date().toISOString().split('T')[0]} />

【讨论】：

感谢 Muhamed 的提示 :-)

【解决方案2】：

希望下面的代码对您有所帮助。是普通的 HTML5 代码：

/*Enter a date before 1980-01-01:*/
<input type="date" name="bday" max="1979-12-31">

/*Enter a date after 2000-01-01:*/
<input type="date" name="bday" min="2000-01-02">

see working link

【讨论】：

【解决方案3】：

这是一个获取今天日期并将其设置为最小值的 PHP 解决方案。

<input type="date" id="txtDate" min="<?php echo date("Y-m-d"); ?>">

这会将日期和月份设置为正确的两位数格式。 https://www.php.net/manual/en/function.date.php

【讨论】：

或使用 laravel 模板：

【解决方案4】：

你可以试试这个

 var maxDate = year + '-' + month + '-' + day;
    alert(maxDate);
    $('#txtDate').attr('min', maxDate);

$(function(){
    var dtToday = new Date();
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var maxDate = year + '-' + month + '-' + day;

    // or instead:
    // var maxDate = dtToday.toISOString().substr(0, 10);

    alert(maxDate);
    $('#txtDate').attr('min', maxDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

【讨论】：

【解决方案5】：

  $(function() {
          $(document).ready(function () {
            var todaysDate = new Date();
            var year = todaysDate.getFullYear();
            var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
            var day = ("0" + todaysDate.getDate()).slice(-2);
            var maxDate = (year +"-"+ month +"-"+ day);
            $('.class_of_input_field').attr('min',maxDate);
          });
        });``

【讨论】：

嗨！如果您提供一些额外的解释/上下文（例如它从其他答案中提供什么优势，原始 sn-p 有什么问题等），它将使您的答案更有用。

【解决方案6】：

要选择大于起始日期的日期，我们可以使用此代码

 $(document).on("change", "#from", function () {
        debugger
        var date = $(this).val();
       
        $('#to').attr('min', date);
    
    });

【讨论】：

【解决方案7】：

<input type="date" id="date"> 
var date = new Date().toISOString().slice(0,10);

//To restrict past date

$('#date').attr('min', date);

//To restrict future date

$('#date').attr('max', date);

【讨论】：

最好为代码提供额外的信息。

【解决方案8】：

在 HTML 中：

<input type="date" id="ExpiryDate" class="form-control" min="9/10/2018"/>

使用Jquery新版本：

function SetMinDate() {
    var now = new Date();

    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear() + "-" + (month) + "-" + (day);

    $('#ExpiryDate').val(today);
    $('#ExpiryDate').attr('min', today); }

【讨论】：