JS: Insert a value into input type date

Question

I want to insert a current date into an input in form with javascript, but it is not working, here are my codes:

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("registrationday").value = getDay()

  function getDay() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();

    today =  "\"" + yyyy + '-' + mm + '-' + dd + "\"";
    return today
  }
})

<input type="date" id="registrationday" name="registrationday" disabled>

There is NO need to use a custom function for what you are trying to achieve. just use this `document.getElementById('registrationday').valueAsDate = new Date();` — Always Helping, Oct 16 '21 at 23:54

Spectric · Answer 1 · 2021-10-17T00:00:27.020

Remove the quotes:

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("registrationday").value = getDay()

  function getDay() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();

    today =  yyyy + '-' + mm + '-' + dd;
    return today
  }
})

<input type="date" id="registrationday" name="registrationday" disabled>

However, a better solution is just to assign the current date to the input's valueAsDate property (suggested by @Always Helping):

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("registrationday").valueAsDate = getDay()

  function getDay() {
    return new Date()
  }
})

<input type="date" id="registrationday" name="registrationday" disabled>

why NOT -> `document.getElementById('registrationday').valueAsDate = new Date();` - keep it simple ayyy. — Always Helping, Oct 16 '21 at 23:57
@AlwaysHelping Yes, that's certainly a better solution. I was simply pointing out what was wrong with OP's solution. — Spectric, Oct 16 '21 at 23:58

score 2 · Answer 2 · answered Oct 16 '21 at 23:56

var currentDate= new Date();

var day = ("0" + currentDate.getDate()).slice(-2);
var month = ("0" + (currentDate.getMonth() + 1)).slice(-2);

var today = currentDate.getFullYear()+"-"+(month)+"-"+(day) ;

document.getElementById("datepicker").value = today;

score 1 · Answer 3 · answered Oct 16 '21 at 23:54

Solved with this JS:

document.addEventListener("DOMContentLoaded", function(){
var date = new Date ();
var day = datum.getDate(),
    month = datum.getMonth() + 1,
    year = datum.getFullYear();
var today = day + "-" + month + "-" + day ;

document.getElementById('registrationday').value = today;  
});

HTML:

<input type="date" id="registrationday" name="registrationday" disabled>

score 0 · Answer 4 · answered Oct 16 '21 at 23:50

0

Your function returns "\"2021-10-17\"" which is invalid format (unnecessary slash, and double quote)

Just change "\"" + yyyy + '-' + mm + '-' + dd + "\"";

To: today = yyyy + '-' + mm + '-' + dd; at it will return correct output 2021-10-17

answered Oct 16 '21 at 23:50

user3075373

44
1
4
19

JS: Insert a value into input type date

4 Answers4