how to paint a date expired with css

Navigation
-2

Ihaveatablethatshowsthematurities,howcanIleavethefontredorthebackgroundredifitisexpired?usingcss

Mytableismountedasfollows

<tableid="myTable" class="uk-table sortable uk-table-hover uk-text-nowrap" cellspacing="0" cellpadding="1" border="0" width="99%">
                            <thead>
                                <tr>
                                    <th class="uk-width-1-10 uk-text-center small_col"><input type="checkbox" icheck ng-change="sellall()" ng-model="table1.selectAll" class="check_all" table-check-all></th>
                                    <th style="width: 80px">AÇÕES</th>
                                    <th style="width: 70px">EMISSÃO</th>
                                    <th style="width: 70px">VENCIMENTO</th>
                                    <th style="width: 200px">PESSOA</th>
                                    <th style="width: 80px; text-align:right">VALOR</th>
                                    <th style="width: 80px; text-align:right">PAGO</th>
                                    <th style="width: 80px; text-align:right">SALDO</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>Selecionado:<span class="uk-badge uk-badge-notification uk-text-large">{{valSelecionado | currency : ''}}</span></th>
                                    <th>Pago: <span class="uk-badge uk-badge-notification uk-badge-success uk-text-large">{{valJaPago | currency : ''}}</span></th>
                                    <th>Saldo: <span class="uk-badge uk-badge-notification uk-badge-warning uk-text-large">{{valBaixar | currency : ''}}</span></th>
                                    <th></th>
                                    <th style="text-align:right">{{totalSelect | currency: ''}}</th>
                                    <th style="text-align:right">{{totalPago | currency: ''}}</th>
                                    <th style="text-align:right">{{totalSelect - totalPago| currency: ''}}</th>
                                </tr>
                            </tfoot>
                            <tbody>
                                <!--ng-change="tteste()" ng-checked="tteste()" ng-click="tteste()"-->
                                <tr ng-repeat="item in registro" on-last-repeat>
                                    <td class="uk-text-center uk-table-middle small_col"><input type="checkbox" icheck ng-model="tabela[$index]" ng-change="addRem($index, tabela, item)" class="check_row" table-check-row></td>
                                    <td style="width: 50px" class="">
                                        <a class="tooltip" title="Deletar" ng-click="delRegistro(item)"><i class="md-icon material-icons uk-text-danger tooltip" title="Deletar">&#xE872;</i></a>
                                        <a ng-click="editRegistro(item)" href="#modalcadastro" data-uk-modal="{ center:true, bgclose:false }"><i class="md-icon material-icons tooltip" title="Editar">mode_edit</i></a>
                                        <a ng-click="setDadosBaixar(item)" href="#modalbaixa" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Editar">file_download</i></a>
                                        <a ng-click="cleanContaMov(); getContaMov(item)" href="#modalbaixados" data-uk-modal="{ center:true, bgclose:true }"><i class="md-icon material-icons tooltip" title="Visualizar baixas parciais">chrome_reader_mode</i></a>
                                    </td>
                                    <td>{{item.dt_emissao}}</td>
                                    <td>{{item.dt_vencto}}</td>
                                    <td>{{item.PessoaModel.razao | limitTo : 30 : 0}} <a ng-if="item.PessoaModel.razao.length > 30">...</a> </td>
                                    <td style="text-align:right">{{item.valor | currency: ''}}</td>
                                    <td style="text-align:right">{{item.vlr_pago | currency: ''}}</td>
                                    <td style="text-align:right">{{item.saldo | currency: ''}}</td>
                                </tr>
                            </tbody>
                        </table>

*** I have a field that when overdue its value is "yes"

    
asked by anonymous 28.06.2017 / 16:40

3 answers

1

You are using Angular, so use it to implement the necessary logic. You said that you have a column that has Yes / No value indicating if the date is expired, then you just add a CSS class to the element that has that column equal to yes. In the element, add: 

ng-class="{'dt-vencida': item.vencido=='sim'}"

If the value of vencido is "sim" , then the dt-vencida class is added to the element. In CSS, set the class with color: red , for example.

See a working example below: 

angular
  .module('myApp', [])
  .controller('myController', myController);

myController.$inject = ['$scope'];

function myController($scope) {
  $scope.itens = [
    {name: "Item 1", vencido: "não"},
    {name: "Item 2", vencido: "sim"},
    {name: "Item 3", vencido: "não"}
  ];
}
.dt-vencida {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><ulng-app="myApp" ng-controller="myController">
  <li ng-repeat="item in itens">
    <span ng-class="{'dt-vencida': item.vencido=='sim'}">{{item.name}}</span>
  </li>
</ul>

Only item 2 in the list has the value vencido='sim' , so only it will have the class dt-vencida and therefore only it will be red.

    
28.06.2017 / 18:47
3

Follow an example using classes. 

.dt-vencida-color{
  color: red;
}

.dt-vencida-background{
  background: red;
}
<table>
  <tbody>
    <tr>
      <td>Mateus</td>
      <td class="dt-vencida-color">25/06/2017</td>
    </tr>
    <tr>
      <td>Mateus</td>
      <td class="dt-vencida-background">25/06/2017</td>
    </tr>
  </tbody>
</table>
    
28.06.2017 / 16:45
2

By faithfully following only the information you have passed (your options have been left half open), I believe you can adapt datejs to your site.

Take the most important information from the examples. For your HTML , add: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

and add the class data where I reported.

Use JS : 

var dia = Date.today();

$(document).ready(function() {
  $('.data').each(function() {
    var dueDate = $(this).text();
    var due = Date.parse(dueDate);
    var compare = Date.compare(due, dia);

    if (compare == -1) {
      $(this).addClass("expirado");
    }
  });
});

And finally CSS : 

table {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: aliceblue;
}

table td {
  width: 10%;
}

.expirado {
  color: red;
}

EDIT:

I saw you edited the question and now shows your table. My example below works only if the <td> with the expiration date has the class data that I would suggest adding. It is possible? If it is not, replace .data with td:nth-child(2) and see if it suits you. In your specific case, you can also use it more fully: table#myTable tr > td:nth-child(2)

I leave below an example I created using Datejs:

Example:

With .data 

var dia = Date.today();

$(document).ready(function() {
  $('.data').each(function() {
    var dueDate = $(this).text();
    var due = Date.parse(dueDate);
    var compare = Date.compare(due, dia);

    if (compare == -1) {
      $(this).addClass("expirado");
    }
  });
});
body {
  margin: 0;
  text-align: center;
}

table {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: aliceblue;
}

table td {
  width: 10%;
}

.expirado {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>28/06/2017</td>
      <td class="data">14/06/2017</td>
      <td>ADEMIR</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">30/06/2017</td>
      <td>EXEMPLO 1</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">01/01/2017</td>
      <td>EXEMPLO 2</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">02/01/2018</td>
      <td>EXEMPLO 3</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">15/07/2017</td>
      <td>EXEMPLO 4</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">28/02/2012</td>
      <td>EXEMPLO 5</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
    <tr>
      <td>28/06/2017</td>
      <td class="data">23/05/2020</td>
      <td>EXEMPLO 6</td>
      <td>500,00</td>
      <td>0,00</td>
      <td>500,00</td>
    </tr>
  </tbody>
</table>
    
28.06.2017 / 17:56
How to style an echo with CSS? When generating an image, I just want to visualize it and not save it