Zeige anstehende Daten in der Reihenfolge basierend auf dem aktuellen Datum jQuery

Question

Ich versuche, das aktuelle Datum zu erhalten und dann Daten mit dem nächsten Datum Div zuerst zu bestellen.

Ich habe es geschafft, das aktuelle Datum zu bekommen und es zu formatieren, aber ich bin unsicher, wie man die Bestellung macht?

Hier ist mein Versuch, aber es scheint nicht zu ihnen oder etwas zu bestellen

<div id="dates"> 
    <div class="date"><span>10 September 2016</span></div> 
    <div class="date"><span>22 July 2016</span></div> 
    <div class="date"><span>29 August 2016</span></div> 
    <div class="date"><span>28 July 2016</span></div> 
    <div class="date"><span>5 August 2016</span></div> 
</div> 

var current = new Date(); 
console.log(current); 

var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 

var elems = $.makeArray($(".date")); 

var d = current.getDate(); 
var m = months[current.getMonth()]; 
var y = current.getFullYear(); 

var formattedDate = d + " " + m + " " + y; 

console.log(formattedDate); 

elems.sort(function(a, b) { 
    return formattedDate > elems.text()); 
}); 

$("#dates").html(elems); 

Dank

Answer 1

Um das zu erreichen, was Sie benötigen, es wäre viel einfacher sein, die Werte zu Daten zu konvertieren und zu dem Vergleich aktuelles Datum. Von dort aus können Sie die .date Elemente und append() sie zu ihrem Behälter, wie diese sort():

var now = new Date(); 
 
$(".date").sort(function(a, b) { 
 
    var aDiff = new Date($(a).text().trim()) - now; 
 
    var bDiff = new Date($(b).text().trim()) - now; 
 
    return aDiff < bDiff ? -1 : aDiff > bDiff ? 1 : 0; 
 
}).appendTo('#dates').filter(function() { 
 
    return new Date($(this).text().trim()) - now < 0; 
 
}).appendTo('#dates');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="dates"> 
 
    <div class="date"><span>10 September 2016</span></div> 
 
    <div class="date"><span>22 July 2016</span></div> 
 
    <div class="date"><span>29 August 2016</span></div> 
 
    <div class="date"><span>28 July 2016</span></div> 
 
    <div class="date"><span>5 August 2016</span></div> 
 
</div>

Answer 2

am nächsten Tag auf den gegenwärtigen Zeitpunkt

var element = $.makeArray($(".date")); 
 
var array = []; 
 
var current = new Date(); 
 

 
element.sort(function(a,b){ 
 
    var c = new Date($(a).text()); 
 
    var d = new Date($(b).text()); 
 
    
 
    return c-d; 
 
}); 
 
for(var i in element){ 
 
    var d = new Date($(element[i]).text()); 
 
    if(d >= current){ 
 
     $("#sorted").append(element[i]) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dates"> 
 
    <div id="10 September 2016" class="date"><span>10 September 2016</span></div> 
 
    <div id="22 July 2016" class="date"><span>22 July 2016</span></div> 
 
    <div id="29 August 2016" class="date"><span>29 August 2016</span></div> 
 
    <div id="28 July 2016" class="date"><span>28 July 2016</span></div> 
 
    <div id="5 August 2016" class="date"><span>5 August 2016</span></div> 
 
</div> 
 
<h1>after sort</h1> 
 
<div id="sorted"></div>