Date Calender Picker Code in jQuery

jQuery is a very useful library of JavaScript, which has made every developer & designer’s life easier. You can integrate jQuery into any web project very easily from and you can also use the jQuery UI plugins. So in this tutorial, I’ll tell you a simple way to include date picker in your forms while receiving data from users. You can easily create date calender picker in jQuery. Below is the simple way how to do it.


JQuery Date Picker Code for HTML Forms

Creating a date picker for HTML forms is very easy thing, you need to just do these four following things in order to include jQuery date picker into your web page:

  • Load jQuery Library into your page
  • Load jQuery UI (User Interface) into your page
  • Load jQuery UI CSS into your page
  • Write the function for date calender

So we can do this whole task by taking above four simple steps, and we don’t need to do too much programming, we need to simply write a jQuery function to make the date picker appear in the HTML input tag, and we’ll need to link jQuery library, jQuery UI & CSS to that page where we are using it. For example the complete code for showing date picker will be this one:

<!–Load jQuery UI CSS–>
<link rel=”stylesheet” href=”” />
<!–Load jQuery JS–>
<script src=””></script>
<!–Load jQuery UI Main JS–>
<script src=””></script>
function () {
$( “#datepicker” ).datepicker({
changeMonth: true,
changeYear: true
<p><b>Select a Date:</b><input type=”text” id=”datepicker” name=”date”/></p>

I’ve put all the code together for showing the date picker on web page, so what you need to do is, just copy the above code and paste it to notepade and save it with any name i.e date.html and then view it in your browser, just enter your mouse cursor in the blank text field and you’ll see the date calender appearing, so you can select a date using the simple beautiful calender as showing in below picture.


So this is the simplest method to add a date picker into your HTML form using jQuery, however, if you want to learn JavaScript completely from scratch then please visit the following link:

And if you want to learn jQuery basics then you can visit the following link:

If you got any questions while implementing this simple date picker option then let me know in comments.

About Abdul Wali

Abdul Wali is a professional blogger, marketer and web developer working online for last 5 years, he's been deeply involved in PHP, Web Development, SEO and computer video tutorials in different languages i.e English, Urdu and Pashto. You can catch him on and add him on Facebook.

Check Also


How to Create a Video Sharing Website Like YouTube?

If you are thinking to create a video sharing website like YouTube then keep in ...