DataTextBox

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > UserControls >

DataTextBox

Previous pageReturn to chapter overviewNext page

Descrição

 

Um TextBox com:

Calendário ao receber foco (ou botão que ativa/desativa calendário)

Máscara 99/99/99

Validação de data ao sair

Auto-preenchimento, se digita 10 e tab o controle preenche +mês e ano atual

Métodos SetDate(), GetDate() e IsEmpty()

 

Tela

 

datepicker

 

DataTextBox.ascx

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DataTextBox.ascx.cs" Inherits="DataTextBox" %>

 

<!-- jquey -->

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

 

<!-- calendário em pt-br -->

<script language="javascript" type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>

 

<!-- função de máscara -->

<script language="javascript" type="text/javascript" src="http://www.market.com.br/js/maskedinput-min.js"></script>

 

<!-- feito por mim, para validar e completar data -->

<script language="javascript" type="text/javascript" src="util\util.js"></script>

 

<!-- inicilização visual do calendário -->

<style type="text/css">

  div.ui-datepicker

   {

      font-size: 11px;

   }

</style>

 

<!-- inicialização dos valores -->

<script type="text/javascript">

   

  // aqui ao inicializar a página ele adiona a máscara ao campo usando as funções do "Masked Input Plugin"

   jQuery(function ($) {

       $(".mask_data").mask("99/99/99");

   });

 

  // inicalização do calendario 2 digitos para ano e formato em pt-br (usa o jquery.ui.datepicker-pt-BR.js)

   $(function () {

       $(".mask_data").datepicker({

           dateFormat: 'dd/mm/y'

       });

 

       $.datepicker.setDefaults($.datepicker.regional['pt-BR']);

   });

</script>

 

<asp:TextBox ID="DtTextBox" CssClass="mask_data" runat="server" onblur="ValidarData(this,this.value)"></asp:TextBox>

 

DataTextBox.ascx.cs

 

using System;

 

public partial class DataTextBox : System.Web.UI.UserControl

{

  protected void Page_Load(object sender, EventArgs e)

   {

   }

 

  public void SetDate(DateTime data)

   {

       DtTextBox.Text = data.ToString("dd/MM/yy");

   }

 

  public DateTime GetDate()

   {

      DateTime data;

      if (!DateTime.TryParse(DtTextBox.Text, out data))

           data = new DateTime(1900, 1, 1);

 

      return data;

   }

 

  public bool IsEmpty()

   {

      DateTime data;

      if (!DateTime.TryParse(DtTextBox.Text, out data))

          return true;

      else

          return false;

   }

}

 

util.js

 

function ValidarData(campo, valor) {

  var date = valor;

 

  // data zerada considera valida

  if (date == "__/__/__" || date == "") {

      return true;

   }

 

  // cria uma expressão regular para validar a entrada de data

  var ExpReg = new RegExp("(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[012])/[0-9]{2}");

  var ardt = new Array;

   ardt = date.split("/");

 

  // essa var será usada para arrumar datas incompletas

  var currentDate = new Date();

 

  // preenche mês atual

  if (jQuery.trim(ardt[1]) == "__") {

       ardt[1] = "" + (currentDate.getMonth() + 1);

      if (ardt[1].length == 1)

           ardt[1] = "0" + ardt[1];

 

   }

 

  // preenche ano atual

  if (jQuery.trim(ardt[2]) == "__") {

       ardt[2] = "" + (currentDate.getFullYear() - 2000);

   }

   

  // remonta

   date = ardt[0] + "/" + ardt[1] + "/" + ardt[2];

 

  //  manda de volta

   campo.value = date;

   

   erro = false;

 

  // se não passou pela expressão regular, já cai fora

  if (date.search(ExpReg) == -1) {

       erro = true;

   } // ardt[0] = dia | ardt[1] = mês | ardt[2] = ano

  else if (((ardt[1] == 4) || (ardt[1] == 6) || (ardt[1] == 9) || (ardt[1] == 11)) && (ardt[0] > 30))

       erro = true;

  else if (ardt[1] == 2) {

      if ((ardt[0] > 28) && ((ardt[2] % 4) != 0))

           erro = true;

      if ((ardt[0] > 29) && ((ardt[2] % 4) == 0))

           erro = true;

   }

 

  // deu erro? mostra mensagem e retorna false

  if (erro) {

       alert("\"" + valor + "\" não é uma data válida!");

       campo.focus();

       campo.value = "";

      return false;

   }

 

  // chegou até aqui, OK

  return true;

}

 

Importante: observações para usar

 

Não esqueça de acrescentar no aspx:

 

<%@ Register src="~/UserControls/DataTextBox.ascx" tagname="DataTextBox" tagprefix="uc2" %>

 

Para usar:

 

<uc2:DataTextBox ID="DataTextBox1" runat="server" />

 

Nos meus testes, coloquei esse controle numa subpasta "UserControls" e tive assim que ajustar o caminho para o js no DataTextBox.ascx:

 

<script language="javascript" type="text/javascript" src="/UserControls/util.js"></script>