0

When entering a first date in form field with ID dateInput and running the function showEndDate the inputDate + 21 days is outputted to the console successfully but no maximum is being set on form field with ID end_date. What is incorrect with my use of setAttribute("max", inputDate). ?

I have tested entering a fixed value such as setAttribute("max", '2021-10-31') and this works 31st Oct does get set correctly as the upper max value in the date field ! :( :S

// Declare values for use in functions
    let dateInput = document.getElementById("dateInput");
    var endDateInput = document.getElementById("end_date");

// Shows the end date field
    function showEndDate() {
      var inputValue = dateInput.value;
      var inputDate = new Date(inputValue);
      if(inputValue != "") {
        document.getElementById("panel").style.display = "block";
      } else {
        alert("Date cannot be blank");
      }
      inputDate.setDate(inputDate.getDate() + 21);
      console.log(inputDate);
      endDateInput.setAttribute("max", inputDate);
    }

<input id="dateInput" type="date" name="manufacture_one" required ></div>

also end date:

<input id="end_date" type="date" name="holiday_end_date" >
Jeanclaude
  • 189
  • 1
  • 4
  • 15
  • 1
    _"`max`: The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the `max` attribute **isn't a possible date string in the format `yyyy-mm-dd`**, then the element has no maximum date value."_ – Andreas Oct 23 '21 at 10:24
  • `inputDate.toString()` does not return a string in the format `yyyy-mm-dd` – Andreas Oct 23 '21 at 10:24
  • thanks Andreas `inputDate.toString()` does NOT return `yyyy-mm-dd` great to know thanks ! So how can I return the SQL date format required please ? post as answer and i'll accept it. thanks again for your help. – Jeanclaude Oct 23 '21 at 10:27
  • 2
    @Jeanclaude See https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date and any of dozens of others. – T.J. Crowder Oct 23 '21 at 10:30
  • great thanks @T.J.Crowder i've gone with `inputDate = inputDate.toISOString().split('T')[0]; endDateInput.setAttribute("max", inputDate);` – Jeanclaude Oct 23 '21 at 10:38

1 Answers1

0

inputDate is a Date, but attribute values are strings. So the date is being converted to string using the default toString method, which doesn't provide the date in the format expected of the max attribute.

You'll need to format it explicitly. There are lots of ways to do it, one of which (if you want the date in UTC [and yes, it matters even just for dates without times]) is inputDate.toString().substring(0, 10). But again, that'll be in UTC. If you want local time, you'll have to format it another way. There are lots of examples of formatting dates here on SO (here for example) and on the web.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • thanks T.K.Crowder so i've tried adding `inputDate.setDate(inputDate.getDate() + 21); console.log(inputDate); inputDate.toString().substring(0, 10); endDateInput.setAttribute("max", inputDate);` but this hasn't resolved my issue. – Jeanclaude Oct 23 '21 at 10:29
  • You're still using the date object, not the string that `toString().substring(0, 10)` returns. – T.J. Crowder Oct 23 '21 at 10:30