Jquery Datepicker: How to Implement Jquery Datepicker

Introduction

Jquery is now a day’s very powerful tool to make your UI more robust and interactive.
I am also explaining about Jquery Fiddle/example from last few days along with C#, MVC, ASP.Net examples. In this article, I am going to explain Jquery Interactive Calendar with its flexible properties. Here, you can change Your Calendar Year, Month instantly rather than tying into input box, moreover added UI CSS to make look and feel more sober.

Main Features of jquery Calendar Using Datepicker

• Change Month
• Change Year
• Jquery UI CSS
• Date Format
• Year Range using (-80: +10) means current to back date (-80) years up to 80 years and +10 means forward years ten years.

Other Date picker Popular Format

• dateFormat: 'mm/dd/yy'
• dateFormat: 'yy-mm-dd'
• dateFormat: 'd M, y'
• dateFormat: 'd MM, y'
• dateFormat: 'DD, d MM, yy'

Step 1: Take Input Box

First take input box

<input id="DOB" type="text" />

Step 2: Put Jquery UI CSS

Here put link of Jquery UI CSS to take effects of interactive UI
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">

Step 3: Now Write Complete Code under datepicker Event

Here is a complete method which populates Jquery calendar effectively.

$(function () {
    $("#DOB").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        yearRange: '-80: +0'
    });
});

Conclusion

Fully explained and provided all functionality of Jquery Calendar using working model JSfiddle. Those who are new to develop Jquery UI application, this article will help them up to mark. Calendar is much required in all application where we inputting date like DOB, Start Date, End Date etc.

Working Demo

Relevant Reading

• Email Validation using Jquery
• Upload Image using jquery MVC
• Jquery Timer Countdown in MVC Application
• Capitalize the First Letter of String Using Jquery

How to #ImplementJqueryDatepicker implement #JqueryDatepicker Jquery Calendar #JqueryCalendar #JqueryDatetime https://t.co/hHmSKr1UzR

— Anjan Kant (@AnjanKant) November 2, 2015