Serenity Date Input Formatter for Inline Editing in Grids

Inline editing in grids is not recommended in Serenity by its owner. However he demonstrated serenity inline editing in an example with some warnings. There is no date input formatter in this example. We may use the following date input formatter and call this formatter from getColumns function in grid file.

private dateInputFormatter(ctx) {
            var klass = 'edit s-DateEditor';
            var item = ctx.item as StockVerificationDetailRow;
            var pending = this.pendingChanges[item.RecId];
            var column = ctx.column as Slick.Column;

            if (pending && pending[column.field] !== undefined) {
                klass += ' dirty';
            }

            var value;
            if (item[column.field] == null)
                value = item[column.field];
            else
                value = Q.parseDate(item[column.field]).toLocaleDateString();

            return "<input type='text' class='" + klass +
                "' data-field='" + column.field +
                "' value='" + value +
                "' maxlength='" + column.sourceItem.maxLength + "' />" +
                "<script>$('.s-DateEditor').datepicker(); </script>" +
                "<script>$('.s-DateEditor').each(function(){    var value = $(this).val();   var size = value.length;   size = size * 4;       $(this).css('width', size * 3);        });       </script>" +
                "<script>$('.ui-datepicker-trigger').css({'padding-bottom': '4px','height': '24px'}); </script>";
        }

And the following date input inline formatter is working for html 5 datepicker.

private dateInputFormatter(ctx) {
            var klass = 'edit';
            var item = ctx.item as AgentsRow;
            var pending = this.pendingChanges[item.AgentCode];
            var column = ctx.column as Slick.Column;

            if (pending && pending[column.field] !== undefined) {
                klass += ' dirty';
            }

         
            var value;
            if (item[column.field] == null)
                value = item[column.field];
            else
                value = Q.parseDate(item[column.field]).toLocaleDateString();  

            return "<input type='date' class='" + klass +
                "' data-field='" + column.field +
                "' value='" + value +               
                "' maxlength='" + column.sourceItem.maxLength + "'/>";
        }