Getting Started with ASP.NET Webforms DateTimePicker

8 Sep 20233 minutes to read

This section explains briefly how to create a DateTimePicker in your application with the ASP.NET.

Create your first DateTimePicker in ASP.NET

ASP.NET DateTimePicker provides support to display a calendar within a web page and allows you to pick a date and time from the calendar. In this example, you can learn how to customize the DateTimePicker in a real-time application for an appointment and to choose current time for one week.

The following screenshot illustrates the functionality of a DateTimePicker with date range of maximum one week.

Getting-Started_images1

Create DateTimePicker

You can create an ASP.NET Project and add necessary assemblies and scripts with the help of the given ASP-Getting Started Documentation.

You can add the following code example to the corresponding ASPX page to render the DateTimePicker.

  • HTML
  • <div class="content-container-fluid">
    
            <div class="row">
    
                <div class="cols-sample-area">
    
                    <div class="frame">
    
                        <div class="control">
    
                            <ej:DateTimePicker ID="DateTimePicker1" runat="server" Value="7/18/2014" Width="180px">
    
                            </ej:DateTimePicker>
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>

    Add the following styles to show the DateTimePicker control in a horizontal order.

  • CSS
  • .control
            {
                margin: 0 auto;
                width: 210px;
            }

    The following screenshot displays a DateTimePicker control.

    Getting-Started_images2

    Set the Min and Max Date with Time Interval

    In a real-time appointment scenario, the appointment is open only for a limited number of days. You have to select a date and time within the given range. This can be achieved by using the properties MinDateTime and MaxDateTime that enable the specified date range in the DateTimePicker control.

  • HTML
  • <ej:DateTimePicker ID="DateTimePicker1" runat="server" Width="180px" Value="9/12/2014 1:30 PM" MinDateTime="9/7/2014 2:00 PM" MaxDateTime="9/30/2014 2:00 PM" Interval="30">
    
        </ej:DateTimePicker>

    The following screenshot shows the output for the above code example.

    Getting-Started_images3