how to paint an expired date with css

Asked

Viewed 128 times

-2

inserir a descrição da imagem aqui

I have a table that shows the payoffs, how can I leave the red font or the red background if it’s expired? using css

my table is mounted as follows

 <table id="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 it’s expired its value is "yes"

javascript html css angularjs
  • 2

    The ideal is to apply a style when the table is being mounted, so you don’t have to go through it all later. Is it loaded by ajax? Share with us the relevant code snippets of how the table is created.

  • With html and css no way to check, you need to use javascript. Put the appropriate tags in your question.

  • you can’t use js??

  • i use angular, load table using ng-repeat with json coming from backend, could uasr js yes **No axei post edit option

  • class="dt-vencida-color" existed before Matthew’s answer was given?

  • No, I forgot to take, it didn’t work because it doesn’t validate the date

  • You said you have a field that stores whether the date is expired or not. What field is this?

  • yes, it is a field that comes from the back with the value "yes" or "no" for expired, could use it to define the color, just do not know how to use, whether use with ng-show, or ng-if, or by css

  • Use the ng-class to add the CSS class if the value of this field is yes.

  • @alessandremartins You can add a class to this line? <td>{{item.dt_vencto}}</td>. If yes, my answer will validate and work.

  • it is yes Leon, I will test, to use the ng-class, I will need to use tb o ng-if ?

  • @alessandremartins The way I made my example, you need to follow only what is there. The use of the datejs is important to be able to validate the dates, only.

  • @Leonfreire, it didn’t work, I’m using an admin template, if it doesn’t matter the date and jquery doesn’t work, but when I do, it gives a lot of conflict.

  • @alessandremartins Hmmm... From the conflict side, I would have to see how it was installed and what might be conflicting.

Show 9 more comments

3 answers

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>

  • Does not answer the question. The goal is to check if it is expired to apply the style.

  • You read the question correctly ? it did not ask for a function to check whether the date is expired or not.

  • Especially because it has no information on when the date will be expired or how the table is fed

  • if is overdue. For this we have the comment area. If the question was how to apply any style, it will probably be duplicated.

  • The question is how to apply the style, 'how to paint an expired date with css'

  • Have you read about negative votes ? Before voting you could have commented before. Until next

  • 1

    And how will the code know that the date is expired? It’s not personal @Mateusveloso, it’s ethical to explain the reason for a negative vote. Reply only based on the title without using comments leaves subject to this, it is my opinion.

Show 2 more comments

2

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

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

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

and adds the class data where I informed.

Use the 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 the CSS:

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

table td {
  width: 10%;
}

.expirado {
  color: red;
}

EDIT:

I saw that you edited the question and now shows your table. My example below works only if the <td> with the due date has the class data which I would suggest you add. Is it possible? In case it is not, replace the .data for 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>
<script src="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>

  • Why not use direct Angular to implement logic? Much simpler, no?

  • 3

    @Andersoncarloswoss Suddenly it’s simpler for those who understand Angular, which is not my case. Hahaha...

1


You are using Angular, so use it to implement the necessary logic. You said you have a column that has Yes/No value indicating if the date is expired, so 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 for "sim", then the class dt-vencida is added to the element. In CSS, define the class with color: red, for example.

See a functional 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>

<ul ng-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', then only he will possess the class dt-vencida and therefore only it will stay in the color red.

  • With this example, it validates the date or only works if it has previously set whether it is expired or not?

  • @Leonfreire Must be predefined. As the author said that such value exists, it is possible to consider that the validation is done on the server.

  • Got it. So in the case of angular, there was this validation already being done by the server and this code would capture this validation and insert the class? I’ll have to study that Angular.

  • 1

    @Leonfreire Angular is just front-end. The list of items there I created manually in order to exemplify, but the value of $scope.itens would be the return of an AJAX request, for example. The language-independent server will perform the validation and set the value of vencido as sim, if it is overdue, or não. The clause ng-class Angular only allows you to add a class to the element if a certain condition is met. In this example, the class dt-vencida is added if the condition item.vencido=='sim' be satisfied.

  • @Andersoncarloswoss, solved, angular is magical, for those who know how to use. Thank you

Browser other questions tagged javascript html css angularjs

You are not signed in. Login or sign up in order to post.