Issues with Dates, Moment.js is not working

Issues with Dates, Moment.js is not working

MundaringMundaring Posts: 34Questions: 12Answers: 1

Hi,

I am using Editor datatables in an MVC local project and I have been trying different ways to change my dates format to DD/MM/YYYY, I did it using javascript splitting information but after I realised it does not work sorting.

This block is part of my Editor (I commented the render section because it is now allowing me to sort by date)

          {
                label: "Creation Date:",
                name: "CreationDate",
                type: "datetime",
                render: function (data) {
                    if (data)
                        return data.split('-').reverse().join('/');
                    else
                        return data;
                },
                def: function () { return new Date(); }
            }

I tried to implement moment.js but I have got nothing.

I have the table using my model from entity framework using just datatables and it works ok, but when I used Editor I have to create a ViewModel changing the datatype from Datetime to string

Model from Entity Framework, which I replaced by the next block VMDTTest

public partial class DTTest
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime CreationDate { get; set; }
    }

Model implemented to change datatype to use Editor

public class VMDTTest
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string CreationDate { get; set; }
    }

Here is my javascript. I would like to know what I am doing wrong. Editor is working perfect just I need to change the date format for users

$('document').ready(function () {

        //$.fn.dataTable.moment('dddd, MMMM Do, YYYY');
        $.fn.dataTable.moment('DD/MM/YYYY');

        editor = new $.fn.dataTable.Editor({
            ajax: '/DTTests/DTTest',
            table: '#tblDTTest',
            idSrc: 'Id',    //Schema.
            fields: [{
                label: "Name:",
                name: "Name"
            }, {
                label: "Description:",
                name: "Description"
            }, {
                label: "Creation Date:",
                type: "datetime",
                name: "CreationDate"
            }
            ],
            formOptions: {
                inline: {
                    onBlur: 'submit'
                }
            }
        });

        // Activate an inline edit on click of a table cell just allowed columns
        $('#tblDTTest').on('click', 'tbody td.editable', function (e) {
            editor.inline(this);
        });       
        

        var types = $('#tblDTTest').DataTable({
            "searching": true,
            "bPaginate": true,
            "bInfo": true,
            "bAutoWidth": true,
            oLanguage: {
                sProcessing: '<div class="grid-loading"><img src="../images/ajax-loader.gif" width="32" align="middle" /> Loading</div>'
            },
            "processing": true,
            dom: 'Bfrtip',
            "iDisplayLength": 25,
            ajax: {
                url: '/DTTests/DTTest',
                type: 'POST'
            },
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: "Id", className: 'noteditable' },
                { data: "Name", className: 'editable' },
                { data: "Description", className: 'editable' },
                { data: "CreationDate", className: 'editable' }
            ],
            order: [1, 'asc'],
            keys: {
                columns: ':not(:first-child)',
                keys: [9]
            },
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });

    });

Thanks,

Wilson

This discussion has been closed.