Usando CalendarExtender para Mês e Ano (pt-BR)

                Caro(a) Leitor(a), hoje vou falar sobre como colocar o componente Ajax CalendarExtender para exibir o ano e depois da escolha aparecer o mês para ser escolhido. Ao clicar no mês, o mês e ano escolhidos vão para o campo de texto.

                Hoje o componente CalendarExtender é usado para escolha de data no formato completo, no meu caso, precisava de que fosse escolhido primeiro o ano e depois o mês. Vamos à prática então.

Tag: CalendarExtender, C#, ASP.NET

                Pra quem não sabe usar esse componente, é bem simples. Basta colocar um campo TextBox, arrastar o componente para página e vincular os dados pelas propriedades do componente. Listagem 1.

[CODE]

<asp:TextBox ID="txtPeriodo" Width="97px" runat="server" MaxLength="7"></asp:TextBox>

[/CODE]

Listagem 1: Adicionando campo textbox chamado txtPeriodo

                Com o Ajax na minha Toolbox, procurei e arrastei o componente chamado CalendarExtender. Imagem 1.

Imagem 1: Arrastando o componente CalendarExtender

                Depois de arrastar o componente, é necessário vincular ao campo TextBox. Listagem 2.

[CODE]

<asp:CalendarExtender ID="TextBox1_CalendarExtender"

    runat="server" Enabled="True" TargetControlID="txtPeriodo">

</asp:CalendarExtender>

[/CODE]

Listagem 2: Componente CalendarExtender com vínculo

                Note que coloquei a propriedade chamada TargetControlId o valor de txtPeriodo. O mesmo nome dado no textBox. Depois disso, é necessário criar algumas funções escritas em JavaScript e indicar no componente.

                Para indicar no componente, vou utilizar as propriedades OnClienteHidden, OnClienteShown e Format.

                Antes de indicar no componente, vamos fazer as funções. Listagem 3.

[CODE]

<script>

    function onCalendarShown() {

        var cal = $find("calendar1");

        //Setting the default mode to month

        cal._switchMode("years", false);

        //cal._switchMode("month", true);

        //Iterate every month Item and attach click event to it

        if (cal._monthsBody) {

            for (var i = 0; i < cal._monthsBody.rows.length; i++) {

                var row = cal._monthsBody.rows[i];

                for (var j = 0; j < row.cells.length; j++) {

                    Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);

                }

            }

        }

    }

    function onCalendarHidden() {

        var cal = $find("calendar1");

        //Iterate every month Item and remove click event from it

        if (cal._monthsBody) {

            for (var i = 0; i < cal._monthsBody.rows.length; i++) {

                var row = cal._monthsBody.rows[i];

                for (var j = 0; j < row.cells.length; j++) {

                    Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);

                }

            }

        }

    }

    function call(eventElement) {

        var target = eventElement.target;

        switch (target.mode) {

            case "month":

                var cal = $find("calendar1");

                cal._visibleDate = target.date;

                cal.set_selectedDate(target.date);

                cal._switchMonth(target.date);

                cal._blur.post(true);

                cal.raiseDateSelectionChanged();

                break;

            case "years":

                var cal = $find("calendar1");

                cal._visibleDate = target.years;

                cal.set_selectedDate(target.years);

                cal._switchMonth(target.years);

                cal._blur.post(true);

                cal.raiseDateSelectionChanged();

                break;

        }

    }

</script>

[/CODE]

Listagem 3: Funções em JavaScript.

                Note que essas funções buscam o componente na primeira linha. A segunda linha é a indicação do modo que vai aparecer na tela. O modo é ano e depois mês. Essa é a razão de colocar o código cal._switchMode("years", false).

                Esse JavaScript acaba agindo no lugar dos arquivos .js dentro do framework Ajax. Agora basta indicar no componente as funções escritas na mesma página. Listagem 4.

[CODE]

<asp:CalendarExtender ID="TextBox1_CalendarExtender"

    runat="server" OnClientHidden="onCalendarHidden" 

    OnClientShown="onCalendarShown" BehaviorID="calendar1"

    Format="MM/yyyy"

    Enabled="True" TargetControlID="txtPeriodo">

</asp:CalendarExtender>

[/CODE]

Listagem 4: CalendarExtender completo

                A propriedade OnClientHidden possui o valor “onCalendarHidden”, a propriedade onClientShown possui o valor “onCalendarShown” e o formato Format possui o valor “MM/yyyy”. Esse formato é o que vai aparece no campo textbox.

                Chamando a página, aparece a tela normal. Se o campo textBox for selecionado, aparece o ano para ser escolhido. Imagem 2.

Imagem 2: Aparece o ano.

Basta escolher o ano com o clique do mouse. Depois vai aparecer o mês para ser escolhido. Imagem 3.

Imagem 3: Escolhendo o mês.

                Ao selecionar o mês de março, os valores vão para o campo textbox. Imagem 4.

Imagem 4: Os valores no campo.

                Fico por aqui e qualquer dúvida pode entrar em contato pelo site pessoal www.mauriciojunior.org. Esse artigo foi baseado em outro artigo em inglês, porém foram feitas modificações no código.

Fonte: http://bifesebyfes.blogspot.com.br/2011/02/javascript-calendario-ajax-so-com-mes-e.html