How can you integrate datalist with datetime-local

Question

I am trying to create an html datetime-local field which tells the user they can only pick from certain dates. Previous answers (such as this one - Disable certain dates from html5 datepicker) have always suggested using MIN/MAX attributes. They fail to appreciate there is (perhaps more recently added) the List attribute which apparently can link to a datalist (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#date_and_time_types). Whilst the example in the previous link uses time, it is apparently possible to do it with the datetime-local and I would expect the following to work (but of course for some reason it isn't).

<!DOCTYPE>
<html lang="en">
    <body>

        <label for="dateChoice">Choose a date:</label>
        <input type="datetime-local" list="dateList" id="dateChoice">

        <datalist id="dateList">
            <option value="05/06/2023">05/06/2023</option>
            <option value="07/06/2023">07/06/2023</option>
            <option value="2023-06-07"></option>
            <option value="2023-06-14"></option>
            <option value="2023-06-20"></option>
            <option value="2023-06-21"></option>
        </datalist>
    </body>
</html>

What am I doing wrong? From the examples I would suspect I was on the right track but when I run this, there is no indication of a suggested date??

Antony · Accepted Answer · 2023-06-02 14:46:31Z

0

Answer was quite obvious - because this is a datetime - the value options needed a time too!

answered Jun 2, 2023 at 14:46

Antony

4,4421 gold badge34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matheus Richard · Accepted Answer · 2025-11-12 22:09:53Z

0

The datetime-local input requires a specific format for the value strings. In the OP, they're missing the time.

I struggle with this myself because Ruby also adds the timezone by default. You need to format time objects correctly with something like:

Time.now.strftime("%Y-%m-%dT%H:%M")

answered Nov 12 at 22:09

Matheus Richard

75410 silver badges20 bronze badges

Collectives™ on Stack Overflow

How can you integrate datalist with datetime-local

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related