jQuery - TextBox com calendário - todos browsers

<< Click to Display Table of Contents >>

Navigation:  jQuery >

jQuery - TextBox com calendário - todos browsers

Previous pageReturn to chapter overviewNext page

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

 

datepicker-chrome

 

No IE 11

 

datepicker-ie

 

No Opera 12

 

datepicker-opera

 

No Firefox 22

 

datepicker-firefox

 

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://modernizr.com/

http://digitalbush.com/projects/masked-input-plugin/