Sort divs by date in the format dd / mm / yyyy

2

Does anyone know how I can sort a set of divs by a date present in their content?

For example:

<div class="box" id="box1">
    <div class="date">01/05/2018</div>
</div>

<div class="box" id="box2">
    <div class="date">04/05/2018</div>
</div>

<div class="box" id="box3">
    <div class="date">08/05/2018</div>
</div>

<script>
$(document).ready(function(){

$(".box").each(function(){

        var date_content = $(this).find(".date").html();

        //aqui seria o momento de adicionar um codigo para ordena-los.. 
        //preciso que apareça da data maior até a menor.. ou seja, o primeiro box com a data mais recente, e os seguintes com as datas mais antigas... 

    });//end each

});//end doc
</script>
    
asked by anonymous 19.04.2018 / 19:13

4 answers

1

You can use .sort() doing direct date comparison, just convert the format dd/MM/yyyy to yyyy/MM/dd . It will even keep its id s of each div intact, because it will only change them position:

$(document).ready(function(){

   var boxes = $('.box').get(); // pego e destaco as divs

   boxes.sort(function(a, b){
      
      var da = $('.date', a).text().split("/"); // converto p/ array o 'a'
      var db = $('.date', b).text().split("/"); // converto p/ array o 'b'
      
      da = da[2]+"/"+da[1]+"/"+da[0]; // monto no formato yyyy/MM/dd
      db = db[2]+"/"+db[1]+"/"+db[0]; // monto no formato yyyy/MM/dd
      
      return db > da; // comparo as datas
   });

   $.each(boxes, function(idx, divs){
      $('body').append(divs); // reinsiro as divs ordenadas no body
   });//end each

});//end doc
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box" id="box1">
    <div class="date">01/05/2018</div>
</div>

<div class="box" id="box2">
    <div class="date">04/05/2018</div>
</div>

<div class="box" id="box5">
    <div class="date">01/07/2018</div>
</div>

<div class="box" id="box3">
    <div class="date">08/05/2018</div>
</div>

<div class="box" id="box6">
    <div class="date">01/01/2018</div>
</div>

<div class="box" id="box4">
    <div class="date">18/04/2018</div>
</div>

<div class="box" id="box5">
    <div class="date">02/02/2019</div>
</div>
    
19.04.2018 / 20:27
4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="date-list">
  <div class="box" id="box1">
      <div class="date">01/05/2018</div>
  </div>

  <div class="box" id="box2">
      <div class="date">30/05/2018</div>
  </div>

  <div class="box" id="box3">
      <div class="date">08/05/2018</div>
  </div>
  
  <div class="box" id="box3">
      <div class="date">15/11/2001</div>
  </div>
  
    <div class="box" id="box3">
      <div class="date">08/05/1998</div>
  </div>
</div>
<script>
$(document).ready(function(){
    var dates = [] //Criando um array de datas
    $(".box").each(function(){
        dates.push($(this).find(".date").html());
    });
    
    // Convertendo dd/MM/yyyy para yyyyMMdd
    function dateToNum(d) {
      d = d.split("/");
      console.log(Number(d[2]+d[1]+d[0]));
      return Number(d[2]+d[1]+d[0]);
    }
    
    //Ordenando através da função sort(> para ordem decrescente, < para ordem crescente)
    dates.sort(function(a,b){
      return dateToNum(a) < dateToNum(b);
    });
    
    //Popula a div de datas através de um array passado
    function populateDataList(_dates){
      $("#date-list").html("");
      $.each(_dates, function(index,value){
      
        $("#date-list").append(
          ("<div class='box' id='box{id}'><div class='date'>{date}</div></div>").replace("{id}",index).replace("{date}",value)
        );
      });
    }
    populateDataList(dates);

});//end doc
</script>

I'm re-populating with id of box in relation to date position within Array , in case you need to have the same ID let me know that I correct. >

Any questions just comment ^^

    
19.04.2018 / 19:51
3

You can use the sort function to compare the highest value and organize it.

Commented example:

/* Captura todos os elementos data */
let $datesElement = document.querySelectorAll(".date")

/* Organiza do maior para o menor */
$dates = [...$datesElement].sort( (a, b) => {

  /**
   * Separa os valores através da barra. O JavaScript pois
   * não suporta operações com a data no formato dd/mm/aaaa
   */
  $dateA = a.firstChild.textContent.split("/")
  $dateB = b.firstChild.textContent.split("/")
  
  /* Cria os objetos data e captura o tempo em millisegundos para comparar qual maior */
  return new Date($dateA[2], $dateA[1], $dateA[0]).getTime() < new Date($dateB[2], $dateB[1], $dateB[0]).getTime()
});

/**
 * Percorre as datas já organizadas
 * remove o elemento .box e adiciona os 
 * organizados por data
 */
for (let $date of $dates) {
  $date.parentElement.remove();
  document.body.appendChild($date)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box" id="box1">
    <div class="date">01/05/2018</div>
</div>

<div class="box" id="box2">
    <div class="date">04/05/2018</div>
</div>

<div class="box" id="box3">
    <div class="date">19/05/2018</div>
</div>

<div class="box" id="box4">
    <div class="date">05/05/2018</div>
</div>
    
19.04.2018 / 19:59
3

$(document).ready(function(){

      function toDate(value)
      {
        var from = value.split("/");
        return (new Date(from[2], from[1] - 1, from[0]));
        
      }
      var a = $('.box').sort(function (a, b) {
         //assumindo que o valor do atributo será sempre uma data válida
         var contentA = toDate($(a).attr('dueDate')).getTime();
         
         var contentB = toDate($(b).attr('dueDate')).getTime();
         
         return (contentB < contentA) ? -1 : (contentB > contentA) ? 1 : 0;
      });
    $('.box').parent().html(a);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script><divclass="box" id="box1" dueDate="01/05/2013">
    <div class="date">01/05/2013</div>
</div>

<div class="box" id="box2" dueDate="01/06/2013">
    <div class="date">01/06/2013</div>
</div>

<div class="box" id="box3" dueDate="04/05/2014">
    <div class="date">04/05/2014</div>
</div>

<div class="box" id="box4" dueDate="01/06/2015">
    <div class="date">01/06/2015</div>
</div>

<div class="box" id="box5" dueDate="08/05/2018">
    <div class="date">08/05/2018</div>
</div>

<div class="box" id="box6" dueDate="04/12/2020">
    <div class="date">04/12/2020</div>
</div>
  

getTime () returns the numeric value corresponding to the time of the specified date according to universal time.

     

Compare dates in milliseconds

    
19.04.2018 / 20:11