1

I am trying to assign a well formatted string variable (yyyy-mm-dd) representing a date, to the value of an <input type="date" />. When the value is a string literal, it works, however when it is coming from a variable or a constant, it doesn't work. You may check the following html code and the rendered html page.

<form>
  <p>Litteral Assignement: <input name="literalDate" type="date" /></p>
  <p>Variable Assignement: <input name="variableDate" type="date" /></p>
</form>
<script>
  var literalDateControl = document.querySelector('input[name="literalDate"]');
  literalDateControl.value = "2019-07-24";
  var today = new Date();
  const todayValue = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
  var variableDateControl = document.querySelector('input[name="variableDate"]');
  variableDateControl.value = todayValue;
</script>

Any idea or suggestions on how to address that?

adiga
  • 34,372
  • 9
  • 61
  • 83
godidier
  • 923
  • 16
  • 34
  • 1
    the format is yyyy-mm-dd. your (today.getMonth() + 1) will result in 7 , you need to add 07 instead . – ThisisFish Jul 24 '19 at 12:10
  • 1
    Note that the `` tag does not use and does not need a closing slash and never has in HTML. – Rob Jul 24 '19 at 12:10

4 Answers4

1

Do you want to set the date with the current date ?

@o-o has an interesting answer at JS - Get YYYYMMDD date by modifying the date prototype to be able to use .yyyymmdd(); on your date to get a string YYYY-MM-DD

    Date.prototype.yyyymmdd = function() {
  var mm = this.getMonth() + 1; // getMonth() is zero-based
  var dd = this.getDate();

  return [this.getFullYear(),
          (mm>9 ? '' : '0') + mm,
          (dd>9 ? '' : '0') + dd
         ].join('-');
    };
    var literalDateControl = document.querySelector('input[name="literalDate"]');
    var today = new Date();
    literalDateControl.value = today.yyyymmdd();

    const todayValue = today.getFullYear()+'-'+(today.getMonth()+1) +'-'+ today.getDate();
    var variableDateControl = document.querySelector('input[name="variableDate"]');
    variableDateControl.value = today.toString();
Dylan KAS
  • 4,840
  • 2
  • 15
  • 33
1

The problem is that your month was not two digits. There are lots of ways to 0 pad single digits, but it might look like this:

const getMonth = date => `${date.getMonth() + 1 < 10 ? '0' : ''}${date.getMonth() + 1}`;

const today = new Date();
const todayTest = today.getFullYear() + '-' + getMonth(today) + '-' + today.getDate();

const fixedTest = "2019-07-24";

document.querySelector('.a').value = todayTest;
document.querySelector('.b').value = fixedTest;

console.log(todayTest)
console.log(fixedTest)
<input class="a" type="date" />
<input class="b" type="date" />
OliverRadini
  • 6,238
  • 1
  • 21
  • 46
0

There's no leading zero behind the month in your todayValue, so you actually only have yyyy-m-dd. todayValue is 2019-7-24 and a date input expects 2019-07-24. You can verify this by manually inserting a zero:

const todayValue = today.getFullYear()+'-'+'0'+(today.getMonth()+1) +'-'+ today.getDate();

This answer has a good solution for this, which i'll adapt slightly for this answer:

todayValue = today.getFullYear() + '-'
             + ('0' + (today.getMonth()+1)).slice(-2) + '-'
             + ('0' + today.getDate()).slice(-2)

Explanation from that answer:

To explain, .slice(-2) gives us the last two characters of the string.

So no matter what, we can add "0" [at the begining of] the day or month [string], and just ask for the last two [characters] since those are always the two we want.

It is worth noting that since today is the 24th you're only running into this problem with the month portion of your date, but as it stands currently the same problem will arise at the beginning of next month as today.getDate() also returns un-padded numbers. So make sure that when you solve it for the month you solve it for the day in the same go.

Community
  • 1
  • 1
koloskus
  • 39
  • 1
  • 7
0
**Month is not in correct format.**
<!DOCTYPE > 
<html>
<head><title>input date</title></head>
<body>
  <form>
    <p>Litteral Assignement: <input name="literalDate" type="date" /></p>
    <p>Variable Assignement: <input name="variableDate" type="date" /></p>
  </form>
  <script>
    var literalDateControl = document.querySelector('input[name="literalDate"]');
    literalDateControl.value = "2019-07-24";

    function formatDateToString(date){
   // 01, 02, 03, ... 29, 30, 31
   var dd = (date.getDate() < 10 ? '0' : '') + date.getDate();
   // 01, 02, 03, ... 10, 11, 12
   var MM = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
   // 1970, 1971, ... 2015, 2016, ...
   var yyyy = date.getFullYear();

   // create the format you want
   return (yyyy + "-" + MM + "-" + dd);
}
    var today = new Date();

    var variableDateControl = document.querySelector('input[name="variableDate"]');
    variableDateControl.value = formatDateToString(today);
  </script>
</body>
</html>
Manoj Sahu
  • 1