jQuery DatePicker With Month And Year In ASP.NET MVC

Many times as developers we use a DatePicker to choose a date of birth or date of anniversary, and developers use a normal DatePicker, but for selecting previous date, like a date in 1982, users have to click the previous button.

 

We can use a DatePicker with Month and Year Dropdown to make this job easy in ASP.NET MVC.

 

 

 

Let's implement this jQuery DatePicker in ASP.NET MVC.

 

Step 1: Create new ASP.NET Web Application and give the name 'WebjQueryDatePicker'.

 

 

Step 2:  From the Next Dialog, Select MVC Template and click on Ok.

 

Step 3: Now first let's create a Model Class of Student, for that right click on Models folder and add new class named 'Student.cs'. 

 

Step 4: Now add the following property in class. Here for Student DateOfBirth we will use datepicker; set the DataFormatString = "{0:dd/MMM/yyyy}"). 

public class Student
{
    [Display(Name = "Student Name")]
    [Required]
    public string StudName { get; set; }
    [Required]
    [Display(Name = "Date Of Birth")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MMM/yyyy}")]
    public DateTime StudDOB { get; set; }

}

Don't forget to add reference.

using System.ComponentModel.DataAnnotations;

Step 5: Now right click on Controller Folder, add new Controller and give name 'StudentController'. 

 

 

 

Step 6: Now let's create a view for the Student Class, for that right click on Index, then add View.

In the next dialog Select 'Create' Template, assign Model Class 'Student' and click on 'Ok' Button. 

 

 

This will create a View as Below.  

@model WebjQueryDatePicker.Models.Student

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.StudName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.StudDOB, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudDOB, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudDOB, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Step 7: For working with DatePicker, we have to add jQuery.UI Package, for that go to Tools, NuGet Package Manager, then Manage NuGet Packages for Solutions, and search for jQuery.UI.

 

 
Select jQuery.UI.Combined and click on Install and complete the installation of jQuery.UI.

 

 

Step 8: Now open your View and add the following script in it.

@section Scripts {


    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">

     $(document).ready(function () {
         $('input[type=datetime]').datepicker({
             dateFormat: "dd/M/yy",
             changeMonth: true,
             changeYear: true,
             yearRange: "-60:+0"
         });

     });
    </script>

}

Important things here is:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

That will apply a nice calendar UI to DatePicker. And input[type=datetime], This will match the Datatype and automatically identify where we have to place the DatePicker.

Step 9: Now open App_Start and Go to BundleConfig.cs and addthe below code.

//js
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
          "~/Scripts/jquery-ui-{version}.js"));

//css
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(
       "~/Content/jquery-ui.css"));

Step 10: Now, run your application and check the Student DateofBirth Field, once you click it, it will display a nice jQuery Calendar with Month and Year selection.



Hope you like this article explaining jQuery DatePicker with Month and Year in ASP.NET MVC. 

 

Read more articles on ASP.NET:

• Language Converter Using Google Translator Plugin In ASP.NET
• Integrating Google News Search in ASP.NET Project