Sort Divs by date in dd/mm/yyyy format

Question

Does anyone know how I can sort a set of Ivs through 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>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="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 the id of box box relative to the position of the date within the Array, in case it is necessary to have the same ID let me know that I correct.

Any doubt just comment ^^

Answer 2

You can use the function sort to compare which higher value and organize them.

Following example commented:

/* 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>

<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">19/05/2018</div>
</div>

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

Answer 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>


<div class="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

Answer 4

Can use .sort() making direct comparison of dates, just convert the format dd/MM/yyyy for yyyy/MM/dd. It will even keep their ids of each div intact, because it will only change their 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>
<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="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>