|
<< Click to Display Table of Contents >> jQuery - TextBox com calendário - todos browsers |
  
|
|
<< Click to Display Table of Contents >> jQuery - TextBox com calendário - todos browsers |
|
Intro
Este tópico amplifica o jQuery - TextBox com calendário mas funcionando também no IE e Firefox.
Mas no IE e Firefox usamos o jQuery UI para fazer o DatePicker, no Chrome e Opera é do próprio html5.
Para saber se o navegador suporte type=date basta usar a biblioteca modernizr que detecta isso.
Também acrescento a máscara 99/99/99 nos casos que usa JQuery (jquery.maskedinput.min.js)
No Chrome 28
No IE 11
No Opera 12
No Firefox 22
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DatePicker para todos navegadores</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="/js/modernizr.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="/js/preparar-datas.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="edData" runat="server" type="date"></asp:TextBox>
</form>
</body>
</html>
preparar-datas.js
var initDatepicker = function () {
// pega todos inputs do tipo date
$('input[type=date]').each(function () {
var $input = $(this);
// ativa o datepicker
$input.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'
});
// coloca máscara para formato de data
$input.mask("99/99/99");
});
};
// se o browser não suportar type=Date chama função initDatepicker
if (!Modernizr.inputtypes.date) {
$(document).ready(initDatepicker);
};
demais js
http://digitalbush.com/projects/masked-input-plugin/