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

DateTimePicker in ASP.NET AJAX

Home > How to > Calendar DateTimePicker

Datetimepicker is the combined control of datepicker and timepicker that belong to the whole kettic ASP.NET Ajax Calendar UI SDK. From sample image below, we can see we are able to set and customize date and time freely with support of Datetimepicker component within ASP.NET application.

Web calendar Datetimepicker includes three components: DateInput, calendar and timeview. When we click DatePopupButton button, we can see calendar popup window and choose certain date, and when we click the button of TimePopupButton, the timeview will popup and allows us to choose and set time.

asp.net datetime picker1.png

DatePopupButton Within ASP.NET Project

DatePopupButton is the first button in the sample image, by clicking this control we are capable of set following properties: Visible, ImageUrl, Border, ToolTip, BackColor, etc.

TimePopupButton Within ASP.NET Project

The second button is TimePopupButton, with the support of which we are able to set properties, like Visible, ImageUrl, Border, ToolTip, BackColor and others.

DateTimePicker Properties Within ASP.NET Project

MaxDate/ MinDate: the maximum and minimum data number that can be set with the support of DateTimePicker.
Culture: if we apply and change this property, the text of datatimepicker will be change in the same time.
PopupDirection: we can freely move datetimepicker to these four directions: TopLeft , TopRight , BottomLeft and BottomRight with the support of this property.

TimeView Within ASP.NET Project

TimeFormat: use this property to set the format of time of time viewer.
StartTime/EndTime: use StartTime and EndTime properties to change the range of times displayed.
Interval: the interval between adjacent times in the time view. For instance, if we set the starttime as 9 am, the endtime as 10 am, and the interval as 15 minutes, then the time will be displayed like 9:00, 9:15, 9:30, 9:45, and 10:00. The valid values are between StartTime and EndTime.
Columns: use this attribute to set and change the number of columns. If we set the column as 3, then there will be 3 sets of time in each raw.
RenderDirection: use to set and adjust arrangement of time in viewer: vertical or horizontal.

DateInput Within ASP.NET Project

DateFormat: is used to set the format of input time.
DisplayDateFormat: is used to display the time format.
Apprearance: property for setting and defining the appearance of dateinput, which consist of backcolor, textcolor, Border and others.

ASPX Sample codes for setting above demonstrated properties of datetimepicker. And more demo codes can be found in how to set html calendar datetimepikcer in C#.


<kettic:PerDateTimePicker ID="PerDateTimePicker1" 
runat="server" EnableScreenBoundaryDetection="False" 
MinDate="01/01/2000" MaxDate="01/01/3000" 
Culture="English" PopupDirection=" BottomRight" 
ShowAnimation-Duration="500" ShowAnimation-Type="Slide">
<DateInput runat="server" ID="DateInput3" 
DateFormat="d" DisplayDateFormat="d" BackColor="DarkOrange" 
Font-Bold="true"></DateInput>
<DatePopupButton BorderColor="Red" 
BorderWidth="3" Visible="true" />
<TimePopupButton BorderColor="YellowGreen" 
BorderWidth="3" Visible="true" />
<TimeView TimeFormat="HH:mm" Columns="4"
RenderDirection="Vertical"></TimeView>
</kettic:PerDateTimePicker>