Pegando valor da data do Datepicker UI ao clicar no dia

O Datepicker UI é um calendário feito em Jquery desenvolvido pela Jquery UI   para uso em páginas Web, existem vários outros semelhantes, mas eu prefiro este, exceto quando estou usando o Bootstrap. Ele tem a instalação simples e um visual até legal, caiu muito bem em alguns projetos meus.

Instalação do Datepicker UI

Primeiro baixe o plugin  neste link. Extraia o arquivo em um diretório de sua preferência, depois vá no documento HTML que você deseja colocar o calendário e link os arquivos “css/ui-lightness/jquery-ui-1.10.3.custom.css”, “js/jquery-1.9.1.js” e “js/jquery-ui-1.10.3.custom.js”. E chame o calendário com o código JavaScript a baixo. O código deve ficar assim:

Depois disso coloque o código a baixo no local da página onde você deseja que o calendário apareça.

E pronto, o Datepicker está instalado.

Pegando a data e colocando em um alert()

Os plugins UI trazem uma série de funções, entre elas está a função onSelect: function(dateText, inst), que dá um get na data do dia clicado pelo usuário, veja o exemplo a baixo:

$( "#datepicker" ).datepicker({
   inline: true,
   onSelect: function(dateText, inst){
      alert(dataText); //Mostrando data em uma janela de alerta
}
});

Você ainda pode atribuir o valor pego do datepicker a outro elemento DOM da sua página com método text() da biblioteca jQuery, por exemplo:

$( "#datepicker" ).datepicker({
   inline: true,
   onSelect: function(dateText, inst){
      $("#data").text(dataText); //Mostrando data em elemento da página
}
});

O código a cima insere o valor na data em um elemento que tenha id=”data”, mas você pode escolher o elemento que quiser mudando o valor que está entre aspas na Linha 4, lembrando de manter o # para o id da div, e . se for usar a classe, por exemplo “.data”, assim como no CSS.
Você também pode mudar os dias da semana e meses do plugin, que estão em inglês, para português, basta abrir o arquivo jquery-ui-1.10.3.custom.js na pasta js/ e pesquisar por “monthNames”, ai você verá os nomes dos meses, basta a penas substituir traduzindo para o português. Da mesma forma para os dias da semana, que estão logo a baixo, por fim você deve deixar da seguinte forma:

monthNames: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho",
"Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"], // Names of months for drop-down and formatting
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"], // For formatting
dayNames: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Quarta", "Sábado"], // For formatting
dayNamesShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], // For formatting
dayNamesMin: ["Do","Se","Te","Qa","Qi","Se","Sa"],

Mudando formato da data no Datepicker UI

O formato de data padrão do datepicker é o formato americano mm/dd/yy, sabendo que mm corresponde ao mês, dd ao dia, e yy ao ano. Para mudar para o formato brasileiro dd/mm/yy, abra o arquivo jquery-ui-1.10.3.custom.js e procure por “dateFormat:”, pronto agora é substituir o formato, deixando o assim:

dateFormat: "dd/mm/yy",

A forma mais simples de fazer isso é no script de chamada do calendário que está na sua página html, basta deixa-lo desta forma:

$( "#datepicker" ).datepicker({
   inline: true,
   dateFormat: "dd/mm/yy",
   onSelect: function(dateText, inst){
    $("#data").text(dataText); //Mostrando data em elemento da página
}
};)

Bem mais simples…