Mauricio Junior
Usando CalendarExtender para Mês e Ano
Componente de ano e mês
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
Subscribe ecode10.com
Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.
You can cancel anytime.
Log In
