Hide / Show table rows based on time comparison

Question

I have a table with dates in the middle column that have been parsed/formatted in Moment.js.

I also have two buttons, when clicked I want one button to only show table rows with dates < 24 hours away, the other button to show table row with dates that are dates > 24 hours away.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>

<button type="button" id="button1">Less than 24 hours</button>
<button type="button" id="button2">More than 24 hours</button>

<table id="myTable">
<thead>
    <tr>
        <th colspan="3">Table</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>A</td>
        <td class="dates">12/24/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>A</td>
        <td class="dates">11/23/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>A</td>
        <td class="dates">12/24/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
</tbody>

I think I have to use Jquery , this is what I was thinking.

$(document).ready(function() {

    var m = moment();
    var n = m.add(24, 'hours');
    var $dates = $('.dates');

$('#button1').click(function() {

    if ($dates.each > n) {
        $dates.hide();

        });
    });
});

Answer 1

Try something like this (untested snippet).

$dates.each(function() {
  var date = moment($(this).text());
  if (date.isAfter(n)) {
    $(this).hide();
  } else {
    $(this).show();
  }
});

If moment has issues with parsing your datetime texts in your cells, you can specify the format explicitly, see the documentation .

Answer 2

Use this fiddle . May it Helps!

JS:

$('#less24,#gt24').click(function() {
var target = $(this).attr('id');
var currentdate = new Date();
$('.dates').each(function(){

var diff=daydiff(currentdate,new Date($(this).text()));
if(target === 'less24')
{
if(diff <1 && diff >-1)
{
$(this).parent().show();
}
else
{
$(this).parent().hide();
}
}
else
{
if(diff <1 && diff >-1)
{
$(this).parent().hide();
}
else
{
$(this).parent().show();
}
}
});

});

function parseDate(str) {
    var mdy = str.split('/');
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
}

HTML :

<button type="button" id="less24">Less than 24 hours</button>
<button type="button" id="gt24">More than 24 hours</button>

<table id="myTable">
<thead>
    <tr>
        <th colspan="3">Table</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>A</td>
        <td class="dates">12/24/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>A</td>
        <td class="dates">11/23/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>A</td>
        <td class="dates">12/24/2016 12:45 pm</td>
        <td>C</td>
    </tr>
    <tr style="display:none;">
        <td colspan="3"></td>
    </tr>
</tbody>

Answer 3

You can use moment isAfter to check if the table date is > 24 hours away and isBetween to check if the table date is between the current date and the next 24 hours (that is how I've interpreted < 24 hours away )

When parsing table date to moment object you have to specify format because your input is not in ISO 8601 format.

Here a working example:

 $('#button1').click(function(){ var $dates = $('.dates'); var m = moment().add(24, 'h'); $dates.each(function() { var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); if (date.isBetween(moment(), m)) { $(this).parent().show(); } else { $(this).parent().hide(); } }); }); $('#button2').click(function(){ var $dates = $('.dates'); var m = moment().add(24, 'h'); $dates.each(function() { var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); if (date.isAfter(m)) { $(this).parent().show(); } else { $(this).parent().hide(); } }); }); $('#button3').click(function(){ $('tr').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> <button type="button" id="button1">Less than 24 hours</button> <button type="button" id="button2">More than 24 hours</button> <button type="button" id="button3">Show All</button> <table id="myTable"> <thead> <tr> <th colspan="3">Table</th> </tr> </thead> <tbody> <tr> <td>A</td> <td class="dates">12/24/2016 12:45 pm</td> <td>C</td> </tr> <tr style="display:none;"> <td colspan="3"></td> </tr> <tr> <td>A</td> <td class="dates">11/23/2016 12:45 pm</td> <td>C</td> </tr> <tr style="display:none;"> <td colspan="3"></td> </tr> <tr> <td>A</td> <td class="dates">12/24/2016 12:45 pm</td> <td>C</td> </tr> <tr style="display:none;"> <td colspan="3"></td> </tr> </tbody>