|
<< Click to Display Table of Contents >> jQuery - TextBox com calendário |
  
|
|
<< Click to Display Table of Contents >> jQuery - TextBox com calendário |
|
Atenção: o demo abaixo funciona em todos navegadores, porém com html5 podemos utilizar no Chrome e Opera um método nativo do browser.
Veja esse tópico: jQuery - TextBox com calendário - todos browsers
Página
Default.aspx
<head runat="server">
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="util/Calendario.js"></script>
<style type="text/css">
div.ui-datepicker
{
font-size: 11px; // aqui define o tamanho do calendário - deve vir APÓS a declaração do jquery-ui.css
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="lblFone" runat="server">Fone:</asp:Label><br /><asp:TextBox ID="txtFone" runat="server"></asp:TextBox><br />
<br />
<asp:Label ID="txtData" runat="server">Data:</asp:Label><br /><asp:TextBox ID="calendario" runat="server"></asp:TextBox><br />
<br />
<asp:Label ID="lblCEP" runat="server">CEP:</asp:Label><br /><asp:TextBox ID="txtCEP" runat="server"></asp:TextBox><br />
</form>
</body>
Calendario.js
$(function() {
$("#calendario").datepicker({
dateFormat: 'dd/mm/y', // atenção y = 2 dígitos para o ano e yy = 4 dígitos
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro','Outubro', 'Novembro', 'Dezembro'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set','Out', 'Nov', 'Dez'],
nextText: 'Próximo',
prevText: 'Anterior',
//showOn: "button",
//buttonImage: "https://www.backmii.com.au/static/images/calendar_button.png"
});
});
Descomente o showOn e buttonImage para obrigar o usuário a pressionar um botão para exibir o calendário
Trocando id por class no aspx:
<asp:TextBox ID="txtData" class="calendario" runat="server"></asp:TextBox>
e no Calendario.js:
$(function() {
$(".calendario").datepicker({