CODEWITHSUNDEEP
javascripthtmlfirefox
Nidhin Kumar
Nidhin Kumar

Reputation: 3579

input type datetime-local is not working in firefox

I have an input type of datetime-local which is working fine in chrome but when i try to run the same page in firefox it shows text box instead of datepicker.I have tried using modernizer but still the problem exist can anyone tell me how could the datetime-local issue can be fixed in firefox.

<div class="form-group" ng-class="{'has-error': vm.basicInfoForm.validFrom.$invalid && (vm.basicInfoForm.validFrom.$dirty || vm.basicInfoForm.$submitted)}">
               <label translate >.NEW.STARTDATE</label>
               <input type="datetime-local" name="validFrom"  class="form-control" name="fromdate" ng-model="vm.basicInfo.validFrom"/>
               <span class="help-block error-block basic-block" translate>.NEW.CHECKDATE</span>
            </div>

Upvotes: 33

Views: 43360

Answers (4)

Alex from Jitbit
Alex from Jitbit

Reputation: 60626

Firefox support for datetime-local is very limited and buggy, the info at "caniuse" and MDN is misleading.

  1. Firefox does not support time-picker for the datetime-local input. It only supports typing-in the time manually.

  2. If the user picks the date only (which happens a lot, see #1) - then the whole input returns null as its value. Also empty/null will be posted to the server.

  3. Changing the date only in the dropdown does not trigger onchange event.

They have an open bug about this for 2 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=1726108

UPD: 3 years now

Upvotes: 5

Script47
Script47

Reputation: 14540

A report was created for this issue on the official bug tracker. It was closed recently (< 1 month ago as of writing this) with the status RESOLVED FIXED and it has been implemented in the the Firefox Nightly build (93.0a1 2021-09-02).

With the above in mind, we should see this update rolled out soon, hopefully.

Example of datetime-local in the Nightly build:

Example of datetime-local

Example of visible picker in the Nightly build:

Example of vsisible picker

Reading Material

Release Timeline

Upvotes: 8

Pooja Gcp
Pooja Gcp

Reputation: 1

Input type "datetime-local" is not supported in Firefox hence it shows a text box, in this case, you can use input type as "date".

As "datetime-local" shows the time as well and if you have the same requirement, you can use Input type "time" also to show the time.

I hope this helps.

Upvotes: 2

Pablo Pazos
Pablo Pazos

Reputation: 3216

Is not supported, check their documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility

Upvotes: 24

Related Questions