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