How to convert datetime to short date Brazilian model

Asked

Viewed 5,334 times

3

I have an object JSON that gives me an attribute datetime. However, I would like to display it in an abbreviated Brazilian format. Example 24 JUN 2014.

JSON attribute : 

data {
    date: "2014-06-16 21:56:29"
}

You could do this by manipulating string, but that seems to be very "gambiarra". Does anyone know how to do it better? Remembering that I use Javascript.

javascript json

5 answers

5


You can do it like this:

function dataFormatada(d) {
    var nomeMeses = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEC']
    var data = new Date(d);
    var dia = data.getDate();
    var mes = data.getMonth();
    mes = nomeMeses[mes];
    var ano = data.getFullYear();
    return [dia, mes, ano].join(' ');
}

var json = {
    data: {
        date: "2014-06-16 21:56:29"
    }
}

var data = dataFormatada(json.data.date);
alert(data); // dá 16 JUN 2014

Online example: http://jsfiddle.net/L7WGQ/

The above code creates a function that takes a string like the one in your example and returns another string with the format you want.

The internal steps are more or less evident. Perhaps it is interesting to mention that the .getMonth() returns a number starting at 0. That is, in the case of "January" the value would be 0. Hence it is possible to use directly as index of the array that is at the beginning of the function where the abbreviations of the months in the year are stored.

If you want to switch to small letters you can use the .toLowerCase(), but as asked in the question with large letter, I did so.

  • It works perfectly, but when testing in browsers other than Google Chrome it shows a strange behavior. Its return is "Nan Nan". Can you help me with that?

4

You can use the object methods Date Javascript to do this. See:

var data = {
    date: "2014-06-16 21:56:29"
};

var date = new Date(data.date),
    day = date.getDate(),
    month = date.getMonth(),
    year = date.getFullYear(),
    monthNames = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];

alert(day + ' de ' + monthNames[date.getMonth()] + ' de ' + year);

To test, I prepared this jsFiddle for you.

Explanation

day, month and year are variables where the numbers of the dates you use will be stored - these numbers are picked by the respective methods getDate(), getMonth() and getFullYear() that Javascript itself provides.

In the alert(), I’m using monthNames[date.getMonth()] because date.getMonth() returns the months in the American format and it follows the indexing flow of the names of the months used in the vector monthNames, therefore, both coincide.

4

You can also let javascript determine which format is best

data = new Date("2014-06-16 21:56:29");

alert(data.toLocaleString());

//no navegador pt-BR vai dizer 16/6/2014 21:56:29

3

Has a very good library, Momentjs, which has this purpose of converting dates to various types.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment-with-langs.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(e) {
        $("#data").html(moment("2014-06-16 21:56:29").format("DD MMM YYYY"));
    });
</script>
</head>
<body>
    <div id="data"></div>
</body>
</html>

Example: Jsfiddle

  • Unlike the other answers yours works on more Browsers. If Momentjs would let you put toUpperCase() in Month it would be perfect. But thanks! õ

  • 1

    @Phellipelins you want to capitalize the month: http://jsfiddle.net/MMH2p/ equal on this example link.

0

The easiest way is currently using the Date.toLocaleString() this function allows you to display any part of a date in the format you want, in the language you want.

In your case it would be that way:

var date = new Date("2014-06-16 21:56:29");
console.log(date.toLocaleString('pt', {day: 'numeric', month: 'short', year: 'numeric'}));

// Ou
console.log(date.getDate(), date.toLocaleString('pt', {month: 'short'}), date.getFullYear());

Thus it is possible to display the date without creating gigantic arrays in the code and without using any external framework

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.