Clear readonly input date with jquery val() fails on Firefox, success on Chrome. Why?

Question

I run into a different behaviour between Firefox and Chrome with JQuery.val('')

Here is jsfiddle showing the issue. https://jsfiddle.net/mdqfbj/d4eovkg8/3/

A radio button calls a JS function to clear some fields, including some <input type="date" >.

In Chrome it works fine, while in Firefox the date inputs are cleared only if they are not readonly.

Since readonly controls user inputs, I am expecting .val('') to work whether readonly is present.

Why isn't so ?

Answer 1

Following on from the comments under your question, this is an issue to do with how the browsers have implemented the HTML/JS specification. As such, there's nothing you can do except make the field editable, change its value, then make it readonly again:

$('#shippingOffDate').prop('readonly', false).val('').prop('readonly', true);