Formatting/ Rendering Date

huertoVerde

Hello,
im tring to format the date, witch at the moment ist being displayed like this. 2021-01-14T23:00:00.000+00:00
i only whant it to display 2021-01

my code

    arbeitsTabelle = $('#arbeitsTabelle').DataTable({
        retrieve: true,
        paging: false,
        info: false,
        ...

            { data: "datum",render: $.fn.dataTable.render.moment('Do MMM YYYY' )},
            { data: "betrag", render: $.fn.dataTable.render.number( '.', ',', 0, '€' ) },
            { data: "kommentar" },
            { data: "lieferant" },
            { data: "wurzel" },
        ], 

(rendering the number works perfectly)

I get these to errors

Uncaught TypeError: Cannot read properties of undefined (reading 'render')
at datetime.js:97
at datetime.js:91
at datetime.js:94

Uncaught TypeError: $.fn.dataTable.render.moment is not a function
at arbeitsMaske.js:198

I have read multiple threads on this topic. I have added this scripts in this order ( ive tried many otheres and non of them work)

<script src="https://cdn.datatables.net/plug-ins/1.11.3/dataRender/datetime.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript"  charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript"  src="/DataTables/datatables.min.js" th:src="@{/DataTables/datatables.min.js}">/script>

what may be the problem?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Try loading lines 1 and 2 after you load jquery.dataTables.js. Also it looks like you are loading datatables.js twice; once in line 3 and again in line 5. This iwll cause problems. Load it only once.

Kevin

huertoVerde

Hello,

thank you for your answers. Ive tried it, but it still dosnt work. Ive added a test case.

live.datatables.net/tesodayi/2/

kthorngren

You are getting Invalid date displayed. That means that the renderer doesn't understand the format of the source date. The datetime plugin docs show that you can use $.fn.dataTable.render.moment( from, to ); to supply the format of your source (from) date.

Kevin

huertoVerde

Yes ive also tried using that. For example like this, and it it still dosnt work
live.datatables.net/tesodayi/3/

kthorngren

Take a look at the moment.js docs. I fixed your format here:
http://live.datatables.net/tesodayi/3/edit

Kevin

huertoVerde

it looks like your edit was not saved.
It still says invalid date, and the code looks like this
{data:"start date", render: $.fn.dataTable.render.moment("YYYY-MM-DDTHH:MM:SS.NNNNNN","DD/MM/YYYY")},

huertoVerde

Ive treid this also. but what im noticing is that my format is the stard ISO 8601 i schoul not need to put a from.

{data:"start date", render: $.fn.dataTable.render.moment("YYYY-MM-DD HH:mm:ss.SSSZ","DD/MM/YYYY")},

kthorngren

Sorry about the saving of the test case. I updated it with the correct format.
http://live.datatables.net/tesodayi/4/edit

You are missing the T:

$.fn.dataTable.render.moment("YYYY-MM-DDTHH:mm:ss.SSSZ","DD/MM/YYYY")}

Looking at the datetime plugin code when the argument length is 1 the plugin sets the format to 'YYYY-MM-DD' which won't work for your case:

    if ( arguments.length === 1 ) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
    }

You can either change the plugin to handle the dates the way you want or provide the format in the $.fn.dataTable.render.moment renderer.

Kevin

huertoVerde

Thankyou!!!