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 Datepicker, and then you can start using this jQuery plugin in your website.

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 input control in your web page:

<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 showing 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 enter date values, on the input control, using his keyword. If that is the case, then you need to check the value for correct date. Example – Do not allow alphabets, more than 12 for months, negative values.

To do this, use jQuery Validation method. I will show how to do this here.

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

<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 provides true or false depending on whether the date passed the validation check.

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

datepicker validation passed

datepicker validation failed

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.