OwlCyberSecurity - MANAGER

Edit File: custom-grid-field.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jsGrid - Custom Grid Field Scenario</title>
    <link rel="stylesheet" type="text/css" href="demos.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css' />

.ui-datepicker * {
            font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
            font-size: 14px;
            font-weight: 300 !important;
        }
    </style>
</head>
<body>
    <h1>Custom Grid DateField</h1>
    <div id="jsGrid"></div>

var MyDateField = function(config) {
                jsGrid.Field.call(this, config);
            };

MyDateField.prototype = new jsGrid.Field({
                sorter: function(date1, date2) {
                    return new Date(date1) - new Date(date2);
                },

itemTemplate: function(value) {
                    return new Date(value).toDateString();
                },

insertTemplate: function(value) {
                    return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
                },

editTemplate: function(value) {
                    return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
                },

insertValue: function() {
                    return this._insertPicker.datepicker("getDate").toISOString();
                },

editValue: function() {
                    return this._editPicker.datepicker("getDate").toISOString();
                }
            });

jsGrid.fields.myDateField = MyDateField;

$("#jsGrid").jsGrid({
                height: "70%",
                width: "100%",
                inserting: true,
                editing: true,
                sorting: true,
                paging: true,
                fields: [
                    { name: "Account", width: 150, align: "center" },
                    { name: "Name", type: "text" },
                    { name: "RegisterDate", type: "myDateField", width: 100, align: "center" },
                    { type: "control", editButton: false, modeSwitchButton: false }
                ],
                data: db.users
            });

});
    </script>
</body>
</html>