How to JS Date Format

I’m using Laravel 8 and Bootsrap in this project. I’ve tried to solve this problem with Carbon in Laravel, but the prob still likes that.

So I think maybe the problem in JS Script, but I dunno about JS so deep. I really need help with this prob.

My problem is how to change the date format in JS, I wish to change in DD/MM/YYYY format.

JS Script

<script>
$(function() {
    $('#kategoris-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'kategori/json',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'nama', name: 'nama',
                fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
                }
            },
            { data: 'updated_at', name: 'updated_at'},
        ]
    });
});
</script>

My Table View
How to JS Date Format

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Add this variable to the Model class:

protected $casts = [
    'updated_at' => 'datetime:m/d/Y'
];

This will change the datetime format and will reflect whenever you retrieve the data through eloquent.

Method 2

You could try registering an editor and using moment.js. Something like this:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    
    $.fn.dataTable.moment( 'DD/MM/YYYY' );

    editor = new $.fn.dataTable.Editor( {
        ajax: 'kategori/json',
        table: '#kategoris-table',
        fields: [ {
                label:  'Updated at:',
                name:   'updated_at',
                type:   'datetime',
                def:    function () { return new Date(); },
                format: 'DD/MM/YYYY',
                fieldInfo: 'Formatted date'
            }
        ]
    } );

    $('#kategoris-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'kategori/json',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'nama', name: 'nama',
                fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
                }
            },
            { data: 'updated_at', name: 'updated_at'},
        ]
    });
});

Please see this example which includes the other libraries you would need to load at the end of the example: https://editor.datatables.net/examples/dates/formatting.html

PS – I tried to include the libraries in my answer in case of a broken link but when I do, I am given the message that “There appears to be code in my post that is not formatted properly” and I cannot seem to get it to work with formatting the links.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x