igGrid with two date pickers min max dates

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>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></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>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css">
</link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<table id="grid">
</table>

CSS

.ui-icon-triangle-1-s:before {
    font-family: "Font Awesome 6 Free";
    content: "\f133" !important;
    font-weight: 900;
    font-size: 16px;
}

JavaScript

$(function () {
    // Sample records to populate the grid 
    var records = [
        {
            EmployeeID: 1,
            FirstName: "Nancy",
            LastName: "Davolio",
            Title: "Sales Representative",
            StartDate: "2025/07/15",
            EndDate: "2025/08/15"
        },
        {
            EmployeeID: 2,
            FirstName: "Andrew",
            LastName: "Fuller",
            Title: "Vice President, Sales",
            StartDate: "2025/07/15",
            EndDate: "2025/08/15"
        },
        {
            EmployeeID: 3,
            FirstName: "Janet",
            LastName: "Leverling",
            Title: "Sales Representative",
            StartDate: "2025/07/15",
            EndDate: "2025/08/15"
        }
    ];

    $("#grid").igGrid({
        virtualization: false,
        autoGenerateColumns: false,
        renderCheckboxes: true,
        primaryKey: "EmployeeID",
        columns: [{
            headerText: "Employee ID", key: "EmployeeID", dataType: "number"
        },
        {
            headerText: "First Name", key: "FirstName", dataType: "string"
        },
        {
            headerText: "Last Name", key: "LastName", dataType: "string"
        },
        {
            headerText: "Title", key: "Title", dataType: "string"
        },
        { headerText: "Start Date", key: "StartDate", dataType: "date" },
        { headerText: "End Date", key: "EndDate", dataType: "date" },
        ],
        dataSource: records,
        height: "420px",
        width: "100%",
        // Grid features
        features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "row",
                enableDeleteRow: true,
                rowEditDialogContainment: "owner",
                showReadonlyEditors: false,
                enableDataDirtyException: false,
                // Column-specific editing...