Html 将日期输入字段的最大日期设置为今天
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32378590/
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
Set date input field's max date to today
提问by Hyman Johnson
I just have a simple line of code like this:
我只有这样一行简单的代码：
<input type='date' min='1899-01-01' max='2000-01-01'></input>
Is there a simple way to set the max date to "today" instead of 2000-01-01? Or do I have to use Javascript to do this?
有没有一种简单的方法可以将最大日期设置为“今天”而不是 2000-01-01？或者我必须使用Javascript来做到这一点？
回答by Shrinivas Pai
You will need Javascript to do this:
您将需要 Javascript 来执行此操作：
HTML
HTML
<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>
JS
JS
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
today = yyyy+'-'+mm+'-'+dd;
document.getElementById("datefield").setAttribute("max", today);
回答by TRiNE
JavaScript only simple solution
JavaScript 唯一的简单解决方案
datePickerId.max = new Date().toISOString().split("T")[0];<input type="date" id="datePickerId" />回答by rauf
In lieu of Javascript, a shorter PHP-based solution could be:
代替 Javascript，一个更短的基于 PHP 的解决方案可能是：
<input type="date" name="date1" max=
<?php
echo date('Y-m-d');
?>
>
回答by vmkcom
Javascript will be required; for example:
需要 Javascript；例如：
$(function(){
$('[type="date"]').prop('max', function(){
return new Date().toJSON().split('T')[0];
});
});
回答by jafarbtech
toISOString()will give current UTC Date. So to get the current local time we have to get getTimezoneOffset()and subtract it from current time
toISOString()将给出当前的 UTC 日期。所以要获得当前的本地时间，我们必须getTimezoneOffset()从当前时间中减去它
document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];<input type="date" min='1899-01-01' id="dt" />回答by C.C.
Yes, and no. There are min and max attributes in HTML 5, but
是的，也不是。HTML 5 中有 min 和 max 属性，但是
The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types.
max 属性不适用于 Internet Explorer 10+ 或 Firefox 中的日期和时间，因为 IE 10+ 和 Firefox 不支持这些输入类型。
EDIT: Firefox now does support it
So if you are confused by the documentation of that attributes, yet it doesn't work, that's why.
See the W3 pagefor the versions.
因此，如果您对这些属性的文档感到困惑，但它不起作用，这就是原因。
有关版本，请参阅W3 页面。
I find it easiest to use Javascript, s the other answers say, since you can just use a pre-made module. Also, many Javascript date picker libraries have a min/max setting and have that nice calendar look.
我发现使用 Javascript 最容易，其他答案说，因为您可以只使用预制模块。此外，许多 Javascript 日期选择器库都有最小/最大设置，并具有漂亮的日历外观。
回答by Guillaume Harari
it can be useful : If you want to do it with Symfony forms :
它可能很有用：如果你想用 Symfony 表单来做：
$today = new DateTime('now');
$formBuilder->add('startDate', DateType::class, array(
'widget' => 'single_text',
'data' => new \DateTime(),
'attr' => ['min' => $today->format('Y-m-d')]
));
回答by Kiril Dobrev
A short but may be less readable version of one of the previous answers.
先前答案之一的简短但可读性较差的版本。
<script type="text/javascript">
$(document).ready(DOM_Load);
function DOM_Load (e) {
$("#datefield").on("click", dateOfBirth_Click);
}
function dateOfBirth_Click(e) {
let today = new Date();
$("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
}
</script>
回答by Susampath
I also had same issue .I build it trough this way.I used struts 2 framework.
我也有同样的问题。我通过这种方式构建它。我使用了 struts 2 框架。
<script type="text/javascript">
$(document).ready(function () {
var year = (new Date).getFullYear();
$( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate:
0});
});
</script>
<s:textfield name="effectiveDate" cssClass="input-large"
key="label.warrantRateMappingToPropertyTypeForm.effectiveDate"
id="effectiveDateId" required="true"/>
This worked for me.
这对我有用。
