Question

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

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

Answer 1

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

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输入日期的最大属性需要以两位数格式显示月份和日期。

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

所以我添加了以下代码

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

检查我的更新小提琴

参考fiddle demo

Answer 2

在@Chirag Vidani的答案的基础上，可以使用更少的行生成日期：

var now = new Date(),
    minDate = now.toISOString().substring(0,10);

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

Answer 3

其他一些人已经提出了将最大日期设置为当前日期的问题。建议的答案涉及使用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参数，如果您的要求是使用客户的日期，则可能会或可能不会。对于我的情况，服务器的日期是需要的，因为这是存储数据的地方。

Answer 4

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

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

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

Answer 5

我更新了工作小提琴

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

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

Answer 6

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

Answer 7

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

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

这将以正确的两位数格式显示日期和月份。 https://www.php.net/manual/en/function.date.php

Answer 8

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

这对我有用。

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

限制HTML 5日期输入中的未来日期

9 个答案: