How to format a full date?

Question

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

Thursday, 20 July 2017

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

$(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>

Answer 1

It is possible to do in a manual way, creating the list of names of the days of the week, accessing the position data.getDay(), and creating the list of names of months, accessing the position data.getMonth(). The first method returns a value 0~6 for Sunday until Saturday and the second method returns 0~11 for January to December. The numerical day can be obtained with data.getDate() and the year with data.getFullYear(). See 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>
<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>

Answer 2

There is already the answer to the question, but for future reference questions, there is a very good library to manipulate 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