igDatePicker with value range, month and year and disable typing

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<label for="departure">Date Picker: </label>
<input id="departure"></input>

JavaScript

$(function () {
    // Function to initialize the datepicker
    function initDatePicker() {
        $("#departure").igDatePicker({
            dateDisplayFormat: "MM/dd/yyyy",
            value: null,
            allowNullValue: true,
            minValue: new Date(2025, 6, 1),
            maxValue: new Date(2025, 7, 0),
            suppressKeyboard: true,        // <- blocks typing
            readOnly: true,                // <- user can’t edit the text
            dropDownOnReadOnly: true,      // <- but can still open the calendar
            datepickerOptions: {
                changeMonth: true,
                changeYear: true,
                minDate: new Date(2025, 6, 1),
                maxDate: new Date(2025, 7, 0),
                showButtonPanel: true,
                beforeShow: function () {
                    setTimeout(function () {
                        var $calendar = $(".ui-datepicker");
                        var $todayBtn = $calendar.find(".ui-datepicker-current");

                        if ($todayBtn.length) {
                            $todayBtn
                                .text("Clear") // Change text from 'Today' to 'Clear'
                                .attr("data-handler", "") // Remove default data-handler
                                .off("click") // Remove default behavior
                                .on("click", function () {
                                    setTimeout(function () {
                                        // Reset the datepicker
                                        $("#departure").igDatePicker("destroy");
                                        // Recreate it with same options
                                        initDatePicker();
                                    }, 10);
                                });
                        }
                    }, 0);
                }
            }
        });
    }

    // Initialize on first...