New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

DateInput Basics

  • Demo Configurator
  • General Settings
  • Localization

RadDateInput supports a wide range of date formats and cultures. You can change the culture dropdown and see the effect on RadDateInput.

The new 'smart parsing engine' allows you to enter not only digits along with separators for the date/time but even month names or dates/years in long/short date format. This gives the user the flexibility to enter the date in a format that suits him best. The technology for parsing the date exceeds the Microsoft Outlook date input control.

Additionally you can restrict the date format which will be recognized by the date input via the DateFormat property of the control. The acceptable values are d for Short date, D for Lond date, f for Full date, custom format, etc.

Moreover, you can define the culture of the displayed date in order to conform to a specific region format. This can be fine-tuned via the Culture property of RadDateInput

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.DateInput.Basics.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
        .custom-styles label {
            width: 160px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="demoContainer" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default"></telerik:RadAjaxLoadingPanel>

    <div class="demo-containers">
        <div class="demo-container" runat="server" id="demoContainer">
            <telerik:RadLabel runat="server" ID="RadLabel1" AssociatedControlID="RadDateInput1" Text="Date:"></telerik:RadLabel>
            <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput1" runat="server" LabelWidth="50px" Width="300px" Culture="bg-BG"
                InvalidStyleDuration="100">
            </telerik:RadDateInput>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View Title="General Settings">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group custom-styles">
                        <li>
                            <label for="Combo1">Culture</label>
                            <qsf:ComboBox AutoPostBack="true" Height="120px" Width="200px" runat="server"
                                ID="Combo1" OnSelectedIndexChanged="Combo1_SelectedIndexChanged">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <label for="Combo2">Date Format</label>
                            <qsf:ComboBox AutoPostBack="true" runat="server" ID="Combo2" Width="200px"
                                OnSelectedIndexChanged="Combo2_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Short Date" Value="d"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Long Date" Value="D"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Short Time" Value="t"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Long Time" Value="T"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Full" Value="f"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Custom - dd MMMM yyyy - dddd hh:mm" Value="dd MMMM yyyy - dddd hh:mm"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBox1" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox></span>
                            <label for="CheckBox1">Show Label</label>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group custom-styles">
                        <li>
                            <label for="RadDatePicker1">Min Date</label>
                            <qsf:DatePicker ID="RadDatePicker1" runat="server" MinDate="1900-01-01" AutoPostBack="true"
                                OnSelectedDateChanged="RadDatePicker1_SelectedDateChanged">
                                <Calendar ID="Calendar1" RangeMinDate="1900-01-01" runat="server">
                                </Calendar>
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <label for="RadDatePicker2">Max Date</label>
                            <qsf:DatePicker ID="RadDatePicker2" runat="server" MinDate="1900-01-01" AutoPostBack="true"
                                OnSelectedDateChanged="RadDatePicker2_SelectedDateChanged">
                                <Calendar ID="Calendar2" RangeMinDate="1900-01-01" runat="server">
                                </Calendar>
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="KeyboardIncrement" Checked="true" AutoPostBack="true"
                                    OnCheckedChanged="KeyboardIncrement_CheckedChanged"></asp:CheckBox></span>
                            <label for="KeyboardIncrement">Keyboard increment</label>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MouseWheel" Checked="true" AutoPostBack="true" OnCheckedChanged="MouseWheel_CheckedChanged"></asp:CheckBox></span>
                            <label for="MouseWheel">Mouse wheel increment</label>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Localization">
                <ul class="fb-group custom-styles">
                    <li>
                        <label for="TextBox1">Empty message</label><br />
                        <qsf:TextBox runat="server" ID="TextBox1" AutoPostBack="true" Text="Set empty message"
                            OnTextChanged="TextBox1_TextChanged">
                        </qsf:TextBox>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance