4

Como converter um Date para a data por extenso? Gostaria de mostrar a data de hoje no seguinte formato:

Quinta-feira, 20 de Julho de 2017

O código de exemplo que gostaria de completar para obter o resultado acima em um label está exemplificado abaixo, precisando alterar a região do comentário para a lógica de obtenção da data.

$(function() {
  $('#datepicker').datepicker({dateFormat: 'dd/mm/yy'});
  $('#btnFormatar').click(formatar);
});

function formatar() {
  var data = $('#datepicker').datepicker('getDate');
  var extenso;
  
  // Lógica para formatar a data
  extenso = '*DIA DA SEMANA*, *DIA DO MÊS* de *MÊS* de *ANO*';
  console.log(data);

  $('#lblDataExtenso').html(extenso);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Data: <input type="text" id="datepicker"></p>
<p><button id="btnFormatar">Formatar</button>
<p><label id="lblDataExtenso">???</label></p>

5

3 Respostas 3

9

É possível fazer de uma maneira manual, criando a lista de nomes dos dias da semana, acessando a posição data.getDay(), e criando a lista de nomes de meses, acessando a posição data.getMonth(). O primeiro método retorna um valor 0~6 para domingo até sábado e o segundo método retorna 0~11 para Janeiro até Dezembro. O dia numérico pode ser obtido com data.getDate() e o ano com data.getFullYear(). Veja um exemplo abaixo:

$(function() {
  $('#datepicker').datepicker({dateFormat: 'dd/mm/yy'});
  $('#btnFormatar').click(formatar);
});

function formatar() {
  var data = $('#datepicker').datepicker('getDate');
  var extenso;
  
  data = new Date(data);

  var day = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"][data.getDay()];
  var date = data.getDate();
  var month = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"][data.getMonth()];
  var year = data.getFullYear();

  console.log(data);

  $('#lblDataExtenso').html(`${day}, ${date} de ${month} de ${year}`);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Data: <input type="text" id="datepicker"></p>
<p><button id="btnFormatar">Formatar</button>
<p><label id="lblDataExtenso">???</label></p>

3

Já existe a resposta para a pergunta, mas para questões de referências futuras, existe uma biblioteca muito boa para manipular tempo momentjs!

  moment.locale('pt');
   moment().format('MMMM Do YYYY, h:mm:ss a'); // Julho 20º 2017, 11:42:53 pm
moment().format('dddd');                    // Quinta-Feira
moment().format("MMM Do YY");               // Jul 20º 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format('LLLL'); // Quinta-Feira, 20 de Julho de 2017 23:49
2
  • Pode confirmar se na primeira linha de código é licale mesmo ou seria locale? Não editei porque não conheço a biblioteca, então não tenho certeza sobre isso.
    – Woss
    Commented 20/07/2017 às 22:37
  • desculpe foi uma falha! é locale Commented 21/07/2017 às 7:36
-4
const option = {
    year: 'numeric',
    month: ('long' || 'short' || 'numeric'),
    weekday: ('long' || 'short'),
    day: 'numeric'
}
const locale = 'pt-br'
new Date().toLocaleDateString( locale, option)

// Resultado: quarta-feira, 19 de outubro de 2022

1
  • 2
    A sua solucao eh legal, mas carece de explicacoes e tem algumas propriedades definidas de forma confusa
    – Sorack
    Commented 20/10/2022 às 4:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .