在输入类型 date 中设置日期答案

【问题标题】：Set date in input type date在输入类型 date 中设置日期
【发布时间】：2012-09-03 00:09:11
【问题描述】：

我将在 Chrome 中的 datepicker 输入 type 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 中尝试使用代码 sn-p。

【问题讨论】：

如果您在小提琴上选择一个日期并检查结果框架，则执行 $('#datePicker').val(); 会得到 "2012-09-10" 而这不是您用于设置日期的格式
它在我的终端上运行在 chrome 中.. its not working 到底是什么意思？
试试：{ currentText: "Now" }，见manual
对我工作...有什么问题？
@JigarPandya fr_FR（@user108，另见stackoverflow.com/a/3496622/180100）

标签： javascript html jquery date

【解决方案1】：

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”是我的日期选择器所需的格式。如果您的不同，您可以查找匹配的字符串格式。由于它将其转换为字符串，因此它不包含用于弄乱每个区域的额外信息。因此，通过这种方式，您可以将其用于纯粹的格式化。

【讨论】：

【解决方案2】：

试试这个，

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

注意：您需要将 Moment.js 添加为依赖项

【讨论】：

【解决方案3】：

document.getElementById("datePicker").@987654321@ = new Date()

应该可以。

【讨论】：

我发现由于某种原因这在 Safari 中不起作用:(
在 Chrome 和 Edge 中测试并发现工作正常。正如@Skipjack 所说，答案很棒！
看起来是正确的解决方案，但是在 Safari (13.1.2) 中，调用会为您提供无效状态异常。不知道为什么...？
caniuse.com/mdn-api_htmlinputelement_valueasdate

【解决方案4】：

对我来说，获取语言环境日期和正确格式以输入type="date" 的最短方法是：

var d = new Date(); 
var today = d.getFullYear()+"-"+("0"+(d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);

或者这个：

var d = new Date().toLocaleDateString().split('/');
var today = d[2]+"-"+("0"+d[0]).slice(-2)+"-"+("0"+d[1]).slice(-2);

然后只需设置日期输入值：

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

【讨论】：

【解决方案5】：

您只能在输入type="date" 中使用日期，格式为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'}}" />

【讨论】：

【解决方案6】：

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

上面的代码可以工作。

【讨论】：

【解决方案7】：

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

【讨论】：

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

【讨论】：

当我有多个日期要调整并且手头没有 moment.js 时真的很好

【解决方案9】：

更新：我正在使用date.toISOString().substr(0, 10) 执行此操作。给出与接受的答案相同的结果，并得到很好的支持。

【讨论】：

在 safari 中工作
注意： 这给出了 UTC 时区的日期。相比之下，最佳答案使用的是当地时间。
@OlivUtilo - 不，它们不会在主机的时区偏移期间。
正如 Qwertie 所说，如果您使用没有时间的日期，这可能会给出错误的答案。例如 Sat Sep 01 2018 00:00:00 GMT+0100 被转换为“2018-08-31”
[deleted previous comment for inaccuracy] 所以我在想，时区需要设置在date，然后在这种情况下（或者在toISOString之前强制设置UTC 0？）

【解决方案10】：

jQuery 版本

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

【讨论】：

$.datepicker 不是默认的 jQuery。你用的是插件，不说是哪个，这个答案没用。

【解决方案11】：

对我来说，解决这个问题的最短方法是使用 moment.js 并在 2 行中解决这个问题。

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

【讨论】：

是的，就像 $('#datePicker').val(moment().format('YYYY-MM-DD'));
对于不熟悉 Moment 的人，如果你想用 moment() 格式化任意 Javascript Date 对象：var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD');$('#datePicker').val(yourFormattedDate);
我建议不要这样做。下载一个库来做一些相对容易的事情。但截至 2021 年，moment.js 无论如何都是一个遗留项目

【解决方案12】：

如果您的代码采用以下格式：YYYY-MM-DD，您的代码将可以工作，这是日期格式的计算机标准http://en.wikipedia.org/wiki/ISO_8601

【讨论】：

【解决方案13】：

小提琴链接：http://jsfiddle.net/7LXPq/93/

这里有两个问题：

HTML 5 中的日期控件接受我们在 SQL 中使用的年-月-日格式
如果月份为9，则需要设置为09，而不是简单的9。所以它也适用于 day 字段。

请按照小提琴链接进行演示：

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

【讨论】：

2012 年之后的答案：在一行代码中检查我的答案以获得支持的解决方案。
@OlivUtilo — 当然，但您的回答有时会提供不正确的结果。
你节省了我的时间，非常感谢