Jquery Datepicker From / To Date Validations

In making an application, there always comes a scenario when you had to enter From / To Date in .Net Application. For Calendar, Jquery Datepicker is one of the Best Option available to us.

In Jquery Datepicker you had to make check ensure From Date should be smaller than To Date, Not Greater than Today, and most importantly user should update date with a mouse click, not with the keyboard. To ensure that the user intentionally can't force an application to update Junk / False Data, as a Developer it is your duty to make sure of this scenario also.

Required CSS:
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />


Required JS:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

HTML:

<asp:TextBox ID="date_from" runat="server" CssClass="form-control from" MaxLength="10"   placeholder="Date From"></asp:TextBox>

 <asp:TextBox ID="date_to" runat="server" CssClass="form-control to" MaxLength="10" Style="margin-left: 0px; " placeholder="Date To"></asp:TextBox>


Here is the Script:

 $(document).ready(function () {
$(".from").datepicker({
                maxDate: '0',
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() + 1);
                    $(".to").datepicker("option", "minDate", dt);
                }
            }).attr('readonly', 'readonly');

$(".to").datepicker({
                //numberOfMonths: 2,
                maxDate: '0',
                onSelect: function (selected) {
                    var dt = new Date(selected);
                    dt.setDate(dt.getDate() - 1);
                    $(".from").datepicker("option", "maxDate", dt);
                }

            }).attr('readonly', 'readonly');
});


Happy Coding !!!