igGrid - editing cells with datepicker format

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>

<table id="grid"></table>
    <div>
  
        <fieldset id="addingOptions">
            <legend>Adding settings</legend>

            <input type="checkbox" id="enableAddRow" checked="checked"></input><label for="enableAddRow">Enable Add Row</label>
            
                <ul class="addNewRow">
                    <li><label for="firstName">First Name</label>
                        <input id="firstName" type="text"></input>
                    </li>
                    <li><label for="lastName">Last Name</label>
                        <input id="lastName" type="text"></input>
                    </li>
                    <li><label for="title">Title</label>
                        <input id="title" type="text"></input>
                    </li>
                    <li>
                        <label for="birthDate">Birth Date</label>
                        <input id="birthDate" type="text"></input>
                    </li>
                    <li><label for="postCode">Postal Code</label>
                        <input id="postCode" type="text"></input>
                    </li>
                   ...

CSS

fieldset.explorer
        {
            float: left;
            width: 45%;
        }
        #sampleContainer fieldset input[type="checkbox"] + label
        {
            display: inline;
        }
        .addNewRow
        {
            width: 100%;
            list-style-type: none;
        }
        .addNewRow li
        {
            display: inline-block;
            float: left;
            margin-right: 1em;
            height: 60px;
        }
        .ui-igedit
        {
            margin: 2px 0px 2px 0px;
        }

JavaScript

$(function () {

            // Used to show output in the API Viewer at runtime,
            // defined in external script "apiviewer.js"

            var titles = ["Sales Representative", "Sales Manager", "Inside Sales Coordinator", "Vice President, Sales"];
            var countries = ["UK", "USA"];

            /*----------------- Method & Option Examples -------------------------*/

            // process events of checkboxes
            

            $("#enableAddRow").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "enableAddRow", $(this).is(":checked"));
                }
            });
            

            // process events of button

            $("#addRow").igButton({
                labelText: $("#addRow").val(),
                click: function (e) {
                    var rowObj = {
                        "EmployeeID": $("#grid").igGrid("rows").length + 1,
                        "FirstName": $("#firstName").val(),
                        "LastName": $("#lastName").val(),
                        "Title": $("#title").val(),
                        "BirthDate": $("#birthDate").val(),
                        "PostalCode": $("#postCode").val(),
                        "Country": $("#country").val()
                    };

                    $("#grid").igGridUpdating("addRow", rowObj);
                }
            });


            /*----------------- Instantiation -------------------------*/
            $("#grid").igGrid({
                virtualization: false,
                autoGenerateColumns: false,
                renderCheckboxes: true,
                primaryKey: "EmployeeID",
                columns: [{
                    // note: if primaryKey is set and data in primary column contains numbers,
                    // then the dataType: "number" is required, otherwise, dataSource may misbehave
                    headerText: "Employee ID", key: "EmployeeID", dataType: "number"
      ...