Date input not working in firefox

Question

I have the following date input:

<div class="form-group">
    <label for="start_date">Start Date</label>
    <input type="date" class="form-control" name="start_date" id="start_date" placeholder="mm/dd/yyyy">
</div>

If I click on it in chrome, a date picker pops up:

However, if I click it in firefox, the datepicker does not pop up:

Does anyone know why this is happening and/or how I can fix it in firefox so it is consistent?

Note - I am using bootstrap 3

Thanks in advance!!

Answer 1

The root cause of why the format not working the same on all browsers is due to the different implementation of the javascript Date() constructor on different browsers:

alert (new Date ('30/12/2017')) ->

Firefox:

"Invalid Date"

(that may be correct depending on definition).

IE:

"Wed Jun 12 2019..."

(now that is wrong!)

.. this comes from C/C++ internal: it is converting 30 to 2 years (24 months) + 6 months -> Jun (Dec + 6 months) 2019 (2017 + 2 years).

Basically, it's working badly on ALL browsers!

You can change (or override date function) "jquery.validate.js":

Here is the fix. This works for a client of mine:

You will also notice that for IE and so on, it does more checking by not allowing many bad dates.

// http://docs.jquery.com/Plugins/Validation/Methods/date

date: function (value, element) {

// test
// alert (new Date('30/12/2017'))

// original - bad
// return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());

// fix
var oInst = $.datepicker._getInst(element)
var sDateFormat = $.datepicker._get(oInst, "dateFormat")
var oSettings = $.datepicker._getFormatConfig(oInst)
var dtDate = null
try {
    dtDate = $.datepicker.parseDate(sDateFormat, value, oSettings)
} catch (ex) { }

return this.optional(element) || dtDate != null

},

Cheers, Ron Lentjes, LC CLS