Header Ads

ASP.NET MVC: Jquery Date Picker Plugin

June 08, 2020 , , ,
Date picker is one of the most common web UI component. The default Jquery date picker is no doubt provide 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.

Download Now!

Let's begin now.

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

2) Download & Install Jquery Date/Time Plugin.

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 ready only 'input' HTML tag with ''id" equal to "DateId" and default date/time format information in the placeholder.

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 attach solution include many other variations of this plugin other than just basic settings.

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 will learn to integrate Jquery Date/Time Plugin with ASP.NET MVC web platform. You will also learn to customize basic settings for this plugin and finally, you will have a glimpse into date range and time range variations of this plugin.