Ajax toolkit Control Learning Series (5) -- Use of calendarextender

 

Toolkit provides us with a very beautiful calendarextender, and we can also customize its display style through CSS. Today, I will briefly learn how to use this control.

Check the effect first.

First, you are prompted to enter the content in Textbox, and then click the button.

Then the calendar option is displayed, as shown in.

Select your own needs and return a date to textbox.

In this example. The control used is a label, A Textbox, and a button.

Textboxwatermarkextender introduced in Ajax, and calendarextender to be introduced.

Textboxwatermarkextender is used to control the display of previous content in textbox. The targetcontrolid of the calendarextender is a Textbox, And the popupbuttonid is the calendar triggered by the button. You can also choose an image you like to use to make it look better. CSS can be used to control its style. The level of the humble servant is limited. Let's do it by yourself.

There is nothing in the backgroundCodeAnd share them at the front end.

 <  Form  ID  = "Form1"  Runat  = "Server"  >  
  <  Div  >  
  <  ASP: scriptmanager  ID  = "SM"  Runat = "Server"  >  
  </  ASP: scriptmanager  >  
  <  ASP: updatepanel  ID  = "Updatepanel1"  Runat  = "Server"  >  
  <  Contenttemplate >  
  <  ASP: Label  ID  = "Lb_date"  Runat  = "Server"  Text  = "Input your birth :"  > </  ASP: Label  >  
  <  ASP: textbox  ID = "Tb_date"  Runat  = "Server"  Text  = ""  > </  ASP: textbox  >  
  <  ASP: button  ID  = "BTN"  Runat  = "Server"  Text  = "Choose"    />  
  <  Ajax: textboxwatermarkextender  ID  = "Water_tb"  Runat  = "Server"  Targetcontrolid  = "Tb_date"  
Watermarktext  = "Choose date"  Watermarkcssclass  = "Textbox"  > 
  </  Ajax: textboxwatermarkextender  >  
  <  Ajax: calendarextender  ID  = "Ce_tb"  Runat  = "Server"  Targetcontrolid  = "Tb_date"  Popupbuttonid  = "BTN"  
Format = "Mm-D-YYYY"  Cssclass  = "Cal"  >  
  </  Ajax: calendarextender  >  
  </  Contenttemplate  >  
  </  ASP: updatepanel  >  
 </  Div  >  
  </  Form  >