How to format an extended date?

2

How do I convert a Date to date in full? I would like to show today's date in the following format:

  

Thursday, July 20, 2017

The example code that you would like to complete to get the above result in a label is exemplified below, needing to change the comment region to the date retrieval logic.

$(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><scriptsrc="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>
    
asked by anonymous 20.07.2017 / 14:49

2 answers

3

You can do this manually by creating the list of names of the days of the week by accessing the data.getDay() ", and creating the list of month names by accessing the data.getMonth() . The first method returns a 0~6 value for Sunday through Saturday and the second method returns 0~11 for January through December. The number day can be obtained with data.getDate() and the year with data.getFullYear() . Here's an example below:

$(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><scriptsrc="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>
    
20.07.2017 / 15:59
1

The answer to the question already exists, but for future reference issues, there is a very good library for manipulating time 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
    
20.07.2017 / 23:52