jQuery - TextBox com calendário

<< Click to Display Table of Contents >>

Navigation:  jQuery >

jQuery - TextBox com calendário

Previous pageReturn to chapter overviewNext page

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

 

datepicker

 

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