Таблица фильтров, чтобы показывать только даты в следующие 30 дней

Question

У меня есть таблица данных, а один из столбцов - для «Доступной даты». Я хочу показать строки, в которых доступна доступная дата в течение следующих 30 дней.

Вот упрощенный пример таблицы:

<table id="properties"> 
    <tr> 
    <td>Property 1</td> 
    <td class="availability">4/11/2016</td> 
    </tr> 
    <tr> 
    <td>Property 2</td> 
    <td class="availability">9/29/2015</td> 
    </tr> 
</table> 

Я не могу точно понять, как добавить 30 дней к дате, так что я могу сравнить текущую дату с датой в каждой строке таблицы, кроме от возможного преобразования в миллисекунды с чем-то вроде Date.parse(). Я довольно новичок в jQuery и JavaScript, поэтому любое понимание будет оценено по достоинству.

Answer 1

Это, как вы можете добавить 30 дней к дате :

function addDays(date, days) { 
    var result = new Date(date); 
    result.setDate(date.getDate() + days); 
    return result; 
} 

см ответ AnthonyWJones' здесь: https://stackoverflow.com/a/563442/617027

... и скрипка здесь http://jsfiddle.net/sparebytes/XrWzq/, почему с помощью просто new Date() вызывает проблемы через месяц и год границы и с летним временем.

Answer 2

Вы можете добавить 30 дней до объекта даты, а затем сравните дату в вашем HTML

compareDate.setDate(compareDate.getDate() + 30);

var compareDate = new Date(); 
 
compareDate.setDate(compareDate.getDate() + 30); 
 

 
var tdDate; 
 
$('tr').each(function(){ 
 
    tdDate = (new Date($(this).find('td.availability').text())); 
 
    tdDate = ((tdDate-compareDate)/1000/60/60/24/30); 
 
    if(tdDate>0 && tdDate<30){ 
 
    $(this).show(); 
 
    }else $(this).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="properties"> 
 
    <tr> 
 
    <td>Property 1</td> 
 
    <td class="availability">4/11/2016</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Property 2</td> 
 
    <td class="availability">9/29/2015</td> 
 
    </tr> 
 
</table>

Answer 3

Вы можете использовать .setDate(), чтобы добавить интервал к дате. Следующий пример скрыть Property 3 и Property 4 строки:

HTML

<table id="properties"> 
    <tr> 
    <td>Property 1</td> 
    <td class="availability">9/22/2015</td> 
    </tr> 
    <tr> 
    <td>Property 2</td> 
    <td class="availability">9/23/2015</td> 
    </tr> 
    <tr> 
    <td>Property 3</td> 
    <td class="availability">12/28/2015</td> 
    </tr> 
    <tr> 
    <td>Property 4</td> 
    <td class="availability">10/2/2016</td> 
    </tr> 
</table> 

JS

var max_availability = 30; 
var end_date = new Date(); 

end_date.setDate(end_date.getDate() + max_availability); 

$("#properties td.availability").each(function() { 
    var this_date = new Date($(this).text()); 

    if(this_date < end_date){ 
     $(this).parent().show(); 
    } 
    else{ 
     $(this).parent().hide(); 
    }  
}); 

Вот рабочий JSFiddle