JavaScript - Calendário Ajax só com mês e ano

Neste post eu vou explicar-lhe, Como fazer controle de extensor de calendário para mostrar mês visualizar / ano por padrão, e em vez de seleccionar as datas como podemos utilizar o extensor de calendário para selecionar meses.

Antes de começar, deixe-me dizer que eu tenho amplo suporte a partir deste post no fórumhttp://forums.asp.net/t/1349086.aspx . Graças a Zhi-Qiang Ni, mas a maneira como ele seguir foi um pouco demorado. No entanto, todo o crédito ainda continua com ele porque eu ganho a idéia exata de seu posto.

Deixe-me começar por criar um controle do extensor calendário e anexá-lo a uma caixa de texto.

 <Asp: TextBox ID = TextBox1 "runat" = "server"> </ asp: TextBox> 

 <Cc1: CalendarExtender ID = "TextBox1_CalendarExtender" runat = "server" OnClientHidden = "onCalendarHidden" OnClientShown = "onCalendarShown" BehaviorID = "Calendar1" 

 Enabled = True "TargetControlID" = "TextBox1"> 

 </ Cc1: CalendarExtender> 

Agora, na marcação de extensor, aviso de fato onClientHidden e OnClientShown que eu implementadas como abaixo.

function onCalendarShown() {
 
var cal = $find("calendar1");
//Setting the default mode to month
cal._switchMode("months", 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);
}
}
}
 
}

Bem simples, No método onCalendarShown Acabei de definir o modo padrão para o mês e depois iterar o controle para obter item meses e anexar no evento clique para ele. De modo que, não irá mais para nos mostrar as datas do mês e selecionar o primeiro dia do mês em seu lugar.

Sempre que, em onCalendarHidden Estou simplesmente destacando o evento clique a partir de itens mês.Agora, observe o último parâmetro da função Sys.UI.DomEvent.addHandler, é o nome da função que irá fazer o resto da magia como abaixo.

 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;

}

}

Aqui estamos simplesmente selecionando o mês como a data selecionada de controle de calendário. e, finalmente, controlar o olharão como como abaixo.