如何将输入类型日期的默认值设置为今天？-解网

问：

给定一个输入元素：

<input type="date" />

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

HTML 日期输入

答：

392赞 Tak 8/8/2011 #1

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

相反，必须明确提供RFC3339格式的日期（）。例如：YYYY-MM-DD

element.value = "2011-09-29"

77赞 dvdmn 5/14/2014

对于 .net 用户：DateTime.Today.ToString（“yyyy-MM-dd”）

5赞 nico 8/6/2015

请注意，月份和日期前面的“0”是必需的：“2011-09-29”有效，“2011-9-29”无效。

4赞 Adam Grant 3/2/2016

Ruby：（也）DateTime.now.strftime("%Y-%m-%d")

46赞 SGR 4/25/2016

@MartinBarker这难道不是因为它需要前导零吗？date('Y-m-d')

37赞 Ulysse BN 1/21/2018

对于 JavaScript：解决问题myDate.toLocaleDateString('en-CA')

49赞 Jeff 8/8/2011 #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);
});

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

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

0赞 Renato 7/3/2012

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

149赞 Isham Mohamed 7/25/2012 #3

这依赖于 PHP：

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

89赞 Yëco 11/7/2012

你的答案完全取决于php。

1赞 tristanojbacon 11/14/2012

如果您的联系表单位于 PHP 页面上（例如，在 WordPress 页面或简码上），则效果很好。非常感谢伊沙姆！

8赞 Murray Rowan 1/22/2013

您可以通过将<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?><?php echo date('Y-m-d'); ?>

7赞 Jukka K. Korpela 5/29/2013

这将根据 HTML 文档的创建日期（在服务器中，在服务器的时区中）设置日期。它不需要与实际填写字段时的当前日期匹配。如果您需要执行依赖于用户端的操作，则客户端 JavaScript 会更好。

5赞 sashok_bg 9/17/2015

您也可以使用短标签 <？= date（'Y-m-d'）; ？>。少一个“回声”

275赞 brianary 10/24/2012 #4

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

添加此内容以获得正确的时区支持：

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

j查询：

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

纯 JS：

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

1赞 Ben Clayton 3/27/2013

请注意您是否支持移动设备。在 Android 4.0.3（至少）上，我遇到了通过弹出日期控件选择的新日期附加到今天日期而不是替换它的问题。例如，您可能以 2013-03-252013-03-27 而不是 2013-03-25 结束，并且用户无法更改它。

1赞 brianary 12/31/2013

@Web_Designer 很公平。然后，您需要先调整（因为答案最终会达到）。local.setMinutes(this.getMinutes() - this.getTimezoneOffset());

1赞 RobG 9/10/2015

这仅设置 value 属性，不设置属性，因此如果重置表单，则默认为无值。此外，使用 toISOString 会更清晰，无论如何，这就是 toJSON 调用的内容。

2赞 brianary 11/18/2016

@apraetor 实际上，情况正好相反，因为只有支持日期输入的浏览器才支持（这不包括 IE、Firefox、Safari，基本上除了 Chrome、Opera、Edge 和一些移动浏览器之外的所有浏览器）。一切都支持我的解决方案使用的属性，即使日期输入回退到不支持的浏览器中的文本输入，另一个解决方案也会出错或失败。valueAsDatevalue

3赞 Canica 11/22/2019

这个答案对我有用，使用 a 并将其更改为 HTHinput[type=datetime-local]slice(0,19)

6赞 teshguru 12/2/2012 #5

很简单，只需使用服务器端语言，如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>

36赞 user2985029 3/9/2013 #6

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

演示

如果你不想使用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;

演示

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;

308赞 André 4/15/2013 #7

使用 HTMLInputElement.prototype.valueAsDate：

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

1赞 Usman Younas 4/15/2015

它是否适用于所有浏览器？还有移动版本？测试？

3赞 wersimmon 5/20/2015

@UsmanY 它是 HTML5 规范的一部分，因此任何支持 HTML5 输入类型的东西都应该支持 .html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdatevalueAsDate

1赞 brianary 11/16/2016

@harbichidian 日期输入的提议比 valueAsDate 的提议早了一段时间。您是否有指向该属性的浏览器支持的链接？

8赞 Aupajo 3/28/2018

该日期将转换为 UTC 时间。如果您在 2018-03-27 下午 6 点在 -0600 中，并且将设置为，则字段值将设置为 2018-03-28。查看 austinfrance.wordpress.com/2012/07/09/...valueAsDatenew Date()

2赞 ADJenks 1/24/2019

正如@Aupajo所说，如果您不想要UTC时间，这将设置错误的日期。

33赞 Jukka K. Korpela 5/29/2013 #8

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

HTML5 定义了元素的属性，使用它，您可以直接从创建的对象（例如由 .但是，例如 IE 10 不知道该属性。（它也缺乏真正的支持，但这是一个不同的问题。valueAsDateinput type=datenew Date()input type=date

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

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

8赞 Blazemonger 1/31/2014

或者，如果您希望它符合 Y10K 标准：= new Date().toISOString().split('T')[0];

3赞 RobG 9/10/2015

toISOString 返回 UTC 日期和时间，因此可能无法显示用户时区的正确日期。例如，如果用户是 UTC+0800，那么从午夜到 08：00，他们将获得昨天的日期。

5赞 user2615287 3/5/2014 #9

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

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

4赞 Gumba 5/28/2014 #10

这就是我在代码中所做的，我刚刚测试过，它工作正常，input 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>

希望对你有所帮助！

1赞 Shiva 5/28/2014

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

25赞 Gabriel Garcia 10/16/2014 #11

如果您在浏览器中执行与日期和时间相关的任何操作，则需要使用 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>

0赞 secretwep 6/30/2018

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

12赞 Umair Khalid 6/12/2015 #12

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

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

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

38赞 Shuhad zaman 11/15/2015 #13

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

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

2赞 Motassem Kassab 11/2/2016

您应该提到，如果您使用的是 PHP，则此答案有效，并非每个人都如此。

2赞 Charnstyle 4/25/2016 #14

来自 Javascript：

var today = new Date();

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

2赞 kingsuede 9/10/2016 #15

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

1赞 owais 9/10/2016

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

5赞 CodeValve 12/28/2016 #16

对于 NodeJS（带有 SWIG 模板的 Express）：

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

2赞 gajam 7/22/2018 #17

一个简单的解决方案：

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

1赞 ADJenks 1/24/2019

@GeorgeJempty 如果 UTC 中的当前时间与当前日期不同，则不会出现这种情况。它将返回 UTC 中的当前日期，而不是本地时区。

0赞 Dexygen 1/24/2019

@adjenks 呵呵，我看到这是我测试的最佳时机，距离午夜还有 10 分钟

0赞 Dexygen 1/24/2019

@adjenks 我终于抽出六行来避免 UTC 陷阱，并在现有的几个类似的 jQuery/non-ES6 答案上略有改进： stackoverflow.com/a/54341296/34806

0赞 KWallace 4/6/2020

Answer 在行尾有一个额外的“）”，多余的在“new Date（）”周围有多余的部分。应该是：document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);

8赞 Santanu 8/31/2018 #18

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

5赞 Dexygen 1/24/2019 #19

最简单的解决方案似乎忽略了将使用 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

0赞 ADJenks 1/25/2019

您应该说明要将输入元素分配给哪个属性。或？不过看起来不错。valuevalueAsDate

4赞 csandreas1 2/8/2019 #20

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

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

7赞 rovyko 2/24/2019 #21

两个顶级答案都是不正确的。

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

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

<input id='date-input' type='date'>

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

您可以使用 but 设置日期，然后对构造函数进行额外的调用。element.valueAsDateDate()

23赞 MD Iyasin Arafat 4/4/2019 #22

Java脚本

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

Jquery

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

另一种选择

如果您想自定义日期、月份和年份，只需根据需要😎进行总和或子对于月份开始形式 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 );
    }

应用 today 函数

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

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

10赞 Gowtham Ag 11/6/2019 #23

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

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

Date 函数将返回当前日期，方法是在中获取日期。time()

1赞 user2643679 4/27/2021

可以做 - date（'Y-m-d'）;更短。

3赞 StefaDesign 12/5/2019 #24

即使经过了这么多时间，它也可能对某人有所帮助。这是简单的 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"  />

0赞 reformed 3/14/2020

对于只需要使用默认值来说，这太麻烦了。

0赞 StefaDesign 3/28/2020

您试图指出的两个独立例子中的哪一个？在两个示例中，它的 4 行代码......第一个例子是纯 html +js，所以如果你不计算注释，请创建容器并复制粘贴代码它的 3 行。角度示例也是如此，这就是我发表评论的原因。不知道你的意思......

12赞 Zaffer 1/28/2021 #25

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

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

3赞 T J 5/7/2021 #26

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

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

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

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

一旦年份变为 5 位数字，这些答案将失败。

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

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

26赞 Davide 6/21/2021 #27

HTML格式：

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

PHP的：

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

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

2赞 pref 11/15/2021 #28

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

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

4赞 Ichinga Samuel 10/30/2022 #29

以匹配原始查询。

date.value = new Date().toJSON().split('T')[0]

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

5赞 user3221512 11/16/2022 #30

在一行 JS 中是可能的。

HTML格式：

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

JS：

document.getElementById('theDate').value = new Date().toISOString().substring(0, 10);

document.getElementById('theDate').value = new Date().toISOString().substring(0, 10);

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

上一个：用户输入和命令行参数 [已关闭]

下一个：“for”属性在 HTML <label> 标签中有什么作用？

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

How to set input type date's default value to today?

评论

评论

评论

评论

评论

JQuery

演示

JS公司

演示

TS系列

评论

评论

评论

评论

评论

评论

对于 NodeJS（带有 SWIG 模板的 Express）：

评论

评论

评论

评论