jQuery DatePicker With Month And Year In ASP.NET MVC

Ankur Mistry

23 Comments

Join the conversation! Your thoughts help the community grow.

Pushpendra Singh8y ago
Nice Helpful Article !!!
Sthitaprajnya Debasis Nayak10y ago
Helpful Article !!!
Sejal Patel10y ago
Nice Article Ankur.. Keep it up (y)
Atish Dullabh10y ago
Nice article will definitely use it
Ankur Mistry10y ago
thank you all
Kumaresh Rajalingam10y ago
Thanks for Nice article
Raja T10y ago
Nice, Thanks for sharing
Debendra Dash10y ago
nice one ..........
Ankit Bansal10y ago
Nice one..very helpful
Humayun Kabir Mamun10y ago
Nice...
Sonu Chaudhary10y ago
Nice
Pankaj Kumar Choudhary10y ago
Good Efforts Sir.......
PEDRO RENE GONZALEZ10y ago
nice
Asfend Yar10y ago
nice
Saillesh Pawar10y ago
Nice Ankur sir
Sibeesh Venu10y ago
Nice Share
Vignesh Mani10y ago
Good
Mohammed Ibrahim10y ago
nice
Pramod Thakur10y ago
tnx for sharing...
Former member10y ago
Nice article sir.........
Nikhil Rajput10y ago
nice
Gowtham Rajamanickam10y ago
Good one..
Shridhar Sharma10y ago
nice share

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.

output

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