Filter (Search) Data using Date range selected from DatePicker in ASP.Net

Hi nabilabolo,

Check this example. Now please take its reference and correct your code.

HTML

<div class='container'>
    <div class="row">
        From:<asp:TextBox ID="txtFromDate" runat="server" class="form-control date-input" ReadOnly="true" />
    </div>
    <div class="row">
        To:<asp:TextBox ID="txtToDate" runat="server" class="form-control date-input" ReadOnly="true" />
    </div>
    <hr />
    <asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false" CssClass="table table-responsive table-bordered">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="OrderDate" HeaderText="Date" DataFormatString="{0:dd/MMM/yyyy}" />
        </Columns>
    </asp:GridView>
    <br />
    <asp:Button Text="Filter" runat="server" OnClick="OnFilter" />
</div>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=txtFromDate]').datepicker('setDate', new Date(new Date().getFullYear(), new Date().getMonth(), 1));
        $('[id*=txtToDate]').datepicker('setDate', 'now');
    });
</script>

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 Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gvEmployees.DataSource = GetData("", "");
        gvEmployees.DataBind();
    }
}

protected void OnFilter(object sender, EventArgs e)
{
    DateTime fromDate = Convert.ToDateTime(txtFromDate.Text);
    DateTime toDate = Convert.ToDateTime(txtToDate.Text);
    gvEmployees.DataSource = GetData(fromDate.ToString(), toDate.ToString());
    gvEmployees.DataBind();
}

private DataTable GetData(string fromDate, string toDate)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlCommand cmd = new SqlCommand();
    string query = "SELECT * FROM Employees";
    if (!string.IsNullOrEmpty(fromDate) && !string.IsNullOrEmpty(toDate))
    {
        query += "WHERE OrderDate BETWEEN @From AND @To";
        cmd.Parameters.AddWithValue("@From", fromDate);
        cmd.Parameters.AddWithValue("@To", toDate);
    }
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            cmd.CommandText = query;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        gvEmployees.DataSource = GetData("", "")
        gvEmployees.DataBind()
    End If
End Sub

Protected Sub OnFilter(ByVal sender As Object, ByVal e As EventArgs)
    Dim fromDate As DateTime = Convert.ToDateTime(txtFromDate.Text)
    Dim toDate As DateTime = Convert.ToDateTime(txtToDate.Text)
    gvEmployees.DataSource = GetData(fromDate.ToString(), toDate.ToString())
    gvEmployees.DataBind()
End Sub

Private Function GetData(ByVal fromDate As String, ByVal toDate As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand()
    Dim query As String = "SELECT * FROM Employees"
    If Not String.IsNullOrEmpty(fromDate) AndAlso Not String.IsNullOrEmpty(toDate) Then
        query += "WHERE OrderDate BETWEEN @From AND @To"
        cmd.Parameters.AddWithValue("@From", fromDate)
        cmd.Parameters.AddWithValue("@To", toDate)
    End If
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            cmd.CommandText = query
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Screenshot