How do i change the date format in html?

I am wondering whether it is possible to set the date format in the html tag... Currently it is yyyy-mm-dd, while I need it in the dd-mm-yyyy format.

asked Aug 8, 2011 at 6:47

3

I found same question or related question on stackoverflow

Is there any way to change input type=“date” format?

I found one simple solution, You can not give particulate Format but you can customize Like this.

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:

answered Sep 2, 2015 at 8:48

ashish bhattashish bhatt

3,0215 gold badges24 silver badges23 bronze badges

4

If you're using jQuery, here's a nice simple method

$["#dateField"].val[new Date[].toISOString[].substring[0, 10]];

Or there's the old traditional way:

document.getElementById["dateField"].value = new Date[].toISOString[].substring[0, 10]

answered Jan 24, 2014 at 3:14

sean.boyersean.boyer

1,12716 silver badges24 bronze badges

Why not use the html5 date control as it is, with other attributes that allows it work ok on browsers that support date type and still works on other browsers like firefox that is yet to support date type

answered Jul 6, 2016 at 16:23

Paul I.EPaul I.E

1091 silver badge2 bronze badges

3

$['input[type="date"]'].change[function[]{
   alert[this.value.split["-"].reverse[].join["-"]]; 
}];

answered Jul 31, 2017 at 7:20

1

I made a lot of research and I don't think one can force format of the . The browser select the local format, and depending on user settings, if the user's language is in English, the date will be displayed to the English format [mm/dd/yyyy].

In my opinion, the best solution is to use a plugin to control the display.

Jquery DatePicker seems a good option since you can force the localization, date format ...

answered Aug 30, 2018 at 9:35

FifiFifi

3,0831 gold badge22 silver badges45 bronze badges

I came up with a slightly different answer than anything above that I've read.

My solution uses a small bit of JavaScript and an html input.

The Date accepted by an input results in a String formatted as 'yyyy-mm-dd'. We can split it and place it properly as a new Date[].

Here is basic HTML:

Here is basic JS:

let userDate = document.getElementById['userDate'].value.split['-'],
    parsedDate = new Date[[`${userDate[1]}-${userDate[2]}-${userDate[0]}`]];

You can format the date any way you like. You can create a new Date[] and grab all the info from there... or simply use 'userDate[]' to build your string.

Keep in mind, some ways that a date is entered into 'new Date[]' produces an unexpected result. [ie - one day behind]

answered Feb 6, 2019 at 12:53

thielr7thielr7

3073 silver badges10 bronze badges

For formatting in mm-dd-yyyy:

 aa = date.split["-"]

 date = aa[1]+'-'+aa[2]+'-'+aa[0]

answered Mar 1, 2019 at 8:09

0

Here's one option. When the user is entering the date, the function reformats it. When they click the submit button, it populates the result div with the date in the format you're looking for.

Enter some text:

submit


var a;

// Set the *value* of the input element to
// yyyy-mm-dd [text is unchanged]
function dateval[val] {
    var dv = document.getElementById["datefield"];
    a = val.split["-"].reverse[].join["-"];
    dv.type = "text";
    dv.value = a;
}

// Extract the yyyy-mm-dd value from the inpuut element,
// format it to dd-mm-yyyy and put it in the div
function postdate[] {
    var dv = document.getElementById["datefield"];
    var z = a.split["-"].reverse[].join["-"];
    document.getElementById["result"].innerHTML = a;
    dv.type = "date";
    dv.value = z;
}

BryanH

5,6763 gold badges35 silver badges47 bronze badges

answered Apr 26, 2019 at 13:12

2

I don't know this for sure, but I think this is supposed to be handled by the browser based on the user's date/time settings. Try setting your computer to display dates in that format.

answered Aug 8, 2011 at 7:37

Syntax ErrorSyntax Error

4,3752 gold badges21 silver badges33 bronze badges

short direct answer is no or not out of the box but i have come up with a method to use a text box and pure JS code to simulate the date input and do any format you want, here is the code

date : 

    ▼


var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function[]{
        var input = document.createElement['input'];
        input.setAttribute['type','date'];
        input.setAttribute['value', 'some text']; 
        if[input.value === "some text"]{
            allDates = document.getElementsByClassName["xDateContainer"];
            matchEnterdDate=1;
            for [var i = 0; i < allDates.length; i++] {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect[xObj,xTraget]{
    var date = new Date[xObj.value];
    var month = date.getMonth[];
    var day = date.getDate[];
    var year = date.getFullYear[];
    if[month!='NaN']{
        document.getElementById[xTraget].value=day+" / "+month+" / "+year;
    }else{
        if[matchEnterdDate==1]{document.getElementById[xTraget].value=xObj.value;}
    }
}
   
  

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 19:49

shadyshady

92 bronze badges

We can change this yyyy-mm-dd format to dd-mm-yyyy in javascript by using split method.

let dateyear= "2020-03-18";
let arr = dateyear.split['-'] //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format

answered Aug 20, 2020 at 9:01

Clean implementation with no dependencies. //jsfiddle.net/h3hqydxa/1/

  
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  

  
  
[initial value]

  
    var dateField = document.getElementById["dateField"];
    var fakeDateField = document.getElementById["fakeDateField"];

    fakeDateField.addEventListener["click", function[] {
      document.getElementById["dateField"].focus[];
    }, false];

    dateField.addEventListener["focus", function[] {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    }];

    dateField.addEventListener["blur", function[] {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    }];

    dateField.addEventListener["change", function[] {
      // this method could be replaced by momentJS stuff
      if [dateField.value.length < 1] {
        return;
      }

      var date = new Date[dateField.value];
      var day = date.getUTCDate[];
      var month = date.getUTCMonth[] + 1; //zero-based month values
      fakeDateField.innerHTML = [month < 10 ? "0" : ""] + month + " / " + day;
    }];

  

answered Jan 11, 2017 at 19:32

James PerihJames Perih

1,3441 gold badge15 silver badges19 bronze badges

Here is the solution:

  

$[document].ready[function [] {
    $["#end_dt"].datepicker[{ dateFormat: "MM/dd/yyyy" }];
}];

hopefully this will resolve the issue :]

answered May 7, 2019 at 6:35

3

The format of the date value is 'YYYY-MM-DD'. See the following example

All you need is to format the date in php, asp, ruby or whatever to have that format.

answered Mar 9, 2015 at 20:22

CharmiCharmi

5645 silver badges19 bronze badges

How do I change the date style in HTML?

How do you change the format in HTML?

How do I display a date in a specific format in HTML?

How do I change the default date in HTML form?