Показать ближайшие даты в порядке на основании текущей даты jQuery

Question

Я пытаюсь получить текущую дату, а затем заказывать даты с ближайшей датой div.

Мне удалось получить текущую дату и отформатировать ее, но я не уверен, как сделать заказ?

Вот моя попытка, но это, кажется, не приказать их или что-нибудь

<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); 

Благодарности

Answer 1

Чтобы добиться того, что вам требуется, было бы гораздо легче преобразовать значения даты и сравнить с текущая дата. Оттуда вы можете sort() в .date элементы и append() их в контейнере, как это:

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

ближайшую дату на основе текущей даты

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>