在输入类型日期中设置日期

我将在 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 中的代码片段。

366193 次浏览
小开
最佳答案

小提琴链接: 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);
小开

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

应该可以。

小开

您的代码将工作，如果它是在这种格式: YYYY-MM-DD，这是日期格式 http://en.wikipedia.org/wiki/ISO_8601的计算机标准

小开

对我来说，解决这个问题的最快方法是使用 Moment.js，并且只用两行代码就可以解决这个问题。

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

更新: 我正在用 date.toISOString().substr(0, 10)做这件事。给出了与已接受的答案相同的结果，并且得到了很好的支持。

小开

Jquery 版本 

var currentdate = new Date();


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

在使用日期输入时，我通常创建这两个 helper 函数:

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

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

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

以上代码将工作。

小开

在输入 type="date"中只能使用格式为 YYYY-MM-DD的日期

我已经在 NODE.js Express-handlebar 中将 helper 实现为 formatDate，不用担心... 只要使用第一行描述的格式即可。

例如:

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

对我来说，获得区域设置日期和输入 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);
小开

试试这个,

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

注意: 您需要添加 Moment.js 作为一个依赖项

小开

二零二一年

我发现这样做的一个很好的方法是使用 locale 进行格式化。你可以用很多不同的方式使用它。这适用于不使用 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


提交答案