Date format issue in mozila firefox

JavaScript
1

When I open my form in Mozilla firefox than date is displayed in following format mm/dd/yyyy
where as In Chorme date is displayd in dd/mm/yyyy format.
How can I display date in following format dd/mm/yyyy in mozilla as well ?

2

According to this information…

<input type="date">

…Firefox displays it as dd/mm/yyyy

3

According to that link,

the displayed date is formatted based on the locale of the user’s browser,

So possibly you’re using a proxy with one and not the other, or there is some other difference in the settings of your two browsers.

4 Likes
4

To ensure that the date is displayed in the dd/mm/yyyy format in Mozilla Firefox, you can use JavaScript to control the date format. Browsers like Firefox and Chrome may have different default behaviors for displaying dates, especially in HTML5 date input fields. Here’s a basic approach using JavaScript:

  1. Use JavaScript to Format the Date: When the form is loaded or when the date input value changes, use JavaScript to format the date in the dd/mm/yyyy format. This ensures consistency across different browsers.

Here’s a simple example:

document.addEventListener('DOMContentLoaded', function () {
    var dateInputs = document.querySelectorAll('input[type="date"]');

    dateInputs.forEach(function(input) {
        input.addEventListener('change', function() {
            var date = new Date(this.value);
            var day = ('0' + date.getDate()).slice(-2);
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var year = date.getFullYear();

            this.value = day + '/' + month + '/' + year;
        });
    });
});

This script will change the format of all <input type="date"> elements on your page. Ensure that your input fields can handle and submit the date in this format.

Good luck.

5

I tried this but the date still displaying as month is first than the day. as shown in attached image below

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    var dateInputs = document.querySelectorAll('input[type="date"]');

    dateInputs.forEach(function(input) {
        input.addEventListener('change', function() {
            var date = new Date(this.value);
            var day = ('0' + date.getDate()).slice(-2);
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var year = date.getFullYear();

            this.value = day + '/' + month + '/' + year;
        });
    });
});
</script>

image
image1031Ă—323 7.41 KB

6

no i am not using any proxy. but its still displaying month as one which is very unfortunate for me.

7

below is my input code

<label>Date</label> <input type="date"  name= "code"  id= "code" class="form-control">

and this is atatched image which display month first

image
image1031Ă—323 7.41 KB

8

Sorry for being a little bit off topic, but in which country is

dd/mm/yy

A valid format? I only know USA who are using month before day and they are the only ones who are using a slash as a separator. All other countries I know use day before month but they use a. Point as a separator.

Changing the format of your date input to a fix one is never a good idea as it may confuse people who are using a different format. That’s why the browsers use the format which is used in the country they assume to be in. That could of course lead to problems if you use a proxy or a vpn cause then the browser does not know your real location.

To have a 100% solution, the user needs to be able to select his preferred date format.

9

Respected SIr!
I am from Pakistan, and in whole country dd always come before month, Currently month is displaying before day which causing lot of confusion here in my office. I tried different solution but firefox still displaying month before day

10

As far as I know it is still not possible to change the date format easily. There is a library which is helping you doing this. Maybe this will help you

1 Like