Filter Data based on jQuery DatePicker (Calendar) and Time in ASP.Net MVC

on Jun 25, 2022 12:06 AM

Fetch the data based on time drop down list in MVC

Title : Assigned tutors Report

Filters : Day(Calendar (only current and future date allow to select))
Hour (DropDownList 1:00 to 12:00 AM and PM)

Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Jun 25, 2022 01:49 AM

Hi zeeshanpas,

To filter record you need to fist create DateTime variable from the Date TextBox and Time DropDownList.

Then use the DateTime to fetch the record.

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


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


public class HomeController : Controller
    // GET: Home
    public ActionResult Index()
        using (NorthwindEntities entities = new NorthwindEntities())
            List<Employee> employees = (from e in entities.Employees
                                        select e).ToList();

            return View(employees);

    public ActionResult Index(string date, string time)
        TimeSpan timeSpan = DateTime.ParseExact(time, "h:mm tt", System.Globalization.CultureInfo.InvariantCulture).TimeOfDay;
        DateTime dateTime = Convert.ToDateTime(date).Add(timeSpan);

        using (NorthwindEntities entities = new NorthwindEntities())
            List<Employee> employees = (from c in entities.Employees
                                        where c.BirthDate == dateTime
                                        select c).ToList();

            return View(employees);


@model List<WebGrid_EF_MVC.Employee>

    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, rowsPerPage: 5);

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker({ minDate: new Date() });
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "WebGridForm" }))
                <td>Date: </td>
                <td>@Html.TextBox("date", "", new { @id = "txtDate" })</td>
                <td>Time: </td>
                    @Html.DropDownList("time", new List<SelectListItem> {
                        new SelectListItem{Text="1:00 AM", Value="1:00 AM"},
                        new SelectListItem{Text="2:00 AM", Value="2:00 AM"},
                        new SelectListItem{Text="3:00 AM", Value="3:00 AM"},
                        new SelectListItem{Text="4:00 AM", Value="4:00 AM"},
                        new SelectListItem{Text="5:00 AM", Value="5:00 AM"},
                        new SelectListItem{Text="6:00 AM", Value="6:00 AM"},
                        new SelectListItem{Text="7:00 AM", Value="7:00 AM"},
                        new SelectListItem{Text="8:00 AM", Value="8:00 AM"},
                        new SelectListItem{Text="9:00 AM", Value="9:00 AM"},
                        new SelectListItem{Text="10:00 AM", Value="10:00 AM"},
                        new SelectListItem{Text="11:00 AM", Value="11:00 AM"},
                        new SelectListItem{Text="12:00 AM", Value="12:00 AM"},
                    }, "Select Time", new { @id = "ddlTimes" })
                <td><input type="submit" value="Submit" /></td>
    <hr />
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("EmployeeId", "Id"),
                 webGrid.Column("FirstName", "Name"),
                 webGrid.Column("City", "City"),
                 webGrid.Column("Country", "Country")))


Note: In the database table there is no record for the selected DateTime. So the record is empty after filter.