Clear datetime-local with required

Question

I have a problem with datetime-local picker in HTML5. I want to clear the datetime with the clear button, but this is not possible because the "required" function inside the input will not allow. I will let a piece of code to see the differences. One is with required and one without required. Do you know how to keep the "required" and also clear the input from ex: "15/03/2022 00:00 AM" to mm/dd/yyyy --:-- --. Thank you.

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

    <input type="datetime-local" name="start_timestamp" id="start_timestamp" required>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

Maik Lowrey · Answer 1 · 2022-03-15T14:42:40.910

The attribute required is responsible for whether the reset button is shown or not. If required is set, you must solve the reset programmatically. You do this for the type datetime-local with yourDateElement.valueAsDate = null.

const clearBtn = document.getElementById('clear-btn');
clearBtn.addEventListener('click', () => {
  const d =   document.getElementById('start_timestamp');
  d.valueAsDate = null
})

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" value="" required>

<button id="clear-btn" onclick="clear()">clear</button>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

Works for Chrome too

const clearBtn = document.getElementById('clear-btn');
clearBtn.addEventListener('click', () => {
  const d =   document.querySelector('input[type=datetime-local]');
  d.value = 0
})

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" value="" required>

<button id="clear-btn" onclick="clear()">clear</button>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

This works on Firefox but an error is thrown on Edge and on Chrome. — Tom, Mar 15 '22 at 14:35
@Tom Thanks for this information! I wasn't aware of that. I add a update to my answer — Maik Lowrey, Mar 15 '22 at 14:42

score 1 · Accepted Answer · edited Aug 12 '22 at 11:04

I'm afraid it's not possible.

According to the documentation :

The control's UI varies in general from browser to browser.

On Chrome the clear button is inside a popover and does nothing if the field is required. But on Firefox (following screenshot) the clear button is inside the input and is not shown if the field is required.

You should add your own clear button next to each input :

function clearInput(id) {
  document.getElementById(id).value = "";
}

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" required>
<button type="button" title="clear" onclick="clearInput('start_timestamp')">x</button>

<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">
<button type="button" title="clear" onclick="clearInput('meeting-time')">x</button>

Clear datetime-local with required

2 Answers2

Works for Chrome too