Logo

dev-resources.site

for different kinds of informations.

Obtendo os meses formatados com vanila JS

Published at
12/1/2023
Categories
javascript
programming
portugues
Author
dougsource
Categories
3 categories in total
javascript
open
programming
open
portugues
open
Author
10 person written this
dougsource
open
Obtendo os meses formatados com vanila JS

Nota: apenas traduzi o texto abaixo e postei aqui.

Com vanilla JS, você pode usar getMonth() para recuperar o mês de qualquer Date object.

var date = new Date();
var month = date.getMonth();
Enter fullscreen mode Exit fullscreen mode

Porém, ele retorna um integer para o mês, começando em 0. Isso significa que janeiro é 0 em vez de 1 e dezembro é 11 em vez de 12.

Hoje, eu queria mostrar um truque para recuperar o nome de um mês formatado (como Janeiro ou Jan).

Criando uma helper function

Vamos criar uma pequena helper function, getMonths(), para nos ajudar.

Aceitaremos dois argumentos. O primeiro será o ID do mês, começando com 1 para janeiro. O segundo será um booleano opcional, short. Se for true, usaremos nomes curtos para os nossos meses, como Jan em vez de Janeiro.

var getMonths = function (month, short) {
    // Faça alguma coisa...
};
Enter fullscreen mode Exit fullscreen mode

Obtendo um array com os nomes do mês

Primeiro, vamos obter uma lista dos meses.

Criaremos uma variável format. Se short for definido e true, usaremos um formato de mês curto. Caso contrário, usaremos um longo.

var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
};
Enter fullscreen mode Exit fullscreen mode

A seguir, criaremos um array de 12 entries e usaremos o método Array.map() para criar um novo array com os nomes dos nossos meses.

Dentro do callback de Array.map(), acessaremos um Date() object, que foi instanciado inicialmente com um ano aleatório e um mês aleatório, e depois, a cada iteração, modificaremos seu mês com nosso ID do mês. Em seguida, chamaremos o método toLocalString() para retornar o nome do mês. Especificaremos que queremos o mês em nosso formato.

var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
};
Enter fullscreen mode Exit fullscreen mode

Neste ponto, teremos agora um array monthNames, contendo nomes longos (["Janeiro", "Fevereiro", ...]) ou nomes curtos (["Jan", "Fev"]).

Como usamos o método toLocalString(), eles serão traduzidos em convenções locais de nomes de meses.

Obtendo um mês

Em seguida, precisamos obter nossos meses.

Vamos fornecer uma maneira de recuperar todos os meses como um array. Se nenhum month argument for fornecido, retornaremos o monthNames array inteiro.

var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
    // Retorna o nome do mês (ou todos eles)
    return monthNames;
};
Enter fullscreen mode Exit fullscreen mode

Se um mês for passado, subtrairemos 1 dele (de modo que 1, janeiro, seja mapeado para 0 no array e assim por diante). Então, pegaremos esse item do getMonths array e o retornaremos.

var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
    // Retorna o nome do mês (ou todos eles)
    if (month) {
        return monthNames[(month - 1)];
    }
    return monthNames;
};
Enter fullscreen mode Exit fullscreen mode

Compatibilidade de navegadores

A feature limitante para esta helper function é o método toLocaleString().

Isso funcionará em todos os navegadores modernos e no IE11 e superior.

Fonte

Newsletter de Go Make Things

portugues Article's
30 articles in total
Favicon
Validação e Sanitização em Aplicações Web
Favicon
Golang básico - Comparação de Igualdade
Favicon
Guia de React re-render: tudo, tudo de uma vez
Favicon
Go + hot reload
Favicon
Como animar o scrolling para anchor links com CSS
Favicon
Como criar uma sticky navigation apenas com CSS
Favicon
Como usar requestAnimationFrame() com vanilla JS
Favicon
Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API
Favicon
Por que utilizar um elemento form quando submit campos com JavaScript?
Favicon
Quando um framework é melhor que a manipulação nativa do DOM
Favicon
Recursão com vanilla JavaScript
Favicon
Como usar async e await com vanilla JavaScript
Favicon
Construindo um show/hide disclosure component acessível com vanilla JS
Favicon
Eu <3 cascade!
Favicon
Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript
Favicon
Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript
Favicon
Event delegation e múltiplos seletores com vanilla JS
Favicon
Usando a propriedade CSS currentColor para contruir componentes extensíveis
Favicon
CurrentColor e SVGs
Favicon
WTF é gzipping (e como é diferente da minificação)?
Favicon
Como eu estruturo meus projetos vanilla JS
Favicon
Uma alternativa vanilla JS para o método moment.js timeFromNow()
Favicon
Recriando o método lodash partition() em vanilla JS
Favicon
Recriando o método lodash inRange() em vanilla JS
Favicon
Recriando o método lodash pull() em vanilla JS
Favicon
Como converter segundos para minutos e horas em vanila JS
Favicon
Gerando números randômicos com vanila JS
Favicon
Obtendo os meses formatados com vanila JS
Favicon
Como ser um desenvolvedor mais produtivo
Favicon
Como construir um site que carregue em menos de um segundo

Featured ones: