Two igDatePicker

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>

<div class="container">
    <label>Two igDatePicker:</label>
    <input id="start"></input>
    <input id="end"></input>
</div>

JavaScript

$(function () {
    var today = new Date();

    $("#start").igDatePicker({
        value: today,
        dateInputFormat: "ddd, MMM d, yyyy",
        regional: "en-US",
        dataMode: "date",
        datepickerOptions: {
            minDate: today,
            maxDate: new Date(2025, 7, 15),
            numberOfMonths: [1, 2]
        },
        valueChanged: function (evt, ui) {
            $("#end").igDatePicker("value", ui.newValue);
            $("#end").igDatePicker("option", "datepickerOptions", {
                minDate: ui.newValue + 1,
                maxDate: new Date(2025, 7, 15),
            });
        },
        rendered: function (evt, ui) {
            makeCalendarIcon($(this));
        }
    });

    $("#end").igDatePicker({
        value: today,
        dateInputFormat: "ddd, MMM d, yyyy",
        regional: "en-US",
        dataMode: "date",
        datepickerOptions: {
            minDate: today,
            maxDate: new Date(2025, 7, 15),
            numberOfMonths: [1, 2]
        },
        rendered: function (evt, ui) {
            makeCalendarIcon($(this));
        }
    });

    function makeCalendarIcon(ed) {
        var $btn = ed.igDatePicker("dropDownButton");
        $btn.find(".ui-icon")
            .removeClass("ui-icon-triangle-1-s")
            .addClass("ui-icon-calendar");
    }
});