How to vary what is displayed in a date field depending on what values are received.

Glyndwr

http://live.datatables.net/vizixoto/1/edit

I am receiving a file that contains a date field. The date can be:
* the date value
* "-" if the line is not supposed to have a date (e.g., a description line)
* null if the line should have a date; however, it has not been populated yet

The line:

moment.updateLocale(moment.locale(), { invalidDate: "" })

is replacing the "-" with "" (i.e., the field is blank). This line does not seem to be working in live.datatables. In my code if I remove this line "invalid date" is displayed.

What I would like is to display the date, or "-" and a blank field when anything else is received (e.g., null).

My code is:

moment.updateLocale(moment.locale(), { invalidDate: "" })

if ( $.fn.dataTable.isDataTable( '#awardTable' ) ) {
    var awardTable = $('#awardTable').DataTable();
}
else {
    var awardTable = $('#awardTable').DataTable( {

        info:     false,
        "order": [[ 1, "asc" ],[ 4, "asc" ], [ 5, "asc"], [ 6, "asc"]],
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],

        columns: [
              {data: 'awardId',
                  visible: false,
                  searchable: false},
              {data: 'satOrder'},
              {data: 'awardType'},
              {data: 'awardName'},
              {data: 'awardOrder'},
              {data: 'adGroup'},
              {data: 'adOrder'},
              {data: 'adDetail'},
              {data: 'cadCompDate'},
             ],
        columnDefs: [
              { 'width': '30px', 'targets':[ 1, 4, 5, 6 ] },
              { 'width': '50px', 'targets':[ 8 ] },
              {targets: [ 8 ], render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )},
        ]
    });
}

kthorngren

Your test case is displaying this error in the console

Uncaught ReferenceError: moment is not defined

You need to include moment.js.

My suggestion is to use the columns.render function with an if statement to determine if the data is a validate date. You can use moment isValid() for this. If valid then return the moment formatted date. If not return the string you want.

Kevin

Glyndwr

Thanks Kevin,

I have changed my code to:

              {data: 'cadCompDate',
                    render: function (data, type, row) {
                        if (data === ''){
                            return ''
                        }else{
                            if (data === '-'){
                                return '-'
                            }else{
                                return data
                            }
                        }
                    },
                    defaultContent: ""
              },

And this displays what I want; although, I need to add code to format the date (i.e., {targets: [ 8 ], render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )}, no longer works). I replaced "return data" with:

var dateSplit = data.split('-');
return type === "display" || type === "filter" ?
    dateSplit[2] +'/'+ dateSplit[1] +'/'+ dateSplit[0] :
    data;

and I get console error "Cannot read property 'split' of undefined".

Kind regards,

Glyn

kthorngren

and I get console error "Cannot read property 'split' of undefined".

Don't know without seeing it. Can you build a test case? The code snippet isn't enough to understand why data is undefined.

This would be easier if you used the moment() methods and isValid(). I was think something along the lines of this:

        render: function (data, type, row) {
          if (moment(data).isValid()) {
            return moment(data).format('DD/MM/YYYY');
          }
          
          return data;
        }

For example:
http://live.datatables.net/numuyava/1/edit

Kevin

Glyndwr

Hi Kevin,

Using the moment() methods and isValid() worked.

Thanks :-)

Glyn