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();

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...
};

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';
};

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 });
    });
};

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;
};

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;
};

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