DateTime Picker control for asp.net webforms

First let’s correct some false statements here.

quote:

there is no date time picker control provided.

Wrong!!!! There is most certainly here is a built in calendar control you can use, and there is ALSO options for the standard text box control.

Let’s first use the standard text box control.

When you drag + drop in a text box to the webform, then note the property sheet settings for that text box. These ones:

So, there are all kinds of choices (time picker, password, number and more), and there are several date choices. So, in above, we choose date from the drop down.

So, say with this markup:

        <h3>Enter a date</h3>
        <asp:TextBox ID="TextBox1" runat="server"
          TextMode="Date"   >

        </asp:TextBox>

        <h3>Code behind button test</h3>
        <asp:Button ID="Button1" runat="server" 
            Text="Test date value - code behind"
            CssClass="btn myshadow"
            OnClick="Button1_Click"
            />

And code behind so far is this simple stub:

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Debug.Print($"Value of text box (date) = {TextBox1.Text}")

End Sub

So, running the above, we get/see this:

And for output window, we see this:

(I hit the button 2 times).

I should also point out that if you typing in markup (as opposed to using the property sheet as shown above), then you can type in textmode, hit = and then hit ctrl-space (as always for inteli-sense), and again you get the list of options for the text box.

This:

So, CLEARLY without any add-ins, without any JavaScript code, asp.net supports and has a date picker ability out of box. Note how the date displays in the browsers local time, but to get (or set) the text box, you need to use ISO date format.

So, say on page load, I could have the date "default" for today like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        TextBox1.Text = DateTime.Today.ToString("yyyy-MM-dd")

    End If

End Sub

(note the all important test for isPostBack, since we ONLY want such defaults and setup code to run on first page load – not for additional post-backs.

Next up, if you look at the tool box, you should see a calendar control

This one:

So, we could drag that onto the web page, but that calendar control is not a auto-popup control, but remains in full view, so you might say drag 2 copies onto the web page. Not that the calendar control has EXTENSIVE formatting options like for weekdays, weekend, today, and more.

So, we drag + drop 2 of the controls onto the form, and we now have this markup:

            <div style="float: left">
                <h4>Select Start Date</h4>

                <asp:Calendar ID="dtStart" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>


            <div style="float: left; margin-left: 30px">
                <h4>Select End Date</h4>

                <asp:Calendar ID="dtEnd" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>

And when we run the above, we have this:

And the code behind can be this:

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    Debug.Print($"Value of text box (date) = {TextBox1.Text}")
    Debug.Print($"Value of Start calendar = {dtStart.SelectedDate}")
    Debug.Print($"Value of End calendar = {dtEnd.SelectedDate}")

End Sub

And output:

(note how the calendar control DOES return a datetime data type).

So, you can use a text box, just set the TextMode="date".

And as noted, you can also use a calendar control.

So yes, asp.net textbox has a date mode. (it also has a time mode too!!!).

And as above shows, from the toolbox, there is also a calendar control you can use.