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

【问题标题】：How to set input type date's default value to today?如何将输入类型日期默认值设置为今天？
【发布时间】：2011-10-22 09:35:37
【问题描述】：

给定一个输入元素：

<input type="date" />

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

【问题讨论】：

This question might help
这可能会有所帮助stackoverflow.com/questions/14212527/…
解决方法：stackoverflow.com/a/38801898/3147690
var date = new Date(); //创建日期对象 var min_date = date.toISOString().slice(0,10); ////获取当前日期特定部分“2018-02-02”

标签： 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 填充默认值，如下所示：

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

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

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

【讨论】：

【解决方案3】：

由于没有将值设置为今天日期的默认方法，我想说这应该取决于它的应用程序。如果您希望最大限度地提高受众对日期选择器的曝光率，请使用服务器端脚本（PHP、ASP 等）设置默认值。

但是，如果它用于 CMS 的管理控制台，并且您知道用户将始终拥有 JS 或您的站点受信任，那么您可以安全地使用 JS 填充默认值，按照 jlbruno。

【讨论】：

【解决方案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 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

【解决方案6】：

非常简单，只需使用 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>

【讨论】：

【解决方案7】：

对于那些使用 ASP VBScript 的人

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

然后在正文中，您的元素应该看起来像这样

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

干杯！

【讨论】：

【解决方案8】：

HTML

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

JS

$(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，你可以这样做

HTML

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

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 +"T00:00";       
document.getElementById("theDate").value = today;

demo

【讨论】：

【解决方案9】：

使用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 时间，这会设置错误的日期。

【解决方案10】：

在 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 他们将获得昨天的日期。

【解决方案11】：

谢谢彼得，现在我更改我的代码。

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

【讨论】：

拜托，拜托，请不要在实际应用中使用 document.write - 使用它有很多问题。
彼得，你能解释一下什么问题吗？你有吗？
彼得，还提到你如何在 input type=date 中获取当前日期作为默认值
并不是说它不起作用，而是总的来说使用document.write是不好的做法。出现这种情况的原因有很多，这里有一些例子：stackoverflow.com/questions/802854/… 如果我必须在客户端的 javascript 中执行此操作，我会使用元素上的 id 和 document.getElementById 来获取元素和更改它，类似于此页面上的其他一些答案。

【解决方案12】：

这是使用 javascript 执行此操作的简单方法。

    var date = new Date();
    var datestring = ('0000' + date.getFullYear()).slice(-4) + '-' + ('00' + (date.getMonth() + 1)).slice(-2) + '-' + ('00' + date.getDate()).slice(-2) + 'T'+  ('00' +  date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z';
    document.getElementById('MyDateTimeInputElement').value = datestring;

【讨论】：

【解决方案13】：

我遇到了同样的问题，我用简单的 JS 修复了它。输入：

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

重要提示：JS脚本应该在最后一行，或者在输入之后，因为如果你把这段代码放在前面，脚本将找不到你的输入。

【讨论】：

如果你仍然使用 PHP，why bother with JavaScript?

【解决方案14】：

HTML 本身没有将今天的日期插入输入字段的默认方法。但是，与任何其他输入字段一样，它会接受一个值。

您可以使用 PHP 获取今天的日期并将其输入到表单元素的 value 字段中。

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

值字段接受格式 YYYY-MM-DD 作为输入，因此只需创建一个变量$date_string，其格式与输入值接受的格式相同，并用从今天获取的年、月和日填充它，然后瞧！您有自己的预选日期！

希望这会有所帮助:)

编辑：

如果您希望将输入字段嵌套在 HTML 而不是 PHP 中，您可以执行以下操作。

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

我意识到这个问题是在不久前（2 年前）被问到的，但我仍然需要一段时间才能在互联网上找到明确的答案，所以这适用于任何正在寻找答案的人并希望它对每个人都有很大帮助:)

另一个编辑：

差点忘了，过去对我来说非常痛苦的事情是，每当在 PHP 中编写使用 date() 函数的脚本时，总是忘记设置默认时区。

语法是date_default_timezone_set(...);。可以在 here at PHP.net 和 the list of supported timezones to insert into the function can be found here 找到文档。这总是很烦人，因为我在澳大利亚，如果我没有正确设置，一切都会被推迟 10 小时，因为它默认为 UTC+0000，我需要 UTC+1000，所以要小心:)

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

这是我在我的代码中所做的，我刚刚测试过，它工作正常，输入 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 的解决方案。

【解决方案17】：

如果你在浏览器中做任何与日期和时间相关的事情，你想使用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 解决了很多问题。

【解决方案18】：

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

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

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

【讨论】：

【解决方案19】：

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

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

【讨论】：

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

【解决方案20】：

通过 Javascript：

var today = new Date();

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

【讨论】：

【解决方案21】：

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

【讨论】：

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

【解决方案22】：

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

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

【讨论】：

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

一个简单的解决方案：

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

【解决方案25】：

<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" />

【讨论】：

【解决方案26】：

最简单的解决方案似乎忽略了将使用 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？不过看起来不错。

【解决方案27】：

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

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

【讨论】：

【解决方案28】：

两个最佳答案都不正确。

使用纯 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() 构造函数。

【讨论】：

【解决方案29】：

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

【讨论】：

【解决方案30】：

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

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

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

【讨论】：

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