Question 184176 in Html Question posted in
Some basic documentation can be found here.

Html – What do input min and max actually do?

I was expecting min and max for <input> to limit the selectable options to the range in between the two values. They do in <input type="number">, for example. But with type="datetime-local" they don’t. As far as I can tell, they don’t actually do much of anything?

<label for="select_start">Without min/max</label>
<input type="datetime-local" id="select_start">

<label for="select_end">With min/max</label>
<input type="datetime-local" id="select_end" min="2023/5/9" max="2023/6/8">

Both are exactly the same, so far as I can tell (viewing them on Google Chrome in 2023).

Do min and max actually do anything? And what can I do to limit the selectable options to the desired range?

Tags:

2

Answers


  1. 0

    The min and max attributes do not work with datetime-local input types. These are generally used with date or numeric input.
    Restricting selectable options to a certain range using the datetime-local type requires the use of a custom validation approach in JavaScript.

    Login or Signup to reply.
  2. 0

    You understood correctly that you can narrow down the range of the input value using the min and max attributes. You just provided the date in the wrong format. Since you created a "datetime-local" type input field, the minimum and maximum values need to be in the standard ISO 8601 format: yyyy-mm-ddThh:mm, such as 1970-01-01T23:59.

    Example

    // Just show value of range
const value = document.querySelector("#rangeValue")
const input = document.querySelector("#rangeInput")
value.textContent = input. Value
input.addEventListener("input", (event) => {
  value.textContent = event.target.value
})
    div {
  margin: 5px;
}
    <form>
  <div>
    <label for="number">number</label>
    <input type="number" name="" min="1000" max="2000">
  </div>

  <div>
    <label for="range">range</label>
    <input type="range" name="range" id="rangeInput" min="-4" max="10" step="2">
    <output id="rangeValue"></output>
  </div>

  <div>
    <label for="date">date</label>
    <input type="date" name="date" min="2023-05-09" max="2023-06-08">
  </div>

  <div>
    <label for="time">time</label>
    <input type="time" name="time" min="12:00" max="14:00">
  </div>

  <div>
    <label for="datetime-local">datetime-local</label>
    <input type="datetime-local" name="datetime-local" min="2023-05-09T00:00" max="2023-06-08T00:00">
  </div>

  <div>
    <label for="week">week</label>
    <input type="week" name="week" min="2023-W12" max="2023-W14">
  </div>

  <input style="display: none;" name="disable-form" required>

  <button type="submit">Test</button>
</form>

    More information

    Global Date(Time) Formats for HTML – MDN
    Attributes for <input type="number"> – MDN
    Attributes for <input type="date"> – MDN
    Attributes for <input type="datetime-local"> – MDN

    Warning

    It’s important to note that you should never trust user input! It’s great that you have enforced the minimum and maximum values here, making it easier for the user to select a date. However, malicious users can still send values outside of this range to the server, so it’s crucial to validate the received input on the server-side to ensure it meets your expectations. Adversarial visitors are still capable of transmitting values that deviate from your requirements, which is why you need to perform server-side checks to verify if the received value is appropriate.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search