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

【问题标题】：Restrict future dates in HTML5 date input限制 HTML5 日期输入中的未来日期
【发布时间】：2014-07-03 11:56:24
【问题描述】：

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

我想添加 HTML5 日历，而不是 jQuery UI 日期选择器。谁能告诉我如何将输入限制为未来的日期？

【问题讨论】：

Disable certain dates from html5 datepicker的可能重复

标签： html

【解决方案1】：

您可以使用 HTML5 输入日期的 min 和 max 属性

HTML5 代码

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

编辑

你需要使用jQuery来实现它

jQuery 代码

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

说明 HTML5 输入日期的 max 属性采用两位数格式的月份和日期。

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

所以我添加了下面的代码

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

检查我更新的小提琴

参考fiddle demo

【讨论】：

@ Chirag 但是如果我们使用这样的最大日期，我们必须每次都更改它，而不是我们不能使用类似 new Date () 的东西（我们用来限制 JQuery 中的未来日期）这个最大属性
@Erandi 找不到你
@ Chirag ..friend 在这里如果您将最大日期添加为 2014-05 -20 那么假设如果用户在 2014-06-01 填写表格，那么那时我们不能使用最大日期作为这个日期没有，所以如果有一个选项限制用户根据他/她的电脑中的当前日期输入未来的日期，那就更好了
@Chirag ...哇很好的解释。非常感谢您的帮助:) (Y)
这个例子看起来并不“需要使用jQuery来实现”。大多数示例甚至不使用 jQuery。说需要 jQuery 的原因是什么？

【解决方案2】：

以@Chirag Vidani 的回答为基础，date 可以用更少的行生成，如下所示：

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

【讨论】：

这是将日期转换为 HTML5 格式的最简洁方法。
这是最干净的方式，但错误地设置为 min 而不是 max
注意toISOString生成的日期是UTC日期，根据代码运行时间和主机时区偏移量，可能与本地日期相差1天。
@MortezaTourani 我的理解是 OP 需要一个日期输入，其中只能选择未来的日期。从现在到未来的任何日期都是有效的，从现在到过去的日期不应该是可用的。因此使用“min”属性，因为现在是用户可以选择的“min(imum)”日期，并且没有最大值。将其设置为“最大值”将只允许选择过去的日期。只是为其他人澄清一下，以防我误解了原来的问题。
@Juank 你所做的和解释的正是我的意思。但是有人编辑了您的答案并将min 替换为max 所以，我认为最好恢复编辑。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

参考：http://www.w3.org/TR/html-markup/input.date.html

【讨论】：

@ Jack 但是如果我们使用最大日期为 2014-05-15 那么如果用户在 5 月 15 日之后输入日期呢？
这应该是不允许的
@Jack 而不是使用特定日期，我们不能使用 new Date() 之类的东西，以便根据您电脑中的当前日期限制日期
不能直接使用new Date作为参数，但是可以使用JS注入new Date的值。
@杰克...谢谢:)

【解决方案5】：

其他人提出了有关将最大日期设置为当前日期的问题。建议的答案涉及使用 JavaScript。但我的解决方案是使用服务器端语言为输入生成最大参数。我知道 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 参数，如果您的要求是使用客户端的日期，这可能会或可能不会起作用。对于我的情况，需要服务器的日期，因为这是存储数据的地方。

【讨论】：

与@Html.EditorFor 一起使用

【解决方案6】：

我已经更新了工作小提琴

http://jsfiddle.net/9WVY8/16/

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

【讨论】：

【解决方案7】：

老问题但是一个解决方案，可能对使用 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。

【讨论】：

【解决方案8】：

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

这对我有用。

【讨论】：

【解决方案9】：

您只能使用 JS 和 HTML 来实现：

首先让我们获取实际日期

let n =  new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();

让我们做 minDate 和 Max 日期字符串，并评估我们是否需要在月/日中输入 0 以保持所需的格式：

if(m < 10)
   m = '0' + m.toString();
else if(d < 10)
   d = '0' + d.toString();

let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d

之后，让我们在 HTML 中设置它：

<input name="Fecha_end" type="date" id="#Fecha_end">

let Fecha_end_input = document.getElementById("#Fecha_end")

Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)

总计：

HTML：

<input name="Fecha_end" type="date" id="#Fecha_end">

JS：

let Fecha_end_input = document.getElementById("#Fecha_end")

let n =  new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();
if(m < 10)
   m = '0' + m.toString();
else if(d < 10)
   d = '0' + d.toString();

let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d

Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)

【讨论】：