How to bind jQuery DatePicker Control to Asp.Net Textbox Control

You can use the jQuery DatePicker control to work with date related functions in your Asp.Net applications. The DatePicker control can be attached to any form input field. Here in this post I’ll show you an example on how to bind or tie the jQuery DatePicker control to a Asp.Net textbox control and how you can access the selected date from your code behind procedure using C# and Vb.Net.

Binding jQuery DatePicker Control to an Asp.Net Textbox Control

The jQuery DatePicker control provides easy to use functionalities and you can easily bind the control to any input field. Therefore, you can tie the DatePicker to an Asp.Net textbox control.

The Markup

To get access to the DatePicker control, you’ll have to add the plug-in’s CDN to your web page, inside the <head> tag.

<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>

Next, add an Asp.Net textbox control (to which we'll attach the date picker) to your web page, inside the <body> tag.

<body>
    <div>
        <asp:TextBox ID="tbDate" runat="server" placeholder="Select a Date"></asp:TextBox>
        <asp:Button Text="Submit" ID="submit" OnClick="btClick" runat="server" />

        <%--SHOW THE SELECTED DATE.--%>
        <p id="newDateFormat" runat="server"></p>
    </div>
</body>

The Script to add DatePickter Control

Since the Date Picker is a jQuery control, you will need a small script to bind or attach the textbox control to the DatePicker.

<script>
    $(document).ready(function () {
        $('#tbDate').datepicker({
            dateFormat: 'dd/mm/yy'
        });
    });
</script>

Now, run the application and you will see the textbox. Set focus on the textbox control and it will popup a calendar showing the current month or the current year. You can modify the above script and set date format according to your choice.

This jQuery widget comes with many useful functions and you can attach it with any input control.

Code Behind (C#)

Now, let’s see the code behind procedure showing how to get the selected date from the DatePicker or the textbox using C# and Vb.Net.

If you see the above markup, I have a Button control on my web page. I’ll write the code inside the button’s click event.

using System;

public partial class SiteMaster : System.Web.UI.MasterPage
{
    protected void btClick(Object sender, EventArgs e)
    {
        string sDate = "";

        if (!string.IsNullOrEmpty(tbDate.Text.Trim()))
        {
            // CONVERT DATE FORMAT.
            sDate = DateTime.ParseExact(
                tbDate.Text, "dd/MM/yyyy", null).ToString("MM/dd/yyyy");

            selectedDate.InnerHtml = sDate;       // SHOW THE FORMATED DATE.
        }
    }
}

You can get the selected date from the textbox using the .text property. However, I am also formatting the date from the default to another format using the ParseExact() method. This is optional. I am just showing, what else you can do with the date, other than simply selecting it.

Code Behind (Vb.Net)

Option Explicit On

Partial Class Site
    Inherits System.Web.UI.MasterPage

    Sub btClick(ByVal sender As Object, ByVal e As EventArgs)
        Dim sDate As String = ""

        If Trim(tbDate.Text) <> "" Then
            ' CONVERT DATE FORMAT.
            sDate = DateTime.ParseExact(
                tbDate.Text, "dd/MM/yyyy", Nothing).ToString("MM/dd/yyyy")

            selectedDate.InnerHtml = sDate     ' SHOW THE FORMATED DATE.
        End If
    End Sub
End Class

Well that’s it.

Don’t worry if you do not have access to any Asp.Net inbuilt Date picker control. You can easily use the jQuery DatePicker control in your Asp.Net application as this widget comes with many useful functions. In fact you can tie this widget to a <div> or <p> element. For example, here’s how you can bind it to a <div> element …

<div id="div"></div>

$('#div').datepicker({
    dateFormat: 'dd/mm/yy'
});

← PreviousNext →