From 41cc62dfcb647a4d32f3a4566b9556bda9403601 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Mon, 4 Jan 2016 16:14:55 +0000 Subject: [PATCH] New - Data renderer: Date / time date renderer that uses momentjs --- dataRender/datetime.js | 80 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 dataRender/datetime.js diff --git a/dataRender/datetime.js b/dataRender/datetime.js new file mode 100644 index 0000000..14ad4b1 --- /dev/null +++ b/dataRender/datetime.js @@ -0,0 +1,80 @@ +/** + * Date / time formats often from back from server APIs in a format that you + * don't wish to display to your end users (ISO8601 for example). This rendering + * helper can be used to transform any source date / time format into something + * which can be easily understood by your users when reading the table, and also + * by DataTables for sorting the table. + * + * The [MomentJS library](http://momentjs.com/) is used to accomplish this and + * you simply need to tell it which format to transfer from, to and specify a + * locale if required. + * + * This function should be used with the `dt-init columns.render` configuration + * option of DataTables. + * + * It accepts one, two or three parameters: + * + * $.fn.dataTable.render.moment( to ); + * $.fn.dataTable.render.moment( from, to ); + * $.fn.dataTable.render.moment( from, to, locale ); + * + * Where: + * + * * `to` - the format that will be displayed to the end user + * * `from` - the format that is supplied in the data (the default is ISO8601 - + * `YYYY-MM-DD`) + * * `locale` - the locale which MomentJS should use - the default is `en` + * (English). + * + * @name datetime + * @summary Convert date / time source data into one suitable for display + * @author [Allan Jardine](http://datatables.net) + * @requires DataTables 1.10+ + * + * @example + * // Convert ISO8601 dates into a simple human readable format + * $('#example').DataTable( { + * columnDefs: [ { + * targets: 1, + * render: $.fn.dataTable.render.moment( 'Do MMM YYYYY' ) + * } ] + * } ); + * + * @example + * // Specify a source format - in this case a unix timestamp + * $('#example').DataTable( { + * columnDefs: [ { + * targets: 2, + * render: $.fn.dataTable.render.moment( 'X', 'Do MMM YY' ) + * } ] + * } ); + * + * @example + * // Specify a source format and locale + * $('#example').DataTable( { + * columnDefs: [ { + * targets: 2, + * render: $.fn.dataTable.render.moment( 'YYYY/MM/DD', 'Do MMM YY', 'fr' ) + * } ] + * } ); + */ + +jQuery.fn.dataTable.render.moment = function ( from, to, locale ) { + // Argument shifting + if ( arguments.length === 1 ) { + locale = 'en'; + to = from; + from = 'YYYY-MM-DD'; + } + else if ( arguments.length === 2 ) { + locale = 'en'; + } + + return function ( d, type, row ) { + var m = window.moment( d, from, locale, true ); + + // Order and type get a number value from Moment, everything else + // sees the rendered value + return m.format( type === 'sort' || type === 'type' ? 'x' : to ); + }; +};