Optional time in

Question

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:

The simple answer to your question is "no, unfortunately this is not possible". You might be able to "fake" it with a regular text input and some trickery, but would certainly involve some JS on the validation side of things. — exside, Dec 14 '22 at 19:15
I am not sure if this [Link](https://stackoverflow.com/questions/25323854/setting-default-time-value-for-datetime-local) will assist in answering your question — Hlabi, Dec 15 '22 at 12:58

pr96 · Answer 1 · 2022-12-16T01:44:59.727

If I understand the question well, the above-pointing time can not be archived.

The datatime-local attribute value is a string representing a local date and time. Regarding RFC3339 data and time, the return value should be data and time representation.

As a solution we can define the time inside a <time> HTML tag. The <time> HTML Tag is an HTML5 element in the Html file that indicates either a timestamp on a 24-hour clock or a date in the calendar.

Ex:

<p>The birthday of John is on <time datetime="2022-02-28">next Sunday</time>.</p>

<p>I've finally uploaded my first ever vlog <time datetime="2022-02-17T06:00-08:00">6am last Tuesday</time>.</p>

See Time Refernce W3Schools HTML Tag

score 1 · Accepted Answer · edited Dec 23 '22 at 01:07

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;
}
#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">

Optional time in

2 Answers2