Update Bootstrap Date Range Datepicker to only allow for end date to be within the start date's fiscal year

Question

I'd like to preface this saying I know very little JavaScript.

I have a Bootstrap datepicker using a date range, picked up from eternicode.

My goal is to select a day in startDate and then have the days available to endDate only be on or after startDate and within startDate's financial year.

Examples:

If I chose Oct 1st 2016, the endDate should cap out at Sep 30th 2017
If I chose Jan 12th 2017, the endDate should cap out at Sep 30th 2017
If I chose Sep 30th 2017, the endDate should also be Sep 30th 2017
Pretty much, if the startDate month is in [Oct, Nov, Dec] then endDate caps out at Sep 30th (startDate year + 1) else endDate caps out at Sep 30th (startDate year)

In my reportWebpage.cshtml file I have:

<div class="col-md-2">
    Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
    <div class="input-daterange input-group" id="datepicker">
        @Html.TextBox("startDate", "", new { @class = "input-sm form-control", name= "startDate" })
        <span class="input-group-addon">to</span>
        @Html.TextBox("endDate", "", new { @class = "input-sm form-control", name = "endDate" })
    </div>
</div>

In my related.js I have a very basic datepicker setup:

$(function () {
    $('#dateRangeContainer .input-daterange').datepicker({
        autoclose: true,
        todayBtn: "linked",
        clearBtn: true
    });
});

I know there is a datesDisable property I can set, and while it's functionality is what I want it seems to be based off an array of dates which seems like the wrong idea here.

As a test, I replaced the datapicker js code above with what is shown below.

Like in this SO Answer I've tried adding an onSelect property to just the #startDate datepicker, but I'm not getting a response from the alert embedded, nor is Google Chrome's Dev Tools hitting the debug point placed on it:

$('#startDate').datepicker({
    onSelect: function() {
        var date = $(this).datepicker('getDate'),
            day = date.getDate(),
            month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
            year = date.getFullYear();
        alert(day + '-' + month + '-' + year);
    }
});

I was hoping that by doing that I could at least start building some if else loops or something.

I'm struggling to figure out how to even start with this problem, so any help or suggestions will be very much appreciated!

Edit 1: I figured out that trying to disable a huge range of dates was the wrong way to view this problem, and that I should instead focus on utilizing the setStartDate and setEndDate properties.

Using some combined tips from these SO answers:

Bootstrap datepicker change minDate/startDate from another datepicker
Print Var in JsFiddle (This was mostly just a helper, giving credit where credit is due)

I mashed together this JSFiddle: http://jsfiddle.net/wsodjsyv/203/

Where it currently is, it does it's job of restricting to the proper financial year. I just need to tweak it so that when I clear End Date I'm able to move Start Date past that point again. Right now it'll require a refresh if I determine I want to move Start Date past Sept. 30 (whatever year got chosen)

Ryan Taite Ryan Taite · Accepted Answer · 2017-07-19T19:40:06

Here is my new related.js file pertaining to the date picker; with this code I am able to restrict the date range to Start Date's fiscal year:

$(function () {
    // Ranged datepickers
    $('#dateRangeContainer .input-daterange').datepicker({
        autoclose: true,
        todayBtn: "linked",
        clearBtn: true
    });

    $('#startDate').datepicker().on('changeDate', function(selected) {
        var endDate_Bottom = null;
        var endDate_Cap = null;

        if (selected.date != null) {
            endDate_Bottom = new Date(selected.date.valueOf());
            endDate_Cap = new Date(selected.date.valueOf());

            if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
                endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
            } else {
                endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
            }
        }

        $('#endDate').datepicker('setStartDate', endDate_Bottom);
        $('#endDate').datepicker('setEndDate', endDate_Cap);
    });

    $("#endDate").datepicker().on('changeDate', function(selected) {
        var startDate_Cap = null;
        if (selected.date != null) {
            startDate_Cap = new Date(selected.date.valueOf());
        }
        $('#startDate').datepicker('setEndDate', startDate_Cap);
    }).on('clearDate', function(selected) {
        var startDate_Cap = null;
        $('#startDate').datepicker('setEndDate', startDate_Cap);
    });
});

I've added some checks for when the date is null to avoid the console log being filled with errors when .valueOf() is called on an empty date.

I also brought back the dateRangeContainer block to handle the repeated options and to allow for the styling that highlights the date range selected in the calendar.

Update Bootstrap Date Range Datepicker to only allow for end date to be within the start date's fiscal year

1 Answers