jQuery Datepicker 2 minutes Tutorial – before you start using it in your website

jQuery Datepicker 2 minutes Tutorial – before you start using it in your website

If you want to let users select a Date from a calendar, for your input control, then use jQuery Datepicker plugin. The Datepicker (which is actually a calendar) will show in a small popup when the input control gets the focus and will close when the input control loses focus.

In this tutorial I will teach you, in just 2 minutes, everything you need to know about jQuery Datepicker, and then you can start using this jQuery plugin in your website.

You can also use the jQuery fadeIn & fadeOut Methods and bring the fading in & out effects in the Datepicker control.

jQuery Datepicker Example

There is no need to download this plugin as you can reference it using CDN link.

There are just 2 steps to use Datepicker in your web page.

Step 1

Add the link to Datepicker CSS on the page head section and also add the input control in your web page:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepicker">
Step 2

Call the .datepicker() function on the input control.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
$(document).ready(function () {
    $("#datepicker").datepicker();
});

Now, if you click the input control, you will see the Datepicker shows up as a popup, and then you can select the date from it.

datepicker shows up as popup

Doing jQuery Validation for Date value

You may have noticed that the user can also manually enter date values, on the input control, using his keyboard.

If that is the case, then you need to check the value for correct date format. Example – Do not allow alphabets, more than 12 for months, negative values, etc.

To do this, use jQuery Validation method. I will show how to do this in this tutorial itself.

I have a p element and a button. On the click of this button I will validate the input control’s value, and show the error message (on the p element) if the date is not proper.

<p id="message"></p>
Date: <input type="text" id="datepicker">
<button id="button1">Click</button>

Now handle the button click event for doing this validation:

$("#button1").click(function (e) {
    if (isValidDate($("#datepicker").val()))
        $("#message").html("Date validation passed");
    else
        $("#message").html("Date validation failed");
});
 
function isValidDate(date) {
    var matches = /^(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];
    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

I have added isValidDate() function which checks the date and returns true or false depending on whether the date value passes the validation check.

Finally I am showing the proper message on the p element.

datepicker validation passed datepicker validation failed

Download the full source codes:

DOWNLOAD

Conclusion

The jQuery Datepicker plugin is an excellent calendar plugin for your website. Now you have enough knowledge to add and use it in your website easily.

I have also written a tutorial on jQuery DataTables Plugin which you will find it quite useful in your website, specially when you are dealing with lots of data to display.

SHARE THIS ARTICLE

  • linkedin
  • reddit
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate