How to Add jQuery Datepicker in MVC

Introduction

Here I am explaining how to add a Datepicker in our MVC application. Calendar control is very useful in any application and in ASP.NET there are several the default server control to use but in MVC we have a lot of options to use calendar control which all are client-side control.

So follow the procedure to add the Datepicker in our MVC application.

Step 1:Create an MVC Application

Go to Create New project and select the Web tab and select ASP.Net Web Application(.net Framework)C#. Configure your new project Add a suitable name for your project and click the Create button.

Step 2: Select an Empty project template and select MVC from add folder and code reference.

Step 3:A project solution has been created with some pre-defend controllers, scripts, and so on. Now Right, Click on the model add an ado.net entity model add a model name and click on Add Button.

Step 4: select EF Designer from the database and click the Next button.

Step 5: Click on a new connection to add a connection and select a Microsoft SQL Server data source and click on the continue button.

Step 6: Add a server name and select and enter a database name and click on the ok button.

Step 7: Your database connection added on the next button for the next process

Step 8: the entity version you want to select I am using 6.0 and click on the Next button.

Step 9: Choose which data object you want to include in your model. I have only one data object in my database so I am selecting only one. You can choose as many as per your need and requirements and click on the finish.

Step 10: Edmx model have been created with the model object and some class.

Step 11: Add an MVC 5 empty controller add a suitable name for the controller and click on the Add button.

Step 12: Controller code will be automatically generated with one Index action method.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCDatePicker.Controllers
{
    public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 13: Right-click on the Index action method and click add select template empties without the model.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<form>
    <input type="hidden" id="emplyee_id" />
    <div class="form-group">
        <label for="Name">Employee Name</label>
        <input type="text" class="form-control" id="employee_name" placeholder="employee_name" />
    </div>
    <div class="form-group">
        <label for="Age">Email ID</label>
        <input type="text" class="form-control" id="email_id" placeholder="email_id" />
    </div>
    <div class="form-group">
        <label for="State">Mobile No</label>
        <input type="text" class="form-control" id="mobile_no" placeholder="mobile_no" />
    </div>
    <div class="form-group">
        <label for="Country">Joining Date</label>
        <div class="cal-icon">
            <input class="datepicker" placeholder="From Date" type="text" id="joining_date" name="joining_date">
        </div>
    </div>
    <div class="form-group">
        <label for="Country">Address</label>
        <input type="text" class="form-control" id="address" placeholder="address" />
    </div>
    <div class="col-md-4" id="DivIsActive" style="display:none;margin-top: 40px;">
        <div class="form-group">
            <label for="is_active"> Enable</label>
            <input id="is_active" name="is_active" type="checkbox">
        </div>
    </div>
</form>

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.5.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/Users.js"></script>

<script>
    $(document).ready(function () {
        $(".datepicker").datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true, buttonText: "Select", showOn: 'both' }).val();
    });
</script>

Step 14: Update Jquery then install Bootstrap.datepicker to the project. For this to add right-click on the References tab then select Manage Nuget Packages as in the following.

Step 15: Now we need to add the reference of jQueryUi to the project. By default, Visual Studio will not add a reference for us. For this Browse JQueryUI in Manage Nuget Package Following window will appear search for jQueryUi and select install to install it.

Step 16: We can overload the Datepicker function with many options but the following are the most commonly used properties which are the following,

· dateFormat: This property is used to set the date format for the selected date from the calendar.

· changeMonth: This is a boolean property having the value true and false which tells whether the month dropdown list is visible or not on calendar control.

· changeYear: This is also a boolean property having the value true and false which tells whether the year dropdown list is visible or not on the calendar control.

· yearRange: It sets the year range for calendar control such as how many past and future years to display in the calendar.

· showOn: This property decided on which control Id does the calendar control will popup.

Step 18: Here Is the Datepicker Run the index view we will get the Datepicker as in the following:

Summary

In this example, we have discussed How to add a DatePicker to MVC or implement DatePicker to MVC . Thanks. I would like to get feedback.

Search This Blog

Know More About Programming