igGrid with row edit dialog date column edited with datepicker

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-data/nw-employees"></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>

<script id="dialogTemplate" type="text/html">
        <div class="row-edit-dialog-container-head"><strong>${Name}</strong></div>
        <div class="row-edit-dialog-container-cols">
            <div style="float: left;">
                <table>
                    <colgroup>
                        <col style="width: 30%;" />
                        <col style="width: 70%;" />
                    </colgroup>
                    <tbody data-render-tmpl="true"></tbody>
                </table>
            </div>
        </div>
    </script>
<script id="editorsTemplate" type="text/html">
        <tr>
            <td style="text-align:right;color:#777;"><strong>${headerText}</strong></td>
            <td><input data-editor-for-${key}="true" /></td>
        </tr>
    </script>

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

CSS

.row-edit-dialog-container-cols
		{
			width:100%;
			overflow:hidden;
			border-bottom:1px solid #ccc;
			padding-bottom:15px;
		}
        .row-edit-dialog-container-cols table
        {
            width: 100%;
            border-collapse: collapse;
        }
        .row-edit-dialog-container-cols table tbody td
        {
            border:none !important;
			padding: 0 4px 10px;
        }
		.row-edit-dialog-container-head
		{
			border-bottom:1px solid #ccc;padding-bottom:10px;margin-top:10px;margin-bottom:25px;font-size:16px;
		}
		.ui-dialog .ui-dialog-buttonpane
		{
			margin-top:0;
			padding-top:0;
		}
		.ui-dialog .ui-dialog-buttonpane button
		{
			margin:0.5em 0 0.5em 0.4em;
		}
		.ui-iggrid .ui-widget-content.ui-dialog
		{
			border-color:#888;
		}
		.ui-dialog-title
		{
			text-transform:uppercase;
			margin:0;
			font-size:90%;
		}
		.ui-dialog .ui-dialog-titlebar
		{
			padding: 0.7em 1em;
		}

JavaScript

$( function ()
     {
        $("#grid").igGrid({
				dataSource: northwindEmployees,
				primaryKey: "ID",
				width: "100%",
				height: "600px",
				autoGenerateColumns: false,
				columns: [
					{ headerText: "Employee ID", key: "ID", dataType: "number", hidden: true },
					{ headerText: "Name", key: "Name", dataType: "string" },
					{ headerText: "Title", key: "Title", dataType: "string" },
					{ headerText: "Phone", key: "Phone", dataType: "string" },
					{ headerText: "HireDate", key: "HireDate", dataType: "date" }
				],
				features: [
					{
						name: "Updating",
						enableAddRow: false,
						enableDeleteRow: false,
						editMode: "dialog",
						columnSettings: [
							{
							  columnKey: "ImageUrl",
								readOnly: true
							},
							{
								columnKey: "Name",
								readOnly: true
							},
              {
								columnKey: "HireDate",
								editorType: "datepicker"
							}
						],
						rowEditDialogOptions: {
							width: "530px",
							height: "410px",
							dialogTemplateSelector: "#dialogTemplate",
							editorsTemplateSelector: "#editorsTemplate",
							showReadonlyEditors: false,
						}
					}
				]
			});
});