Navigation

Jquery Datepicker: How to Implement Jquery Datepicker

JQuery Calendar, Jquery Datetime format, JQuery datepicker, Datepicker Demo, Web Calendar, Jquery Timepicker

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.
Jquery Datepicker

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



Share

Anjan Kant

Outstanding journey in Microsoft Technologies (ASP.Net, C#, SQL Programming, WPF, Silverlight, WCF etc.), client side technologies AngularJS, KnockoutJS, Javascript, Ajax Calls, Json and Hybrid apps etc. I love to devote free time in writing, blogging, social networking and adventurous life

Post A Comment:

2 comments:

  1. I need help with this, it never happens to click on the textbox then the picker shows, i've tried many tutorials but only one with adding (bundles) worked but its a static picker always shown under the text box not on click, otherwise i cleared those bundles again now nothing ever shows

    ReplyDelete
    Replies
    1. Did you tried this fiddle in your web page. It will run perfectly on textbox on click.

      Delete