Change background color of row based on datetime being lower than current datetime.

martin1223345

Hi All,

Sorry for all my questions. I am trying to get change the background of my rows when the current date time is lower (<) than the stored date time in my colomn "update_script". The date is stored in this format 2021-02-03 17:05:01 so i need current time to compare to that format. I am trying the following, but i dont get current time as result, instead the result is 1970-01-01 01:00:00. What am i doing wrong?

```
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.22/dataRender/datetime.js"></script>

$(document).ready(function() {
$('#accountTable').dataTable({
rowId: 'id',
"processing": true,
'rowCallback': function(row, data, index){
;
if ( row.update_script < moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss')){
$(row).find('td:eq(1)').css('background-color', ' rgba(255, 0, 0, 0.2)'); } else {
$(row).find('td:eq(1)').css('background-color', ''); }

}, ```

kthorngren

I am trying the following, but i dont get current time as result, instead the result is 1970-01-01 01:00:00.

According to the moment date now docs you don't supply any parameters. But you are supplying data with moment.utc(data). Not sure what data cotains.

row.update_scrip is probably just a string and not a moment object. You might need to moment(row.update_scrip).

In order for us to fully help we will need to see the data that you have. Please post a link to your page or a test case with a sample of your data so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

My suggestion is to use one of the Javascript environments, in the above link, and mess around with moment.js to get a feel for how it works. Its a bit complex at first but once you understand it much easier.

Kevin

martin1223345

Do realise that i am new to JJquery and Datatables. row.update_script is a string that contains the value 2021-02-03 17:05:01 depending on the update date. What parameters do you suggest i provide? As i am searching for a Datatable script that contains the current datetime in this format 2021-02-03 17:05:01. I had this done in php like this. I need that code to be applied to the Datatable.

if($row['update_script'] < date("Y-m-d H:i:s") && $category == 6 ){$checkscriptcolor = "background: rgba(255, 0, 0, 0.2);";}
else{$checkscriptcolor ="";}

kthorngren

There are various ways you can create a test case. Assuming you are using ajax to fetch the data you can take a subset of that data and create a sample using Javascript data. See this example. You can get various Datatable templates from here to simulate ajax or server side processing.

I created the following test case with some made up data that includes your data format:
http://live.datatables.net/banurege/1/edit

You had if ( row.update_script which is not working because row is the HTML row. You want to use the data parameter. You will want something like this:

    rowCallback: function ( row, data ) {
      if (moment(data.update_script, 'YYYY-MM-DD HH:mm:ss') < moment()) {
        $('td:eq(0)', row).css('background-color', ' rgba(255, 0, 0, 0.2)');
      } else {
        $('td:eq(0)', row).css('background-color', ''); 
      }
    }

moment(data.update_script, 'YYYY-MM-DD HH:mm:ss') parses a moment using the string and provided format of the string. See this moment doc. moment() gets the current datetime. I don't use moment much so it took a bit to workout exactly what to do.

Your code was close

HTH,
Kevin

martin1223345

Thank you !. This works exactly how i want it to work. Only thing is that i need the entire row to change color. I tried it like this as test to change the first 3 colomns and it is not working. Is it posible to color the complete row or do i need to repeat this code for 13 times?

``` rowCallback: function ( row, data ) {
if (moment(data.update_script, 'YYYY-MM-DD HH:mm:ss') < moment() && data.category == 6) {
$('td:eq(0,1,2)', row).css('background-color', ' rgba(255, 0, 0, 0.2)');
} else {
$('td:eq(0,1,2)', row).css('background-color', '');
}

}, ```

martin1223345

Got it ! This is my final code ! Thanks !

rowCallback: function ( row, data ) {
  if (moment(data.update_script, 'YYYY-MM-DD HH:mm:ss') < moment() && data.category == 6) {
    $(row).css('background-color', ' rgba(255, 0, 0, 0.2)');
  } else {
    $(row).css('background-color', '');
  }   
   
},