限制HTML5日期输入中的未来日期

我想限制用户只能在HTML日期输入中添加未来日期

---

我想添加HTML5日历，而不是jQueryUI日期选择器。有人能告诉我如何将输入限制到未来的日期吗？

使用max属性，这是元素值的预期上限

<input type="date" max="2014-05-15"/>

---

参考：

您可以使用HTML5输入日期的最小和最大属性

HTML5代码

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

$(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;    
    $('#txtDate').attr('max', maxDate);
});

编辑

您需要使用jQuery来实现它

jQuery代码

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

$(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;    
    $('#txtDate').attr('max', maxDate);
});

$（函数（）{
var dtToday=新日期（）；
var month=dtToday.getMonth（）+1；
var day=dtToday.getDate（）；
var year=dtToday.getFullYear（）；
如果（月<10）
month='0'+month.toString（）；
如果（第10天）
day='0'+day.toString（）；
变量maxDate=年+'-'+月+'-'+日；
$（'txtDate'）.attr（'max'，maxDate）；
});

解释 HTML5输入日期的max属性以两位数格式表示月份和日期

例：5（月）无效，而05（月）有效 例：1（天）无效，而01（天）有效

所以我添加了下面的代码

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

if（月<10）
month='0'+month.toString（）；
如果（第10天）
day='0'+day.toString（）；

检查我的最新小提琴

---

参考

以@Chirag Vidani的答案为基础，可以用较少的行生成日期，如下所示：

var now = new Date(),
    // minimum date the user can choose, in this case now and in the future
    minDate = now.toISOString().substring(0,10);

$('#my-date-input').prop('min', minDate);

---

我已经更新了工作小提琴

HTML&js:

     var dateControler = {
                currentDate : null
            }

             $(document).on( "change", "#txtDate",function( event, ui ) {
                    var now = new Date();
                    var selectedDate = new Date($(this).val());

                    if(selectedDate > now) {
                        $(this).val(dateControler.currentDate)
                    } else {
                        dateControler.currentDate = $(this).val();
                    }
                });   

---

其他一些人提出了将最大日期设置为当前日期的问题。建议的答案包括使用JavaScript。但我的解决方案是使用服务器端语言为输入生成max参数。我知道OP没有询问服务器端方法。但是，使用C#Razor作为服务器语言，这个解决方案对我来说非常有效

在服务器上，我写入：

@Html.TextBox("CurrentDate",
    Model.CurrentDate.ToString("yyyy-MM-dd"),
    new {
        @class = "form-control",
        @type = "date",
        max = DateTime.Now.ToString("yyyy-MM-dd")
    })

然后MVC输出这个Html：

<input class="form-control" id="CurrentDate" name="CurrentDate"
    type="date" max="2016-11-10" value="2016-11-10">

---

对于其他服务器语言，该方法将类似地使用服务器的日期生成max参数，如果您的要求是使用客户机的日期，则该方法可能有效，也可能无效。在我的情况下，服务器的日期是需要的，因为它是存储数据的地方。

旧问题但解决方案可能会帮助使用JQuery的人：

    $(document).ready(function () {
        var today = new Date();
        var day=today.getDate()>9?today.getDate():"0"+today.getDate(); // format should be "DD" not "D" e.g 09
        var month=(today.getMonth()+1)>9?(today.getMonth()+1):"0"+(today.getMonth()+1);
        var year=today.getFullYear();

        $("#dpFromDate").attr('max', year + "-" + month + "-" + day);
});

---

日期格式应为YYYY-MM-DD。

这是一个PHP解决方案，它获取今天的日期并将其设置为最大日期

<input type="date" name="bday" max="<?php echo date("Y-m-d"); ?>">

---

@Jack但是如果我们使用max date作为2014-05-15，那么如果用户在5月15日之后输入日期呢？这应该是不允许的@Jack而不是使用特定的日期。我们不能使用像new date（）这样的内容，以便日期根据您的电脑中的当前日期进行限制吗？您不能直接使用new date作为参数，但是您可以使用JS注入新日期的值。@Jack。。。谢谢：）@Chirag但是如果我们像这样使用max-date，我们每次都必须更改它，而不是使用new-date（）（我们在JQuery中使用它来限制未来的日期）最大限度attribute@Erandi无法获取您的@Chirag..friend here如果您将max date添加为2014-05-20，那么假设用户在2014-06-01填写表单，那么此时我们不能将max date用作neah的此日期，因此如果有一个选项限制用户根据其pc@Chirag中的当前日期输入未来日期，则更好…哇，很好的解释。非常感谢您的帮助：）（Y）这个例子似乎不是“需要使用jQuery来实现它”。这个例子的大部分甚至不使用jQuery。为什么说需要jQuery？这是将日期转换为HTML5格式的最干净的方法。这是最干净的方法，但错误地设置为
min
，而不是
max
请注意，toISOString生成的日期是UTC日期，这可能与本地日期相差1天，具体取决于代码运行的时间和主机的时区偏移量。@Mortezatorani我的理解是OP需要一个日期输入，其中只能选择未来的日期。任何从现在到未来的日期都是有效的，从现在到过去的日期都不可用。因此使用“min”属性，因为现在是用户可以选择的“min（imum）”日期，没有max。将其设置为“max”将只允许选择过去的日期。如果我误解了最初的问题，请向其他人澄清。@Juank你所做的和解释的正是我的意思。然而，有人编辑了您的答案，并将
min
替换为
max
，因此，我认为最好恢复编辑。可能与@Html.EditorFor重复