Html 限制 HTML5 日期输入中的未来日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23671407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict future dates in HTML5 date input
提问by Erandi
I want to restrict a user to only being able to add future dates in a HTML date input.
我想限制用户只能在 HTML 日期输入中添加未来日期。
Instead of jQuery UI date picker I want to add HTML5 calender. Can anyone tell me how can I restrict the input to future dates?
我想添加 HTML5 日历而不是 jQuery UI 日期选择器。谁能告诉我如何将输入限制在未来的日期？
回答by Chirag Vidani
You can use min and max attributes of HTML5 input date
您可以使用 HTML5 输入日期的 min 和 max 属性
HTML5 code
HTML5 代码
<input type="date" name="bday" min="2014-05-11" max="2014-05-20">
EDIT
编辑
You need to use jQuery to achieve it
你需要使用jQuery来实现它
jQuery code
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);
});
Explanationmax attribute of HTML5 input date takes month and day in double digit format.
说明HTML5 输入日期的 max 属性采用两位数格式的月和日。
Ex: 5 (Month) is not valid whereas 05 (Month) is valid Ex: 1 (Day) is not valid whereas 01 (Day) is valid
例如：5（月）无效而 05（月）有效 例如：1（日）无效而 01（日）有效
So I have added below code
所以我添加了下面的代码
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
Check my updated fiddle
检查我更新的小提琴
Refer fiddle demo
参考小提琴演示
回答by Juank
To build on @Chirag Vidani's answer, the datecan be generated with fewer lines like this:
以@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);
回答by H Dog
Some others have asked the question about setting the max date to the current date. The suggested answers involve using JavaScript. But my solution was to use the server side language to generate the max parameter for the input. I know the OP didn't ask about a server-side approach. But this solution works well for me using C# Razor as my server language.
其他一些人询问了有关将最大日期设置为当前日期的问题。建议的答案涉及使用 JavaScript。但我的解决方案是使用服务器端语言为输入生成 max 参数。我知道 OP 没有询问服务器端方法。但是这个解决方案对我使用 C# Razor 作为我的服务器语言很有效。
On the server I write:
在服务器上我写：
@Html.TextBox("CurrentDate",
Model.CurrentDate.ToString("yyyy-MM-dd"),
new {
@class = "form-control",
@type = "date",
max = DateTime.Now.ToString("yyyy-MM-dd")
})
And then MVC outputs this Html:
然后MVC输出这个Html：
<input class="form-control" id="CurrentDate" name="CurrentDate"
type="date" max="2016-11-10" value="2016-11-10">
With other server languages the approach would be to similarly generate the max parameter using the Server's date, which may or may not work if your requirement is to use the Client's date. For my situation the Server's date is what is needed because that's where the data is stored.
对于其他服务器语言，方法是使用服务器的日期类似地生成 max 参数，如果您的要求是使用客户端的日期，这可能会也可能不会起作用。对于我的情况，需要服务器的日期，因为这是存储数据的地方。
回答by James Hibbard
Use the max attribute which is the expected upper bound for the element's value.
使用 max 属性，它是元素值的预期上限。
<input type="date" max="2014-05-15"/>
回答by Vinoth
I have updated the Working fiddle
我已经更新了工作小提琴
HTML & js:
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();
}
});
回答by ccaring
Old Question But a solution, may help someone using JQuery:
老问题但是一个解决方案，可能会帮助使用 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);
});
The date format should be YYYY-MM-DD.
日期格式应为 YYYY-MM-DD。
回答by Painguin
Here is a PHP solution that gets today's date and sets it as the maximum.
这是一个 PHP 解决方案，它获取今天的日期并将其设置为最大值。
<input type="date" name="bday" max="<?php echo date("Y-m-d"); ?>">
This will put it in the correct double-digit format for the day and month. https://www.php.net/manual/en/function.date.php
这将把它放在正确的日期和月份的两位数格式中。 https://www.php.net/manual/en/function.date.php
回答by anuj rajak
<input type="date" value="<?php echo date("Y-m-d"); ?>" max="<?php echo date("Y-m-d"); ?>">
This worked for me.
这对我有用。
