How to format date in Javascript?

Question

I want to play the current date on one input, but in the "Brazilian" dd/mm/yyyy.

My code:

var data = new Date();
dataFormatada = ?????
$("#Data").val(dataFormatada);

Answer 1

You can use a function to do so in order to simplify your work:

function dataAtualFormatada(){
    var data = new Date(),
        dia  = data.getDate().toString(),
        diaF = (dia.length == 1) ? '0'+dia : dia,
        mes  = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
        mesF = (mes.length == 1) ? '0'+mes : mes,
        anoF = data.getFullYear();
    return diaF+"/"+mesF+"/"+anoF;
}

To dd/mm/yyyy.

Example:

Today (result of the above code) in a <input type=text id=Data>:

$('#Data').val(dataAtualFormatada);

It would result in the following, in the value of the input:

19/02/2014

Update: no ES8 (Ecmascript 2017) the method has been implemented padStart, so the solution can be used in a simpler way:

function dataAtualFormatada(){
    var data = new Date(),
        dia  = data.getDate().toString().padStart(2, '0'),
        mes  = (data.getMonth()+1).toString().padStart(2, '0'), //+1 pois no getMonth Janeiro começa com zero.
        ano  = data.getFullYear();
    return dia+"/"+mes+"/"+ano;
}

Observing:

This last solution will not work in Internet Explorer and in browsers that do not have ES8 support, for more information see the compatibility table.

Polyfill

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');
        if (this.length >= targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
}

Answer 2

Use native Javascript functions:

var data = new Date();
console.log(data.toLocaleDateString());

Reference: http://www.w3schools.com/jsref/jsref_obj_date.asp

Answer 3

For those who don’t want to reinvent the wheel, there’s the library Moments.js, that handles this and several other operations involving Javascript dates. Among the functions of Moment is the formatting of dates in formats that can be mounted as strings. Example of use:

moment().format('MMMM Do YYYY, h:mm:ss a');
moment().format('dddd');
moment().format("MMM Do YY");
moment().format('YYYY [escaped] YYYY');
moment().format(); 

Note that using a library like this can be an exaggeration, if your need is only to format dates, in a single format.

Answer 4

If you are using jQuery UI, you can use an auxiliary function from datepicker:

$.datepicker.formatDate('dd/mm/yy', new Date())

(Note: I added this answer because I saw in your example code the use of jQuery, although the question was about pure Javascript. It should also be noted that simple jQuery does not have datepicker, only the jQuery UI)

Answer 5

("0" + date.getDate()). substr(-2) // Ensures there will be zero if < 9

In your case, it would be

var data = new Date();
var dataFormatada = ("0" + data.getDate()).substr(-2) + "/" 
    + ("0" + (data.getMonth() + 1)).substr(-2) + "/" + data.getFullYear();

Formatting date in Javascript can be done in only one line of code if you make a pad with "0" and substr. Most people never stop to see that this is genius. I discovered this a few years ago in the international OS, in a question.

Advantages of formatting with "0" and substr

• Short and direct code
• Minus Ifs
• Fewer created variables
• Weighs less than a library just to manipulate dates

Disadvantages

• In situations that have to work with many different formats, use of specific libraries is simpler

---

Alternative with toISOString

A more readable alternative is toISOString, but it has no IE8 support

var data = new Date();
console.log(data.toISOString().substr(0, 10).split('-').reverse().join('/'));

Date.prototype.toISOString() documentation on MDN,com Polyfill for unsupported browsers

Answer 6

I used Paulo Roberto’s answer as a basis (I had not yet implemented from scratch in the months with a digit) and I did so:

var data = new Date();

var dia  = data.getDate();
if (dia< 10) {
    dia  = "0" + dia;
}

var mes  = data.getMonth() + 1;
if (mes < 10) {
    mes  = "0" + mes;
}

var ano  = data.getFullYear();
dataFormatada = dia + "/" + mes + "/" + ano;
$("#Data").val(dataFormatada);

Adding zero in months with a digit.

Answer 7

Complementing the other answers...

You mention "Brazilian format" and then "dd/mm/yyyy". Although they are "the same thing" (since it is the most common format in Brazil), there are some considerations regarding the methods used in the other answers. Let’s see:

---

toLocaleDateString

One of the answers suggests using toLocaleDateString() no parameters. This may or may not work, since this method, when called without parameters, uses the locale which is configured in the environment where the code runs (which may be the configuration of the browser, or, in the case of Node, the operating system configuration/shell).

For example, the code below:

var date = new Date();
console.log(date.toLocaleDateString());

I ran this code today (February 9, 2021, 9:00 at Brasília Time) on the Node on an Ubuntu machine configured in English. Running the code above, the result was 2/9/2021 (the irritating American format, with the month before the day, and without the zeros on the left for values less than 10).

So to make sure that the Brazilian format will be used, you have to inform the locale (in the case, pt-BR, which is equivalent to Brazilian Portuguese):

date.toLocaleDateString('pt-BR')

Then the correct format will be used, and the output will be 09/02/2021.

On Node, it is also possible to set at the beginning of the script (Obs: does not work on Windows):

process.env.LANG="pt-BR.utf8";
// restante do código

In that case, call toLocaleDateString() no parameters will use the locale pt-BR and the Brazilian format will be used. But this also changes the configuration of all functions that use the default locale of the environment (such as toLocaleString() for numbers, among others), and this may not always be the desired. So if you already know which locale want to use, better pass it directly as parameter, without needing to change a setting that can affect other parts.

---

But there is one detail: whether the locale not installed, this does not guarantee that the correct format will be used. For example, the Node < 13 did not come with the locales installed, then even using pt-BR, was made the fallback for the American format. And there is also the possibility - rarer, but still possible - of the format associated with locale change.

---

Not to mention I didn’t respond with something new...

And just for the record, an alternative that wasn’t covered in the other answers: it’s possible to use Intl.DateTimeFormat:

var formatter = new Intl.DateTimeFormat('pt-BR');
var date = new Date();
console.log(formatter.format(date));

It works in a similar way to toLocaleDateString(), however according to the documentation, Intl.DateTimeFormat has better performance when you need to format many dates (just create one and use the method format).

---

Fixed format

Another possibility, not to depend on locale pt-BR be installed in the environment where the code runs, is to format the date manually.

Several responses use the getters to get the values of the day, month and year, and then build the string, and one in particular uses toISOString to obtain these same values. This is a case where one should beware, for toISOString returns the date in UTC, as long as the getters return values based on the environment Timezone (browser/OS).

See an example that makes a difference (Attention, you should run the code below in a browser configured in Brasília Time, otherwise the results may be different):

function pad(valor) { // completa com zero à esquerda, se necessário
    return valor.toString().padStart(2, '0');
}

// 9 de de fevereiro de 2021, às 23:00
var date = new Date(2021, 1, 9, 23, 0);

// usando toLocaleDateString
console.log(date.toLocaleDateString('pt-BR')); // 09/02/2021

// usando os getters
console.log(`${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${pad(date.getFullYear())}`); // 09/02/2021

// usando o código da outra resposta (/a/417433/112052)
console.log(date.toISOString().match(/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}/)[0].split('-').reverse().join('/')); // 10/02/2021

If your browser is set to Brasilia Time (Chrome and Firefox take from the operating system, the rest I’m not sure), then you will notice that the first 2 returned the correct date (09/02/2021), while toISOString returned a day later (10/02/2021).

This is because toISOString returns the date and time in UTC, while toLocaleDateString and the getters return the values using the browser’s Timezone. And how February 9, 2021, 23:00 pm at Brasília Time amounts to 10 February 2021, 02:00 in UTC, we have that difference. So this is a point of attention, if you decide to use toISOString (remembering that in different time zones, the dates/times when this occurs may vary - in some cases, it may even return a day earlier, for example).

Besides, once you have the values (either in UTC or in the browser Timezone), the other answers already give you many options to format them, and on this specific point there is not much to add.

Answer 8

new Date(myDateString).toLocaleDateString('pt-br');

Example:

console.log(new Date('2021/01/07').toLocaleDateString('pt-br'));
"07/01/2021"

Try this

Answer 9

function formatDate(data, formato) {
  if (formato == 'pt-br') {
    return (data.substr(0, 10).split('-').reverse().join('/'));
  } else {
    return (data.substr(0, 10).split('/').reverse().join('-'));
  }
}

console.log(formatDate('23/04/2018'));
console.log(formatDate('2018-04-01', 'pt-br'));

Answer 10

Based on this question I have assembled a small git with some auxiliary functions for these purposes.

Using the methods I’ve provided you can do so :

var d = new Date();
console.log(d.toDate('dd/mm/yyyy hh:ii:ss'));

console.log(d.toDate('mm/dd/yyyy hh:ii:ss'));

console.log(d.toDate('yyyy-mm-dd'));

console.log(d.toDate('yyyy-dd'));

<script src="https://rawgit.com/Lautert/helpers/master/javascript.helpers.js"></script>

Answer 11

You can format using template string:

const formatar = (data) => {
  const ano = data.getFullYear();
  const mes = (`00${data.getMonth() + 1}`).slice(-2);
  const dia = (`00${data.getDate()}`).slice(-2);

  return `${dia}/${mes}/${ano}`;
};

// Teste da função
console.log(formatar(new Date()));

---

Template String

Template literals are string literals that allow embedded expressions. You can use multi-line string and string interpolation with them. They were called "template strings" in versions prior to the ES2015 specification.

Syntax

`corpo de texto`
`texto linha 1
 texto linha 2`
`texto string ${expression} texto string`
tag `texto string ${expression} texto string`

Answer 12

console.log( (new Date()).toISOString().match(/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}/)[0].split('-').reverse().join('/') )