Resetting Value of <input type="time"> in Firefox

Question

I found an funny cross-browser issue using jQuery's .val to clear HTML time inputs. I want to dynamically disable the input and clear the value in a form. It appears that Firefox needs that to happen in a particular order in order to achieve the desired results, Chrome and Safari don't seem to care about this order. I've got the same code in a jsfiddle.

I'm curious if anyone knows what's happening behind the scenes to cause this issue. Is this a bug in jQuery?

$('#reset-jq').click(function() {
    $('#time-jq').val('').prop('disabled', true);
});

$('#reset-jqn').click(function() {
    $('#time-jqn').prop('disabled', true).val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong><code>.val</code> before disable:</strong> works on desktops: Chrome, Safari and Firefox</p>
<input id="time-jq" type="time" value="11:11">
<button id="reset-jq">Clear</button>
<br><br>
<p><strong>disable before <code>.val</code>: </strong> works on desktops: Chrome, Safari, but not Firefox</p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>

Answer 1

In Firefox, it appears once a time input has been disabled the value attribute can only be changed to a valid time value - something like 00:00, or 13:30. For example, using:

$(#INPUT_ID).prop('disabled', true).val('00:00');

will set the input to disabled, and change the input to display 12:00 AM (instead of the default --:-- --).

$('#reset-jqn-noval').click(function() {
    $('#time-jqn-noval').prop('disabled', true).val('');
});

$('#reset-jqn').click(function() {
    $('#time-jqn').prop('disabled', true).val('00:00');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>disable before <code>.val</code> with val("")</strong> </p>
<input id="time-jqn-noval" type="time" value="11:11">
<button id="reset-jqn-noval">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("00:00") </strong></p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>

Turns out the same result happens when using pure JavaScript. Disabling the input before setting the value to "" has no effect in Firefox. But disabling the input before setting the value to a valid time does work.

document.getElementById("INPUT_ID").disabled = true;
document.getElementById("INPUT_ID").value = "";

document.getElementById('reset-jqn-noval').addEventListener('click', function() {
    document.getElementById("time-jqn-noval").value = "";
    document.getElementById("time-jqn-noval").disabled = true;  
});

document.getElementById('reset-jqn').addEventListener('click', function() {
    document.getElementById("time-jqn").disabled = true;
    document.getElementById("time-jqn").value = "";
});

document.getElementById('reset-jqn-value').addEventListener('click', function() {
    document.getElementById("time-jqn-value").disabled = true;
    document.getElementById("time-jqn-value").value = "00:00";
});

<p><strong>disable after <code>.val</code> with val("")</strong></p>
<input id="time-jqn-noval" type="time" value="11:11">
<button id="reset-jqn-noval">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("")</strong></p>
<input id="time-jqn" type="time" value="11:11">
<button id="reset-jqn">Clear</button>
<br/><br/>
<p><strong>disable before <code>.val</code> with val("00:00") </strong></p>
<input id="time-jqn-value" type="time" value="11:11">
<button id="reset-jqn-value">Clear</button>

So, to answer your question, this issue isn't limited to only jQuery, as the same result occurs with plain JavaScript. But it's still not known how to clear the disabled time input.

I have filed a bug for this issue.