Header Ads

ASP.NET MVC: Jquery Date Picker Plugin

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.

5 comments:

  1. Yes's this one. Really great and fantastic work because you have done really good work. Please keep positing because this type of post always a great way to share with us your latest information and this plugin really effective but must share with us latest and updated please keep posting.
    Custom Boxes Wholesale

    ReplyDelete
    Replies
    1. hello i can seen your blogger
      and i found nice work this is good keep it up
      if you are website and software lover then come on my site thanks

      https://patchcracks.com/

      Delete
  2. I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read !! I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. PMP Certification 360DigiTMG
    PMP Course 360DigiTMG
    PMP Training 360DigiTMG
    PMP Course in Malaysia 360DigiTMG
    PMP Course in Malaysia 360DigiTMG

    ReplyDelete
  3. hello i can seen your blogger
    and i found nice work this is good keep it up
    if you are website and software lover then come on my site thanks

    https://goharpc.com/

    ReplyDelete
  4. Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
    data analytics course
    big data analytics malaysia
    big data course

    ReplyDelete