CODEWITHSUNDEEP
jquery-uijquery-ui-datepicker
user1732364
user1732364

Reputation: 985

jQuery UI Datepicker Date Range Restriction 3 Months

The user has 2 inputs on the page and should be able to pick any date range that is within 3 months from the startdate to the enddate. The enddate should also never be earlier then the startdate which the same check prevents startdate from being later than the enddate. Is there a way to include the date range restriction in the datepicker without external validation? The dates the user can choose is not limited to how far back they can go. If they want data from 2 years ago, they can pull a 3 month period from that year. At page load, enddate is 2 days from today and startdate is todays date.

EDIT: 

        $(function () {
        $("#startDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
                alert(monthsAddedDate);
                $("#endDate").datepicker("option", 'minDate', selectedDate);
                $("#endDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        });

        $("#endDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() - 3));
                alert(monthsAddedDate);
                $("#startDate").datepicker("option", 'minDate', selectedDate);
                $("#startDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        })
    });

Upvotes: 0

Views: 7163

Answers (2)

Kamal Pratap
Kamal Pratap

Reputation: 177

Jquery Datepicker Date Range Restriction For 30 days Refer This link

http://www.freshcodehub.com/Article/25/jquery-datepicker-date-range-restriction-in-aspnet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker({ minDate: -15, maxDate: +15 });
        });
    </script>

<input type="textbox" id="datepicker">

Upvotes: 3

user1732364
user1732364

Reputation: 985

SOLVED IT!!!! I had to switch where it was setting the min and max dates with the variables. I had them backwards. Now you can't go beyond 3 months for either date but can pick any date within the 3 months :D

        $(function () {
        $("#startDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
                alert(monthsAddedDate);
                $("#endDate").datepicker("option", 'minDate', selectedDate);
                $("#endDate").datepicker("option", 'maxDate', monthsAddedDate);
            }
        });

        $("#endDate").datepicker({
            onSelect: function (selectedDate) {
                var orginalDate = new Date(selectedDate);
                var monthsAddedDate = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() - 3));
                alert(monthsAddedDate);
                $("#startDate").datepicker("option", 'minDate', monthsAddedDate);
                $("#startDate").datepicker("option", 'maxDate', selectedDate);
            }
        })
    });

Upvotes: 4

Related Questions