How to hide the tr using data attribute in jquery

Question

This is my jquery function to hide table row, in there I put the data attribute expiry

 $("tr.with-expiry").each(function() { var today = new Date(); var tr_date = $(this).data('expiry'); tr_date = new Date(today); if (today.getTime() > tr_date.getTime()) { $(this).hide(); } else { $(this).show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 1</td></tr> <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 2</td></tr> <tr data-expiry="2020-08-01" class="with-expiry"><td>stuff 3</td></tr> </table>

Answer 1

You're very close, you just are getting the Date() for your date-expiry incorrectly

tr_datetime = new Date(tr_date);

You were just overwriting it with today's date. The rest of the code then works as expected.

Date Comparison : To hide dates...

• ...Before today: if (today_datetime > tr_datetime.getTime())
• ...Up to today: if (today_datetime >= tr_datetime.getTime()) (ie including today)
• ...After today: if (today_datetime < tr_datetime.getTime())
• ...Today or later: if (today_datetime <= tr_datetime.getTime())

Adjust Today's Date by 1 Week :

• One week from today: today_datetime + (7 * 24 * 60 * 60 * 1000)
• One week ago: today_datetime - (7 * 24 * 60 * 60 * 1000)

Other Notes: FYI, you don't need to get today = new Date(); etc. every time - just get it once outside the loop.

Working Snippet:

 var today = new Date(); var today_datetime = today.getTime(); $("tr.with-expiry").each(function() { tr_datetime = new Date($(this).data('expiry')); if (today_datetime > tr_datetime.getTime()) { $(this).hide(); } else { $(this).show(); } }); var week_from_today = today_datetime + (7 * 24 * 60 * 60 * 1000); $("tr.expiry-next-week").each(function() { tr_datetime = new Date($(this).data('expiry')); if (week_from_today > tr_datetime.getTime()) { $(this).hide(); } else { $(this).show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><strong>Show rows with dates after today</strong></p> <table> <tr data-expiry="2020-09-01" class="with-expiry"><td>2020-09-01</td></tr> <tr data-expiry="2020-09-09" class="with-expiry"><td>2020-09-09</td></tr> <tr data-expiry="2020-09-10" class="with-expiry"><td>2020-09-10</td></tr> <tr data-expiry="2020-09-16" class="with-expiry"><td>2020-09-16</td></tr> <tr data-expiry="2020-09-17" class="with-expiry"><td>2020-09-17</td></tr> </table> <p><strong>Show rows with dates later than 1 week from today</strong></p> <table> <tr data-expiry="2020-09-01" class="expiry-next-week"><td>2020-09-01</td></tr> <tr data-expiry="2020-09-09" class="expiry-next-week"><td>2020-09-09</td></tr> <tr data-expiry="2020-09-10" class="expiry-next-week"><td>2020-09-10</td></tr> <tr data-expiry="2020-09-16" class="expiry-next-week"><td>2020-09-16</td></tr> <tr data-expiry="2020-09-17" class="expiry-next-week"><td>2020-09-17</td></tr> </table>

Answer 2

 // `a` and `b` are `Date` instances const isAfter = (a, b) => a.getTime() > b.getTime(); // Example - Is '2020-09-10' after today? const result = isAfter(new Date('2020-09-10'), new Date()); // Result console.log(result)

 // `a` and `b` are `Date` instances const isAfter = (a, b) => a.getTime() > b.getTime() const todayDate = new Date() const todayString = todayDate.toISOString().slice(0, 10) $("tr.with-expiry").each(function() { var tr_date_val = $(this).data('expiry') // if the row's data-expiry attribute is after today if (isAfter(new Date(tr_date_val), todayDate)) { $(this).css({background: 'red'}) console.log(`${tr_date_val} is after ${todayString} so hide`) //$(this).hide() } else { console.log(`${tr_date_val} is not after ${todayString} so show`) $(this).css({background: 'green'}) //$(this).show() } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr data-expiry="2020-09-15" class="with-expiry"> <td>2020-09-15</td> </tr> <tr data-expiry="2020-09-15" class="with-expiry"> <td>2020-09-15</td> </tr> <tr data-expiry="2020-08-01" class="with-expiry"> <td>2020-08-01</td> </tr> </table>

Answer 3

Try

 $("tr.with-expiry").each(function() { var today = new Date(); var data_expiry = $(this).attr('data-expiry'); var tr_date = new Date(data_expiry); if (today.getTime() > tr_date.getTime()) { $(this).hide(); } else { $(this).show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 1</td></tr> <tr data-expiry="2020-09-15" class="with-expiry"><td>stuff 2</td></tr> <tr data-expiry="2020-08-01" class="with-expiry"><td>stuff 3</td></tr> </table>