How do i change the date format from yyyy mm dd in html?

It is impossible to change the format

We have to differentiate between the over the wire format and the browser's presentation format.

Wire format

The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC 3339 specification for more details.

This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.

Presentation format

Browsers are unrestricted in how they present a date input. At the time of writing Chrome, Edge, Firefox, and Opera have date support (see here). They all display a date picker and format the text in the input field.

Desktop devices

For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.

Internet Explorer 9, 10, and 11 display a text input field with the wire format.

Mobile devices

Specifically for Chrome on Android, the formatting is based on the Android display language. I suspect that the same is true for other browsers, though I've not been able to verify this.

answered Mar 1, 2012 at 15:59

David WalschotsDavid Walschots

11.8k5 gold badges35 silver badges55 bronze badges

12

Since this question was asked quite a few things have happened in the web realm, and one of the most exciting is the landing of web components. Now you can solve this issue elegantly with a custom HTML5 element designed to suit your needs. If you wish to override/change the workings of any html tag just build yours playing with the shadow dom.

The good news is that there’s already a lot of boilerplate available so most likely you won’t need to come up with a solution from scratch. Just check what people are building and get ideas from there.

You can start with a simple (and working) solution like datetime-input for polymer that allows you to use a tag like this one:

or you can get creative and pop-up complete date-pickers styled as you wish, with the formatting and locales you desire, callbacks, and your long list of options (you’ve got a whole custom API at your disposal!)

Standards-compliant, no hacks.

Double-check the available polyfills, what browsers/versions they support, and if it covers enough % of your user base… It's 2018, so chances are it'll surely cover most of your users.

Hope it helps!

answered Aug 21, 2015 at 22:01

sdudesdude

7,8692 gold badges19 silver badges24 bronze badges

8

As previously mentioned it is officially not possible to change the format. However it is possible to style the field, so (with a little JS help) it displays the date in a format we desire. Some of the possibilities to manipulate the date input is lost this way, but if the desire to force the format is greater, this solution might be a way. A date fields stays only like that:

The rest is a bit of CSS and JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

It works nicely on Chrome for desktop, and Safari on iOS (especially desirable, since native date manipulators on touch screens are unbeatable IMHO). Didn't check for others, but don't expect to fail on any Webkit.

Mark Amery

131k78 gold badges392 silver badges441 bronze badges

answered Jul 1, 2015 at 13:14

pmuchapmucha

1,1471 gold badge7 silver badges3 bronze badges

11

It's important to distinguish two different formats:

• The RFC 3339/ISO 8601 "wire format": YYYY-MM-DD. According to the HTML5 specification, this is the format that must be used for the input's value upon form submission or when requested via the DOM API. It is locale and region independent.
• The format displayed by the user interface control and accepted as user input. Browser vendors are encouraged to follow the user's preferences selection. For example, on Mac OS with the region "United States" selected in the Language & Text preferences pane, Chrome 20 uses the format "m/d/yy".

The HTML5 specification does not include any means of overriding or manually specifying either format.

answered Jul 9, 2012 at 18:11

JohnJohn

28.3k10 gold badges75 silver badges78 bronze badges

3

I found a way to change format, it's a tricky way, I just changed the appearance of the date input fields using just a CSS code.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}

answered Dec 7, 2019 at 10:32

2

I believe the browser will use the local date format. Don't think it's possible to change. You could of course use a custom date picker.

answered Sep 10, 2011 at 13:39

Michael MiorMichael Mior

27.4k8 gold badges87 silver badges111 bronze badges

3

Google Chrome in its last beta version finally uses the input type=date, and the format is DD-MM-YYYY.

So there must be a way to force a specific format. I'm developing a HTML5 web page and the date searches now fail with different formats.

random

9,61510 gold badges68 silver badges79 bronze badges

answered Jun 16, 2012 at 15:30

TuramarthTuramarth

1631 silver badge2 bronze badges

5

Browsers obtain the date-input format from user's system date format.

(Tested in supported browsers, Chrome, Edge.)

As there is no standard defined by specs as of now to change the style of date control, it~s not possible to implement the same in browsers.

Users can type a date value into the text field of an input[type=date] with the date format shown in the box as gray text. This format is obtained from the operating system's setting. Web authors have no way to change the date format because there currently is no standards to specify the format.

So no need to change it, if we don't change anything, users will see the date-input's format same as they have configured in the system/device settings and which they are comfortable with or matches with their locale.

Remember, this is just the UI format on the screen which users see, in your JavaScript/backend you can always keep your desired format to work with.

To change the format in Chrome (e.g. from US "MM/DD/YYYY" to "DD/MM/YYYY") you go to >Settings >Advanced >Add language (choose English UK). Then:

The browser gets restarted and you will find date input fields like this: ´25/01/2022

Refer google developers page on same.

Test using below date input:

answered May 26, 2018 at 19:23

Rahul R.Rahul R.

5,4693 gold badges26 silver badges36 bronze badges

7

After having read lots of discussions, I have prepared a simple solution but I don't want to use lots of Jquery and CSS, just some javascript.

HTML Code:

CSS Code:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript Code :

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

Output:

ChrisW

4,8437 gold badges54 silver badges87 bronze badges

answered Sep 2, 2015 at 7:40

ashish bhattashish bhatt

3,0215 gold badges24 silver badges23 bronze badges

I searched this issue 2 years ago, and my google searches leads me again to this question. Don't waste your time trying to handle this with pure JavaScript. I wasted my time trying to make it dd/mm/yyyy. There's no complete solutions that fits with all browsers. So I recommend to use momentJS / jQuery datepicker or tell your client to work with the default date format instead

answered Apr 22, 2020 at 17:18

Ali Al AmineAli Al Amine

1,4393 gold badges32 silver badges50 bronze badges

Try this if you need a quick solution To make yyyy-mm-dd go "dd- Sep -2016"

1) Create near your input one span class (act as label)

2) Update the label everytime your date is changed by user, or when need to load from data.

Works for webkit browser mobiles and pointer-events for IE11+ requires jQuery and Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });

#date_input{text-indent: -500px;height:25px; width:200px;}

answered Jun 22, 2015 at 17:32

MiguelMiguel

3,0632 gold badges29 silver badges28 bronze badges

2

As said, the is not fully implemented in most browsers, so let's talk about webkit like browsers (chrome).

Using linux, you can change it by changing the environment variable LANG, LC_TIME don't seems to work(for me at least).

You can type locale in a terminal to see your current values. I think the same concept can be applied to IOS.

eg: Using:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

The date is showed as mm/dd/yyyy

Using:

LANG=pt_BR /opt/google/chrome/chrome

The date is showed as dd/mm/yyyy

You can use http://lh.2xlibre.net/locale/pt_BR/ (change pt_BR by your locale) to create you own custom locale and format your dates as you want.

A nice more advanced reference on how change default system date is: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ and https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

You can see you real current date format using date:

$ date +%x
01-06-2015

But as LC_TIME and d_fmt seems to be rejected by chrome ( and I think it's a bug in webkit or chrome ), sadly it don't work. :'(

So, unfortunately the response, is IF LANG environment variable do not solve your problem, there is no way yet.

answered Jun 1, 2015 at 13:28

tonton

3,2891 gold badge36 silver badges36 bronze badges

1

It's not possible to change web-kit browsers use user's computer or mobiles default date format. But if you can use jquery and jquery UI there is a date-picker which is designable and can be shown in any format as the developer wants. the link to the jquery UI date-picker is on this page http://jqueryui.com/datepicker/ you can find demo as well as code and documentation or documentation link

Edit:-I find that chrome uses language settings that are by default equal to system settings but the user can change them but developer can't force users to do so so you have to use other js solutions like I tell you can search the web with queries like javascript date-pickers or jquery date-picker

answered Jun 4, 2014 at 7:55

Since the post is active 2 Months ago. so I thought to give my input as well.

In my case i recieve date from a card reader which comes in dd/mm/yyyy format.

what i do. E.g.

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

what the code do:

1. it splits the date which i get as dd/mm/yyyy (using split()) on basis of "/" and makes an array,
2. it then reverse the array (using reverse()) since the date input supports the reverse of what i get.
3. then it joins (using join())the array to a string according the format required by the input field

All this is done in a single line.

i thought this will help some one so i wrote this.

answered Sep 16, 2019 at 8:00

1

I adjusted the code from Miguel to make it easier to understand and I want to share it with people who have problems like me.

Try this for easy and quick way

$("#datePicker").on("change", function(e) {

  displayDateFormat($(this), '#datePickerLbl', $(this).val());

});

function displayDateFormat(thisElement, datePickerLblId, dateValue) {

  $(thisElement).css("color", "rgba(0,0,0,0)")
    .siblings(`${datePickerLblId}`)
    .css({
      position: "absolute",
      left: "10px",
      top: "3px",
      width: $(this).width()
    })
    .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`));

}

function getDateFormat(dateValue) {

  let d = new Date(dateValue);

  // this pattern dd/mm/yyyy
  // you can set pattern you need
  let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`;

  return dstring;
}

.date-selector {
  position: relative;
}

.date-selector>input[type=date] {
  text-indent: -500px;
}

answered Feb 9, 2021 at 9:54

A3IOUA3IOU

2491 gold badge3 silver badges11 bronze badges

NEW in Firefox (since unknown version), in Settings > Language, they have added an option: Use your operating system settings for “Spanish (Spain)” to format dates, times, numbers, and measurements

This option will use the Operating System's locale to display dates! Too bad it does not come enabled by default (maybe from a fresh install it does?)

answered Sep 29, 2021 at 14:49

andreszsandreszs

2,8063 gold badges25 silver badges31 bronze badges

3

Angular devs (and maybe others) could consider this partial solution.

My strategy was to detect the focus state of the input field, and switch between date and text type accordingly. The obvious downside is that the date format will change on input focus.

It's not perfect but insures a decent level of consistency especially if you have some dates displayed as text and also some date inputs in your web app. It's not going to be very helpful if you have just one date input.

And simply declare myInputFocus = false at the beginning of you component class. Obviously point myDate to your desired control.

answered Feb 9 at 23:20

Thanks to @safi eddine and @Hezbullah Shah

Datepicker with VanillaJS and CSS.

CSS - STYLE:

/*================== || Date Picker ||=======================================================================================*/

/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
    color: transparent;    
}




/*------- DatePicker ------------------------*/
input[type="date"] {
    background-color: aqua;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    font-weight: 900;
}





/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus 
{
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}






input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: #fff;
    position: relative;    
}



    /*------- Year ------------------------*/
    input[type="date"]::-webkit-datetime-edit-year-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 56px;
    }


    /*------- Month ------------------------*/
    input[type="date"]::-webkit-datetime-edit-month-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 26px;
    }



    /*------- Day ------------------------*/
    input[type="date"]::-webkit-datetime-edit-day-field {
        position: absolute !important;
        color: #000;
        padding: 2px;
        left: 4px;
    }

JAVASCRIPT:

 // ================================ || Format Date Picker || ===========================================================
    function GetFormatedDate(datePickerID)
    {
        let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
        return rawDate.split('-').reverse().join("-"); // Reverse the date
    }

USING:

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID

answered May 31, 2021 at 19:01

Stefan27Stefan27

4694 silver badges12 bronze badges

const birthday = document.getElementById("birthday");

const button = document.getElementById("wishBtn");


button.addEventListener("click", () => {
  let dateValue = birthday.value;
  // Changing format :)
  dateValue = dateValue.split('-').reverse().join('-');

  alert(`Happy birthday king/Queen of ${dateValue}`);
});

Clik Me

answered Jul 7 at 12:33

1

I know it's an old post but it come as first suggestion in google search, short answer no, recommended answer user a custom date piker , the correct answer that i use is using a text box to simulate the date input and do any format you want, here is the code

date : 

    ▼


  

1- please note that this method only work for browser that support date type.

2- the first function in JS code is for browser that don't support date type and set the look to a normal text input.

3- if you will use this code for multiple date inputs in your page please change the ID "xTime" of the text input in both function call and the input itself to something else and of course use the name of the input you want for the form submit.

4-on the second function you can use any format you want instead of day+" / "+month+" / "+year for example year+" / "+month+" / "+day and in the text input use a placeholder or value as yyyy / mm / dd for the user when the page load.

answered Sep 21, 2018 at 17:32

shadyshady

92 bronze badges

How do I change the date format in HTML?

How do I change the default date in HTML form?

How do I change the date format in HTML w3schools?

How do I change the format of a date field?