$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
DatePicker in ASP.NET AJAX
Home > How to > Calendar DatePicker

Information to DatePicker

Kettic Calender UI for ASP.NET AJAX library is dedicate to offering developers and end users the most mature and user-friendly components for setting and selecting data and time values, and these excellent controls are: ASP.NET AJAX Calender tool, ASP.NET AJAX DatePicker control, ASP.NET AJAX TimePicker component as well as ASP.NET AJAX DateTime Picker object.
In this page, we will discuss with users about the Kettic web calendar DataPicker in details within ASP.NET application in following four aspects: detailed information of Datapicker button, properties of Datapicker, format of Datapicker and animation of Datapicker.

How to Set Datapicker Within ASP.NET Project

asp.net date picker1.png

DatePopup Button

In above sample image, we can see the DatePopup button is in the right. With DatePopup Button property, we can easily and freely set these attributes: Visible, ImageUrl, Border, ToolTip, BackColor and many more.
In normal circumstance, datepicker will offer two components: calendar and DateInput. DateInput refers to the former text box and when we click DatePopupButton the calendar will popup that allows us to choose certain date.

DatePicker Properties

  • MaxDate/ MinDate: represents the max date and mini date of datapicker
  • Culture: if we apply this property, the text of datapicker can be adjustable
  • PopupDirection: with the support of this property, we can freely move datepicker to these four directions: TopLeft, TopRight, BottomLeft and BottomRight


  • DateFormat: can be used to set the format of input time
  • DisplayDateFormat: choose this attribute to display the format of time
  • Apprearance: of course, we are still able to set the appearance of dateinput, which includes backcolor, textcolor, Border, and so on so forth


There are two choices of animation: ShowAnimation and HideAnimatio. If we choose ShowAnimation, there will be animation appending when the calendar popups and closes.
  • Duration: the time animation keeps
  • Type: two options: Fade and Slide

ASP.NET Demo Codes for Setting Datapicker

Following complete ASP.NET sample codes show how to set all the above properties. Also, a sample image is appended to have a better visualization.

asp.net date picker2.png

<kettic:PerDatePicker ID="PerDatePicker1" runat="server" Width="140px" AutoPostBack="true"
DateInput-EmptyMessage="MinDate" MinDate="01/01/2000" MaxDate="01/01/3000"
DatePopupButton-Visible="true" DatePopupButton-BorderColor="Beige"
DatePopupButton-ToolTip="Date Picker"
<DateInput runat="server" ID="DateInput2" DateFormat="d"
DisplayDateFormat="d" BackColor="Tomato"></DateInput>