Multiple jquery datepicker with validation

Here i am going to give you a very simple and most usable datapicker script in jquery, It is useful when you are working on report section of any application then you need to add from and to date validation in your report search.

So using this script you can easily add this feature in your report section in less effort,
This ready mate script will help you add datepicker validation in your web based application

Validation covered:
1. Multiple datepicker on same page.
2. Date should not greater than from current date.
3. From date should not greater than To date.
4. To date should not less than From date.

Demo

Multiple datepicker with validation

From Date:

To Date:




Source Code

index.html

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<h3>Multiple date picker with validation</h3>
From Date: <input type="text" class="date" id="from">
To Date: <input type="text" class="date" id="to">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
 var dateToday = new Date();
    var dates = $(".date").datepicker({
        dateFormat: 'dd-mm-yy',
        maxDate: dateToday,
        onSelect: function(selectedDate) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        }
    });
</script>

You can add more feature in your datepicker as per your need read jquery ui official datepicker document https://jqueryui.com/datepicker/
If you like this post please don’t forget to subscribe my public notebook for more useful stuff