DatePicker| UI Control for ASP.NET AJAX, C#, VB.NET

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

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

DateInput

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

Animation

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-BorderWidth="3" 
DatePopupButton-ToolTip="Date Picker" 
Culture="English" 
PopupDirection="BottomLeft" 
ShowAnimation-Duration="500" 
ShowAnimation-Type="Slide">
<DateInput runat="server" ID="DateInput2" DateFormat="d" 
DisplayDateFormat="d" BackColor="Tomato"></DateInput>
</kettic:PerDatePicker>

If you are interested in how to set datapicker using C#, please have a link.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control

ASP.NET AJAX Calendar UI Control

Overview Getting Started

Calendar element

Title Navigation Controls Column and Row Headers

Pickers

TimePicker

DatePicker

DateTimePicker MonthYearPicker Using shared Calendar/TimeView Formatting Values

Templates

Calendar Day Templates Calendar Header and Footer Temlates

Features

Customizing the Day Matrix Multi-View Mode Managing Dates Date Selection

Client Prpgramming

Calendar Event

Server Programming