MSDE - Criando banco de dados e tabelas com Web Matrix

ASP.NET - Tratando datas em Web Forms c/o componente calendar

Já falei sobre o objeto calendar no artigo - ASP.NET - Usando o objeto Calendar. Neste artigo vou mostrar uma das muitas aplicações que podemos criar usando este objeto.

Vou mostrar como podemos fazer a entrada de datas em um Web form usando o objeto calendar através de uma janela pop-up aberta via javascript.

Para você ver como funciona clique no link : calendário em web form

Inicialmente o navegador vai exibir um web form com duas caixas de texto ; cada uma com um ícone que representa um calendário. Ao clicar no ícone do calendário iremos ter uma janela popup que exibira o calendário conforme abaixo:

Selecionando a data em cada uma das caixas de texto iremos ter:

Muito prático não é mesmo ? Vou então mostrar como podemos implementar isto usando ASP.NET e JavaScript.

Eu estou usando dois arquivos : Datas.aspx e Calendario.aspx

1- O arquivo Datas.aspx exibe o formulário com as caixas de de texto e os ícones dos formulários. O código deste arquivo é o seguinte:

<%@ Page Language="vb" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Usando Calendário para informar datas</title>

</head>

<body>

<p><img border="0" src="maco1a.gif" width="299" height="54"> <b>

<font face="Verdana" color="#800080">&nbsp; Usando o objeto Calendar para

entrada de datas em formulários</font></b></p>

<hr>

<form id="Form1" method="post" runat="server">

<table>

  <tr>

    <td align="right">

      Data Iníco:

    </td>

    <td align="left">

      <asp:TextBox ID="txtInicio" Runat="server" />

    </td>

    <td align="center">

      <a href="javascript:;" onclick="window.open('calendario.aspx?textbox=txtInicio','cal','width=250,height=225,left=270,top=180')">

      <img src="calendario.gif" border="0" width="16" height="16"></a>

    </td>

  </tr>

  <tr>

    <td align="right">

      Data Final:

    </td>

    <td align="left">

      <asp:TextBox ID="txtFim" Runat="server" />

    </td>

    <td align="center">

      <a href="javascript:;" onclick="window.open('calendario.aspx?textbox=txtFim','cal','width=250,height=225,left=270,top=180')">

      <img src="calendario.gif" border="0" width="16" height="16"></a>

    </td>

  </tr>

</table>

</form>

<p><font face="Verdana" size="2">Para incluir uma data clique no ícone do

calendário e selecione a data desejada.</font></p>

<p><b><font face="Verdana" color="#FF0000">Quer mais dicas sobre ASP.NET? &nbsp;
</font><font face="Verdana" size="2" color="#FF0000">
visite : <a href="http://www.macoratti.net">www.macoratti.net</a></font></b></p>

</body>

</html>

Cabe destacar no código apenas as linhas que estão na cor azul negritado.

1- A linha de código abaixo declara a caixa de texto txtInicio

  <asp:TextBox ID="txtInicio" Runat="server" />

2- A linha de código abaixo declara a caixa de texto txtFim

  <asp:TextBox ID="txtFim" Runat="server" />

3- A linha de código a seguir refere-se o ícone do calendário da caixa de texto txtInicio e usa o comando javascript window.open para abrir o arquivo : calendario.aspx na posição determinada pelas propriedades : width=250,height=225,left=270,top=180'

Note que estou fazendo uma referência a imagem calendario.gif através da tag : <a href> </a>

<a href="javascript:;" onclick="window.open('calendario.aspx?textbox=txtInicio','cal','width=250,height=225,left=270,top=180')">

<img src="calendario.gif" border="0" width="16" height="16"></a>

O mesmo se aplica para a linha de código referente a caixa de texto txtFim:

<a href="javascript:;" onclick="window.open('calendario.aspx?textbox=txtFim','cal','width=250,height=225,left=270,top=180')">

<img src="calendario.gif" border="0" width="16" height="16"></a>

Só falta eu mostrar o código do arquivo calendario.aspx que irá abrir o calendário para que o usuário escolha uma data. Abaixo
temos o código em questão :

<%@ Page Language="VB" %>

<script runat="server">

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        control.Value = Request.QueryString("textbox").ToString()

    End Sub

      Protected Sub Muda_Data(sender As System.Object, e As System.EventArgs)

        Dim strScript As String = "<script>window.opener.document.forms(0)." + control.Value + ".value = '"

                     strScript += calData.SelectedDate.ToString()

                     strScript += "';self.close()"

                     strScript += "</" + "script>"

        RegisterClientScriptBlock("ok", strScript)

      End Sub

</script>

<html>

<head>

<title>Calendário</title>

</head>

<body>

<form id="Form1" method="post" runat="server">

<asp:Calendar ID="calData" OnSelectionChanged="Muda_Data" Runat="server" />

<input type="hidden" id="control" runat="server" />

</form>

</body>

</html

Vejamos como funciona o código em questão :

No formulário estou definindo um objeto calendar com o nome : CalcData no qual defini que o evento OnSelectionChanged irá disparar a rotina Muda_Data:

<asp:Calendar ID="calDate" OnSelectionChanged="Muda_Date" Runat="server" />

A função Muda_Data que será disparada quando o evento OnSelectionChanged ocorrer (quando houver mudança de datas selecionadas) define o String que irá conter um script a ser executado com o conteúdo da seleção feita pelo usuário e passado para a caixa de texto pertinente:

        Dim strScript As String = "<script>window.opener.document.forms(0)." + control.Value + ".value = '"

                     strScript += calData.SelectedDate.ToString()

                     strScript += "';self.close()"

                     strScript += "</" + "script>"

Imagine como seria fazer isto com ASP e Javascript ???

Pegue o código completo aqui e bom serviço ...

José Carlos Macoratti