Filter table to only show dates in the next 30 days

Question

I have a table of data, and one of the columns is for the "Available Date." I only want to show rows where the Available Date is within the next 30 days.

Here's a simplified example of the table:

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

I can't exactly figure out how to add 30 days to a date so I can compare the current date with the date in each table row, aside from possibly converting to milliseconds with something like Date.parse(). I'm pretty new to jQuery and JavaScript, so any insight would be appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

This is how you can add 30 days to a Date:

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

please see AnthonyWJones' answer here: https://stackoverflow.com/a/563442/617027

...and the fiddle here http://jsfiddle.net/sparebytes/XrWzq/ for why using simply new Date() causes problems across month and year boundaries and with Daylight Savings Time.

edited May 23 '17 at 12:23

Community

1
1

answered Sep 22 '15 at 22:18

Tom

7,994
8
45
62

Thank you! To compare 30 days from now to the date in each table row, this still requires converting both dates to milliseconds, subtracting one from the other, then converting the result back to days and seeing if it's greater than or equal to 30, right? Or is there a simpler way? – lamb321001 Sep 23 '15 at 15:40

score 0 · Answer 2 · answered Sep 22 '15 at 22:18

You can add 30 days to a date object and then compare the date in your 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>

score 0 · Answer 3 · answered Sep 22 '15 at 22:21

You can use .setDate() to add an interval to the date. The following example will hide the Property 3 and Property 4 rows:

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

Here is a working JSFiddle

Filter table to only show dates in the next 30 days

3 Answers3