ASP.NET MVC - jQuery Date Picker Plugin

Date picker is one of the most common web UI components. The default Jquery date picker no doubt provides many customizable options, but in this article, I will introduce an alternative date picker Jquery-based plugin with very simple and rich customizable options.

 

Today, I shall be demonstrating the integration of Jquery Date Picker Plugin using ASP.NET MVC5 platform.

 

 

Prerequisites

 

Following are some prerequisites before you proceed any further in this tutorial,

1. Knowledge of Jquery.
2. Knowledge of HTML.
3. Knowledge of JavaScript.
4. Knowledge of Bootstrap.
5. Knowledge of ASP.NET MVC5.
6. Knowledge of C# Programming.

The example code is being developed in Microsoft Visual Studio 2019 Professional.

Let's begin now.

Step 1

 

Create a new MVC web project and name it "MVCDatePickerPlugin". 

 

Step 2

 

Download & Install Jquery Date/Time Plugin.

Step 3

 

Create a "Controllerss\HomeController.cs" file with default Index method and it's subsequent view "Views\Home\Index.cshtml" with following lines of code i.e.

...
    <input id="DateId" type='text' class="form-control text-center" placeholder="DD MMM, YYYY" readonly="readonly" />
...

In the above code, I have simply created my target read only 'input' HTML tag with ''id" equal to "DateId" and default date/time format information in the placeholder.

Step 4

 

Now, create the JavaScript file "Scripts\script-custom-datetimepicker.js" with the following lines of code i.e.

...
    $('#DateId').daterangepicker(
        {
            "singleDatePicker": true,
            "startDate": moment(),
            "endDate": moment().endOf('year'),
            "opens": "center"
        });
...

In the above code, I have initialized date picker plugin with basic settings. Notice that this plugin offers many rich features such as date-range, time and many other calendar customization options. The attached solution includes many other variations of this plugin other than just basic settings.

Step 5

 

Now, execute the provided solution and you will be able to see the following in action i.e.

 

Date/Time Picker Jquery plugin with date range variations.

 

Date/Time Picker Jquery plugin with date range and time range variations.

Conclusion

 

In this article, you learned how to integrate Jquery Date/Time Plugin with ASP.NET MVC web platform. You also learned to customize basic settings for this plugin and finally, you got a glimpse into date range and time range variations of this plugin.