pre-populating date input field with Javascript

2019-03-24 06:52发布

站内问答 / JavaScript
716 4 5

I am trying to prepopulate a date into an html "date" input field, but it ignores the values I try to pass:

<html>
...
<input id='date' type='date'>
...
</html>

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...

I have also tried passing the date object as a string

var myDate = new Date().toDateString();
$("#date").val(myDate);

When I open the form, the date field is blank. If I eliminate the type="date" tag, the value shows up as a string, but then I don't have access to the datepicker. How do I pre-populate a date input and still have use of the datepicker? I'm stumped.

Thanks.

4条回答
狗以群分
2楼-- · 2019-03-24 07:17

This below code populates the local date . The accepted answer populates UTC date.

  var date = new Date();
  field = document.querySelector('#date-id');
  var day = date.getDate();
  if(day<10){ day="0"+day;}

  var month = date.getMonth()+1;
  if(month<10){ month="0"+month;}

  field.value = date.getFullYear()+"-"+month+"-"+day;
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-03-24 07:22

It must be set in ISO-format.

(function () {
    var date = new Date().toISOString().substring(0, 10),
        field = document.querySelector('#date');
    field.value = date;
    console.log(field.value);

})()

http://jsfiddle.net/GZ46K/

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
4楼-- · 2019-03-24 07:28

Here is an answer based on Robin Drexlers but in local time.

//Get the local date in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);

//Set the field value
var field = document.querySelector('#date');
field.value = datestr;

If it's a datetime field you're modifying (as opposed to just the date) don't forget to add the time T00:00, or change the substring to 16 characters for example:

//Get the local date and time in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

//Set the field value
var field = document.querySelector('#datetime');
field.value = datestr;
查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-03-24 07:31

Thank you j08691. That link was the answer.

To others struggling like me, when they say input is "yyyy-mm-dd" the MEAN it!

You MUST have 4 digits for the year. You MUST have a dash and no spaces. You MUST have 2 digits for day and month.

In my example myDate.getMonth for January would only return "1" (actually it returns "0" because for some reason javascript counts months from 0-11). To get this right I had to do the following:

var myDate, day, month, year, date;
myDate = new Date();
day = myDate.getDate();
if (day <10)
  day = "0" + day;
month = myDate.getMonth() + 1;
if (month < 10)
  month = "0" + month;
year = myDate.getYear();
date = year + "-" + month + "-" + day;
$("#date").val(date);

I hope this helps others not waste hours like I did testing this before October or before the 10th of the month! LOL

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)