CODEWITHSUNDEEP
htmldatetimeinputdatetime-local
Philip F.
Philip F.

Reputation: 1237

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

Upvotes: 2

Views: 2143

Answers (2)

Mohammad Salehi
Mohammad Salehi

Reputation: 776

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">

Upvotes: 1

pr96
pr96

Reputation: 1211

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

Upvotes: 1

Related Questions