Clear datetime-local with required

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

I’m affraid 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.

Clear datetime-local with 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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x