如何将输入类型日期的默认值设置为今天？答案

【问题标题】：How to set input type date's default value to today?如何将输入类型日期的默认值设置为今天？
【发布时间】：2022-03-17 06:41:43
【问题描述】：

给定一个输入元素：

<input type="date" />

有没有办法将日期字段的默认值设置为今天的日期？

【问题讨论】：

标签： html date input

【解决方案1】：

与任何 HTML 输入字段一样，浏览器会将日期元素留空，除非在 value 属性中指定了默认值。不幸的是，HTML5 没有提供在HTMLInputElement.prototype.value 中指定'today' 的方法。

必须改为显式提供RFC3339 格式的日期（YYYY-MM-DD）。例如：

element.value = "2011-09-29"

【讨论】：

.net 用户：DateTime.Today.ToString("yyyy-MM-dd")
请注意，月份和日期前的“0”是必需的：“2011-09-29”有效，“2011-9-29”无效。
鲁比：（也）DateTime.now.strftime("%Y-%m-%d")
@MartinBarker 不会是date('Y-m-d')，因为它需要前导零？
对于 JavaScript：myDate.toLocaleDateString('en-CA') 可以解决问题

【解决方案2】：

JavaScript Date 对象为所需格式提供了足够的内置支持，以避免手动操作：

添加这个以获得正确的时区支持：

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

jQuery:

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});

纯 JS：

document.getElementById('datePicker').value = new Date().toDateInputValue();

【讨论】：

请注意您是否支持移动设备。在 Android 4.0.3（至少）上，我遇到了通过弹出日期控件选择的新日期附加到今天的日期，而不是替换它的问题。例如。您最终可以得到 2013-03-252013-03-27 而不是 2013-03-25，并且用户无法更改它。
@Web_Designer 够公平的。然后，您需要先使用local.setMinutes(this.getMinutes() - this.getTimezoneOffset());（最终得到的答案）进行调整。
这仅设置值property，它不设置属性，所以如果表单被重置，它默认为无值。此外，使用 toISOString 会更清晰，这也是 toJSON 的调用方式。
@apraetor 实际上，情况正好相反，因为只有支持日期输入的浏览器才支持valueAsDate（不包括 IE、Firefox，可能还有 Safari，基本上除了 Chrome、Opera、Edge 和一些移动浏览器）。一切都支持我的解决方案使用的value 属性，即使日期输入回退到不支持浏览器中的文本输入，其他解决方案也会出错或失败。
这个答案对我有用，使用 input[type=datetime-local] 并将其更改为 slice(0,19) HTH

【解决方案3】：

使用HTMLInputElement.prototype.valueAsDate:

document.getElementById('datePicker').valueAsDate = new Date();

【讨论】：

它在所有浏览器中都有效吗？和移动版本以及？测试了吗？
@UsmanY 它是 HTML5 规范的一部分，所以任何支持 HTML5 输入类型的东西都应该支持valueAsDate。 html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdate
@harbichidian 日期输入的提议比 valueAsDate 的提议早了一段时间。您是否有该属性的浏览器支持链接？
日期将转换为UTC时间。如果您在 2018 年 3 月 27 日下午 6 点 -0600 并将 valueAsDate 设置为 new Date()，则字段值将设置为 2018-03-28。见austinfrance.wordpress.com/2012/07/09/…
正如@Aupajo 所说，如果您不想要 UTC 时间，这会设置错误的日期。

【解决方案4】：

这依赖于 PHP：

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

【讨论】：

你的答案完全取决于php。
如果您的联系表格在 PHP 页面上（例如，在 WordPress 页面或简码上），这非常有效。非常感谢伊沙姆！
您可以通过将<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?> 更改为<?php echo date('Y-m-d'); ?> 来减少冗余
这将根据 HTML 文档的创建日期（在服务器中，在服务器的时区中）设置日期。在实际填写该字段时，它不需要与当前日期匹配。如果您需要做一些依赖于用户端的事情，客户端 JavaScript 会更好。
你也可以使用短标签 = date('Y-m-d'); ?>。少一个“回声”

【解决方案5】：

您可以通过 JavaScript 填充默认值，如下所示：

http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

我可能会花一些额外的时间来查看月份和日期是否是个位数，并在它们前面加上额外的零......但这应该会给你一个想法。

编辑：添加了额外零的检查。

【讨论】：

在 Opera（在 Opera 12 / Windows 上测试）中，如果您不在月份和日期中放置前导零，则此方法不起作用。

【解决方案6】：

如果您使用的是 PHP，请遵循标准的 Y-m-d 格式

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

【讨论】：

您应该提到，如果您使用的是 php，则此答案有效，但并非所有人都如此。

【解决方案7】：

HTML

<input type="date" id="theDate">

jQuery

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day +"T00:00";       
    $("#theDate").attr("value", today);
});

demo

如果你不想使用 jQuery，你可以这样做

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

demo

TS

const date = new Date()
const year = date.getFullYear()

let month: number | string = date.getMonth() + 1
let day: number | string = date.getDate()

if (month < 10) month = '0' + month
if (day < 10) day = '0' + day

const today = `${year}-${month}-${day}`    
document.getElementById("theDate").value = today;

【讨论】：

【解决方案8】：

在 HTML5 中，没有办法将日期字段的默认值设置为今天的日期吗？如其他答案所示，可以使用 JavaScript 设置该值，如果您希望根据加载页面时用户的当前日期设置默认值，这通常是最好的方法。

HTML5 为 input type=date 元素定义了 valueAsDate 属性，使用它，您可以直接从创建的对象设置初始值，例如通过new Date()。但是，例如IE 10 不知道该属性。（它也缺乏对input type=date 的真正支持，但这是一个不同的问题。）

因此在实践中您需要设置value 属性，并且它必须采用符合ISO 8601 的表示法。现在这可以很容易地完成，因为我们可以预期当前使用的浏览器支持toISOString 方法：

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

【讨论】：

或者如果您希望它符合 Y10K：= new Date().toISOString().split('T')[0];
toISOString 返回 UTC 日期和时间，因此可能无法显示用户时区的正确日期。例如。如果用户是 UTC+0800，那么从午夜到 08:00 他们将获得昨天的日期。

【解决方案9】：

如果你在浏览器中做任何与日期和时间相关的事情，你想使用Moment.js：

moment().format('YYYY-MM-DD');

moment() 返回一个表示当前日期和时间的对象。然后调用它的.format() 方法，根据指定的格式获取字符串表示。在这种情况下，YYYY-MM-DD。

完整示例：

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

【讨论】：

如果您已经有可用的 moment() 或计划在您的 Web 应用程序中做更多的日期工作，那么这个解决方案是不费吹灰之力的。 Moment 解决了很多问题。

【解决方案10】：

Javascript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

jQuery

$('#date-field').val(new Date().toISOString().slice(0, 10));

另一种选择

如果您想自定义日期、月份和年份，只需根据您的意愿进行 sum 或 sub ? 因为月份从 0 开始，这就是为什么需要与月份相加 1。

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

应用今日功能

document.getElementById('date-field').value = today();

$('#date-field').val(today());

【讨论】：

【解决方案11】：

HTML 代码：

<input type="date" value="2022-01-31">

PHP 代码：

<input type="date" value="<?= date('Y-m-d') ?>">

日期格式必须为“yyyy-mm-dd”

【讨论】：

【解决方案12】：

使用 moment.js 用 2 行来解决这个问题， html5 日期输入类型只接受“YYYY-MM-DD”这种格式。我就是这样解决我的问题的。

var today = moment().format('YYYY-MM-DD');
 $('#datePicker').val(today);

这是解决此问题的最简单方法。

【讨论】：

【解决方案13】：

通过应用以下代码，这非常简单，使用PHP

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

日期函数将返回当前日期，通过在time() 中获取日期。

【讨论】：

只能做 - date('Y-m-d');更短。

【解决方案14】：

我测试过的最简单的工作版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date">
<script>
    $('#date').val(new Date().toJSON().slice(0,10));
</script>

【讨论】：

【解决方案15】：

<input id="datePicker" type="date" />

$(document).ready( function() {
    var now = new Date();
 
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;


   $('#datePicker').val(today);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

【讨论】：

【解决方案16】：

非常简单，只需使用 PHP、ASP、JAVA 等服务器端语言，甚至可以使用 javascript。

解决办法

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

【讨论】：

【解决方案17】：

两个最佳答案都不正确。

使用纯 JavaScript 的简短单行代码，考虑本地时区并且不需要定义额外的函数：

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;

&lt;input id='date-input' type='date'&gt;

这会以毫秒为单位（从纪元开始）获取当前日期时间，并以毫秒为单位应用时区偏移量（分钟 * 每毫秒 60k 分钟）。

您可以使用element.valueAsDate 设置日期，但是您需要额外调用Date() 构造函数。

【讨论】：

【解决方案18】：

如果您需要填写输入日期时间，您可以使用：

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

【讨论】：

【解决方案19】：

对于 NodeJS（使用 SWIG 模板表达）：

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

【讨论】：

【解决方案20】：

最简单的解决方案似乎忽略了将使用 UTC 时间，包括投票率很高的解决方案。下面是几个现有答案的精简 ES6 非 jQuery 版本：

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();

console.log(today);  // as of posting this answer: 2019-01-24

【讨论】：

您应该说明输入元素的哪个属性将其分配给它。 value 还是 valueAsDate？不过看起来不错。

【解决方案21】：

这是我在我的代码中所做的，我刚刚测试过，它工作正常，输入 type="date" 不支持自动设置 curdate，所以我用来克服这个限制的方法是使用 PHP 代码一个简单的像这样的代码。

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

希望对你有帮助！

【讨论】：

您好，欢迎来到 SO，请添加更多信息以支持您的代码，并确保提出问题的人想要基于 PHP 的解决方案。

【解决方案22】：

这是你真正需要在服务器端做的事情，因为每个用户的本地时间格式不同，更不用说每个浏览器的行为不同了。

HTML 日期输入值应采用以下格式：yyyy-mm-dd 否则不会显示值。

ASP CLASSIC 或 VBSCRIPT：

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

今天日期的输出：2019-02-08

然后在您的 html 中： <input type="date" value="<% =get_date %>"

PHP

只需使用这个： <input type="date" value="<?= date("Y-m-d"); ?>">

【讨论】：

【解决方案23】：

一个未来证明解决方案，也是.split("T")[0] 的替代方案，它不会在内存中创建字符串数组，将使用String.slice()，如下所示：

new Date().toISOString().slice(0, -14);

这里给出的很多答案，例如slice(0, 10)、substring(0, 10) 等将来都会失败。
他们使用Date.toJSON() 返回Date.toISOString()：

toISOString() 方法以简化的扩展 ISO 格式 (ISO 8601) 返回一个字符串，该字符串的长度始终为 24 或 27 个字符（分别为YYYY-MM-DDTHH:mm:ss.sssZ 或 ±YYYYYY-MM-DDTHH:mm:ss.sssZ）。时区始终为零 UTC 偏移量，由后缀“Z”表示。

一旦年份变成 5 位数，这些答案就会失效。

datePickerId.value = new Date().toISOString().slice(0, -14);

&lt;input type="date" id="datePickerId" /&gt;

【讨论】：

【解决方案24】：

通过 Javascript：

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

【讨论】：

【解决方案25】：

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

【讨论】：

请在您的回答中添加描述。

【解决方案26】：

即使经过这么长时间，它也可能对某人有所帮助。这是简单的 JS 解决方案。

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

类似的解决方案适用于 Angular，无需任何额外的库来转换日期格式。对于 Angular（由于通用组件代码，代码被缩短）：

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />

【讨论】：

这对于只需要使用默认值来说太麻烦了。
您要指出的两个独立示例中的哪一个？两个示例中的 4 行代码....第一个示例是纯 html +js，因此如果您不计算 cmets，请创建容器并复制粘贴代码的 3 行。角度示例也是如此，这就是我留下评论的原因。不知道你的意思....

【解决方案27】：

一个简单的解决方案：

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

【讨论】：

@GeorgeJempty 如果当前 UTC 时间与当前日期不同，则不会。它将以 UTC 格式返回当前日期，而不是您当地的时区。
@adjenks 嘿，我知道这是我测试的最佳时间，离午夜还有 10 分钟
@adjenks 我终于写出了六行代码，避免了 UTC 陷阱，并在现有的几个类似的 jQuery/非 ES6 答案上略有改进：stackoverflow.com/a/54341296/34806
Answer 在行尾有一个额外的 ")"，并且在 "new Date()" 周围有多余的括号。应该是：document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);

【解决方案28】：

这会以与 ISO 中相同的 YYYY-MM-DD 格式返回，但使用的是您的本地时间，而不是 UTC。

function getToday() {
    return new Date().toLocaleDateString('en-CA', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}

【讨论】：

【解决方案29】：

如果您使用的是 ruby，您可以使用它来将默认值设置为今天的日期和时间：

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

【讨论】：

【解决方案30】：

由于日期类型只接受“yyyy-MM-dd”格式，因此需要对日期值进行相应的格式化。

这是解决方法，

var d = new Date();
var month = d.getMonth();
var month_actual = month + 1;

if (month_actual < 10) {
  month_actual = "0"+month_actual; 
  }

var day_val = d.getDate();
if (day_val < 10) {
  day_val = "0"+day_val; 
  }

document.getElementById("datepicker_id").value = d.getFullYear()+"-"+ month_actual +"-"+day_val;

【讨论】：