在输入类型date中设置日期

Question

我将在日期选择器输入中设置今天的日期在 Chrome 中输入日期。

$(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 中尝试代码片段。

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

Answer 2

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

应该可以。

Answer 3

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

上面的代码可以工作。

Answer 4

更新：我正在这样做：

date.toISOString().substr(0, 10)

给出与接受的答案相同的结果，并得到良好的支持。

Answer 5

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

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

Answer 6

如果采用以下格式，您的代码将会有效：

YYYY-MM-DD

，这是日期格式的计算机标准http://en.wikipedia.org/wiki/ISO_8601

Answer 7

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

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

Answer 8

您只能在输入中使用日期

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

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

Answer 10

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

Answer 11

对我来说，获取区域设置日期并以正确的输入格式

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

Answer 12

试试这个，

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

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

Answer 13

一个表达式的解决方案：

$('#datePicker').val(
    new Date()
    .toLocaleDateString("en-US", 
    {year:"numeric",month:"2-digit",day:"2-digit"})
   .replace(/(\d+).(\d+).(\d+)/,"$3-$2-$1")
)

Answer 14

Jquery版本

var currentdate = new Date();

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