在日期输入框中设置日期

Question

我将在Chrome中的日期选择器输入date类型，设置为今天的日期。

$(document).ready(function() {
    let now = new Date();
    let today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    console.log(today);
    $('#datePicker').val(today);
});

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

然而，它并没有生效。

请在Chrome浏览器中尝试代码片段。

- Sender

---

如果您在您的fiddle上选择一个日期并检查结果框架，执行$('#datePicker').val();会得到"2012-09-10"，这不是您用于设置日期的格式。 - user180100

你的计算机日期时间格式是什么？ - Jigar Pandya

@JigarPandya fr_FR (@user108，请参见https://dev59.com/TXA75IYBdhLWcg3wDUm2#3496622) - user180100

我的计算机日期格式为 dd/MM/yyyy。 - Sender

它可以工作，但是您的日期必须采用这种格式 YYYY-MM-DD。 - Dominic

Answer 1

示例链接: http://jsfiddle.net/7LXPq/93/

这里有两个问题:

1. HTML 5中的日期控件接受我们在SQL中使用的年-月-日格式
2. 如果月份是9，则需要以09的形式设置，而不是简单地设置为9。这同样适用于日期字段。

请查看示例链接进行演示:

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

- Dhanasekar Murugesan

---

2012年后的回答：检查我的答案，这是一个一行代码支持的解决方案。 - Oli Beatson

@OlivUtilo - 当然，但你的答案有时会产生错误的结果。 - RobG

你节省了我的时间，伙计，非常感谢。 - Dip Surani

Answer 2

document.getElementById("datePicker").valueAsDate = new Date()

应该可以工作。

- int32_t

---

我发现这个在Safari中出了一些问题 :( - James Alvarez

在Chrome和Edge中测试，发现工作正常。正如@Skipjack所说，这是一个很棒的答案！ - Arun

看起来是正确的解决方案，但在Safari浏览器（13.1.2）中，调用会导致“无效状态异常”。不确定为什么...？ - fbitterlich

https://caniuse.com/mdn-api_htmlinputelement_valueasdate - xd1936

谢谢，日期输入是一个巨大的痛点，现在这是正确答案，因为Safari也可以工作了。 - podperson

Answer 3

var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

以上代码可以正常运行。

- Gourav Makhija

---

请注意，输入中的val()部分是本地时间，而toISOString()输出的是UTC时间。这可能会导致日期错误，或者至少如果使用Date + Time类型的输入，则会设置错误的小时数。 - René W.

Answer 4

更新：我使用date.toISOString().substr(0, 10)来完成这个任务。它能够得到与被接受的答案相同的结果，并且有很好的支持。

- Oli Beatson

---

适用于Safari。 - James Alvarez

注意：这提供的是UTC时区的日期。相比之下，顶部答案使用的是本地时间。 - Qwertie

@OlivUtilo - 不，它们不会针对主机的时区偏移期间进行调整。 - RobG

正如Qwertie所说，如果您使用没有时间的日期，则可能会得到错误的答案。例如，Sat Sep 01 2018 00:00:00 GMT+0100将被转换为“2018-08-31”。 - havlock

这个答案的UTC格式是一个巨大的问题，使得这个一行的答案...不再是一行了。在转换为ISOString之前，您必须根据GMT和夏令时添加或减去小时数。 - Radim Nyč

Answer 5

对我来说，解决这个问题最短的方法是使用moment.js，在只有两行代码的情况下解决这个问题。

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

- Umair Khalid

---

是的，就像$('#datePicker').val(moment().format('YYYY-MM-DD'));一样。 - Umair Khalid

对于不熟悉 Moment 的人，如果您想使用 moment() 格式化任意的 JavaScript Date 对象： var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate); - veuncent

我建议不要这样做。下载一个库来完成相对简单的任务。但是截至2021年，moment.js已经是一个遗留项目了。 - Radim Nyč

Answer 6

你的代码如果按照这种格式编写：YYYY-MM-DD，就可以正常工作了。这是计算机日期格式的标准，你可以在http://en.wikipedia.org/wiki/ISO_8601上查看更多信息。请注意保留HTML标记。

- Dominic

Answer 7

只能在中使用YYYY-MM-DD格式的日期。

我已经在NODE.js express-handlebars中实现了helper作为formatDate，无需担心...只需按照第一行描述的格式使用即可。

例如：

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />

- Muhammad Shahzad

Answer 8

当使用日期输入时，我通常会创建这两个辅助函数：

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

您可以将日期输入值设置为：

$('#datePicker').val(dateToInput(new Date()));

然后像这样检索所选的值

const dateVal = inputToDate($('#datePicker').val())

- aashah7

---

当我需要调整多个日期，而手头没有moment.js时，这真的很方便。 - Mr Moose

Answer 9

2021

我发现一个很好的方法是使用本地化格式。您可以以许多不同的方式使用它。这适用于您没有使用jquery日期选择器，而是使用html日期选择器的情况。

  $("#datepickerEnd").val(new Date().toLocaleDateString('en-CA'));//YYYY-MM-dd

或者分割以便于操作、调整或其他用途。

let theDate = new Date();
  $("#datepickerEnd").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

操作示例。

  theDate.setDate(theDate.getDate()-7);
  $("#datepickerStart").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

" 'en-ca' 是我所需的日期选择器格式。如果您的不同，可以寻找匹配的字符串格式。由于它将其转换为字符串，因此它不包含可能会影响特定地区的额外信息。因此，您可以仅用于格式化。"

"更多信息请参见："

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

- Draco

Answer 10

Datetimepicker总是需要输入格式为YYYY-MM-DD，它不关心您模型的显示格式，也不关心您本地系统的日期时间格式。但是Datetimepicker的输出格式是您想要的（您本地系统的格式）。在我的帖子中有一个简单的例子。

- Eda Jede