Cacher is the code snippet organizer for pro developers

https://gijgo.com/datepicker/configuration/format
https://gijgo.com/datepicker/configuration

HEADER: <link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />

FOOTER: <script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>

HTML:
<form method="get" action="{{ route('registrations.export_input') }}">
    <div class="form-group">
        <label>Start Date:</label>
        <div class="input-group mb-3">
            <input id="startDate" name="startDate" width="276" />
        </div>
    </div>

    <div class="form-group">
        <label>End Date:</label>
        <div class="input-group mb-3">
            <input id="endDate"  name="endDate" width="276" />
        </div>
    </div>

    <div class="form-group">
        <div class="input-group mb-3">
            <button type="submit" class="btn btn-primary">Export By Date Range</button>
        </div>
    </div>

</form>




JS:
$(document).ready(function() {
    $('#reg_table').DataTable();
    // restrict date by today's date
    // var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());

    $('#startDate').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        // minDate: today, // restricts to today
        maxDate: function () {
            return $('#endDate').val();
        }
    });

    $('#endDate').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4',
        iconsLibrary: 'fontawesome',
        minDate: function () {
            return $('#startDate').val();
        }
    });

} );