Filter GridView on jQuery Datepicker (Calendar) selection using C# and VB.Net in ASP.Net

Hi indradeo,

Use datepicker onSelect event.

When a Date is selected, the onSelect event handler captures the Date value in String format and set the value in HiddenField and trigger the button click event.

Check the below sample code.

Database

I have made use of Nothwind database Order table.

You can ferer the below article for details.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        $("#txtDate").datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: '1950:2050',
            onSelect: function (dateString, txtDate) {
                $('#hfSelectedDate').val(dateString);
                $('#Button1').trigger('click');
            }
        });
    });
</script>
<asp:HiddenField ID="hfSelectedDate" runat="server" />
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Go" OnClick="Button1_Click" Style="display: none" /><br />
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Button1_Click(object sender, EventArgs e)
{
    DateTime selectedDate = Convert.ToDateTime(hfSelectedDate.Value.Trim());
    string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = "SELECT CustomerID,ShipName,ShipCountry,Freight FROM Orders WHERE OrderDate = @Date";
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@Date", selectedDate);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            if (ds.Tables[0].Rows.Count > 0)
            {
                GridView1.Visible = true;
                GridView1.DataSource = ds;
                GridView1.DataBind();
                Label1.Text = "";
            }
            else
            {
                GridView1.Visible = false;
                Label1.Visible = true;
                Label1.Text = "The search Term " + hfSelectedDate.Value + "  Is Not Available in the Records";
            }
        }
    }
    hfSelectedDate.Value = "";
}

VB.Net

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim selectedDate As DateTime = Convert.ToDateTime(hfSelectedDate.Value.Trim())
    Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Dim query As String = "SELECT CustomerID,ShipName,ShipCountry,Freight FROM Orders WHERE OrderDate = @Date"
        Using cmd As SqlCommand = New SqlCommand(query)
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@Date", selectedDate)
            Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
            Dim ds As DataSet = New DataSet()
            da.Fill(ds)
            If ds.Tables(0).Rows.Count > 0 Then
                GridView1.Visible = True
                GridView1.DataSource = ds
                GridView1.DataBind()
                Label1.Text = ""
            Else
                GridView1.Visible = False
                Label1.Visible = True
                Label1.Text = "The search Term " & hfSelectedDate.Value & "  Is Not Available in the Records"
            End If
        End Using
    End Using
    hfSelectedDate.Value = ""
End Sub

Screenshot