|
<< Click to Display Table of Contents >> DataTextBox |
  
|
|
<< Click to Display Table of Contents >> DataTextBox |
|
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
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>