htmldatetimeinputdatetime-local

Optional time in <input type="datetime-local" required>


It is possible to set a default value for the time only or make the time optional for a datetime-local input (see this article as reference: MDN web-docs):

<input type="datetime-local" value="2017-06-01T08:30" required/>

How can I preload only the time or make the time, but not the date optional, e. g.:

<input type="datetime-local" value="YYYY-MM-DDT12:05" required/>

This should look something like this: only time is set


Solution

  • It seems there is no way to do it in a single datetime input, but you can set default value for time input, so use an empty date input and a time input with default value, then use some CSS to make them like they are one input.

    #time{
      border-left:0px;
      margin-left: -6px;
    }
    #date{
      border-right:0px;
    }
    *:focus {
        outline: none;
    }
    <input type="date" required id="date">
    <input type="time" required value="07:30:00" id="time">