Comparing todays date with a list of dates

Question

I'm sorry if this is a duplicate, but I can't find an existing answer that matches my question (I have looked!).

I have a list with about a dozen items each with a <span>*fixed date*</span>.

The list containing the dates looks like so....

<ul id="whatson">
  <li>
     <span class="chkdate">06/04</span> 
     somestuff1
  </li> 
  <li>
     <span class="chkdate">06/05</span> 
     somestuff2
  </li>
  .......
</ul>

I want to filter the list so all dates older than today are hidden.

will give me todays date e.g. mm/dd = 06/04, that seems fine.

I now want to check this against each list item formatted as e.g. 06/04 and hide those items that are earlier than today.

It only needs to function once, on page load.

my code so far...

$(document).ready(function () {
    var d = new Date();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var todaysdate = (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;

    alert("checking " + datetocheck + " against today = " + todaysdate);
    --- * temp check *

    var datetocheck = $('#whatson li span.chkdate').text();

    if (datetocheck < todaysdate) {
          $('#whatson li').hide();
    } else {
          $('#whatson li').show();
    };
})

My alert shows..

Checking 06/0406/04 against today 06/04 *(when all list dates match)*

and displays correctly.

Changing one or more list dates the alert displays

Checking 06/0306/04 against today 06/04 *(when one or more list dates don't match)*

and nothing is shown.

Can you help, I thought this would be straight forward but just can't get a result?

How do you plan to handle the year-end edge condition? 12/31 is less than 1/1, right? You'll need to use full Date objects to use the comparison operators. — Tap, Jun 04 '13 at 17:58
A fantastic response! Thanks everyone much appreciated. Just spent a couple of hours trying each one, (more for learning reasons than anything!) Key was the loop using 'each'. 'passionateCoder's use of the .closest was new to me and saved 'parenting' so I had to use that, assuming the not including events dated today can be fixed. — Neil, Jun 04 '13 at 22:15
passionCoder posted the 'fix' whilst I was typing the last comment. All sorted and cruising. — Neil, Jun 04 '13 at 22:43

Jonathan · Answer 1 · 2013-06-05T18:38:31.977

1

You need a for loop:

var datestocheck = $('#whatson li span.chkdate');

  for (var i = 0; i < datestocheck.length; i++) {
    var compare = parseDate(datestocheck[i].text());

    if (compare < todaysdate) {
      datestocheck[i].hide();
    }
  }

edited Jun 05 '13 at 18:38

answered Jun 04 '13 at 17:59

Jonathan

8,771
4
41
78

And something to compare your dates: http://stackoverflow.com/questions/492994/compare-dates-with-javascript – jammykam Jun 04 '13 at 18:01
1

BTW: You should consider adding a `datetime` attribute to your items like `datetime="YYYY-MM-DD"` – Jonathan Jun 04 '13 at 18:04
This seems just to hide the date, not (the parent li) i.e. the whole text. – Neil Jun 05 '13 at 15:02
well, if you can't figure out how to hide the parent from there you could always try to hire a developer. – Jonathan Jun 05 '13 at 18:37

score 1 · Answer 2 · answered Jun 04 '13 at 18:04

Example on jsFiddle

Sample html

<ul id="whatson">
  <li>
     <span class="chkdate">06/01</span> 
     somestuff1
  </li> 
  <li>
     <span class="chkdate">06/04</span> 
     somestuff1
  </li> 
  <li>
     <span class="chkdate">06/05</span> 
     somestuff2
  </li>
</ul>

Script

var today = new Date();
$("#whatson .chkdate").each(function() {
    // split the text and get the month/day value
    var datepieces = $(this).text().split("/");
    var month = datepieces[0];
    var day = datepieces[1];

    // if the month of the element is previous to today's month
    // hide the li
    if (month < (today.getMonth() + 1))
        $(this).closest("li").hide();

    // if the day of the element is previous to today
    // hide the li
    if (day < today.getDate())
        $(this).closest("li").hide();
});

Is there a benefit of checking in two stages, month then day, rather than just the one? — Neil, Jun 05 '13 at 14:29

Matt K · Answer 3 · 2013-06-04T18:24:38.920

jsFiddle Example

Use the .each() jQuery function to loop through each element selected. Convert the text values to dates using the JavaScript .split() function. Also see the documentation on JavaScript dates.

HTML:

<ul id="whatson">
    <li><span class="chkdate">06/03</span> somestuff1</li>
    <li><span class="chkdate">06/04</span> somestuff1</li>
    <li><span class="chkdate">06/05</span> somestuff2</li>
</ul>

JavaScript:

$(document).ready(function () {
    var todaysdate = new Date();

    var datestocheck = $('#whatson li').each(function (i, v) {
        var listitem = $(v); var chkdate = $('span', listitem);

        var stringdate = chkdate.text();
        var monthtocheck = stringdate.split('/')[0];
        var daytocheck = stringdate.split('/')[1];

        var datetocheck = new Date(); 
        datetocheck.setFullYear(
            todaysdate.getFullYear(), // four digit year
            monthtocheck-1, // month number minus 1 b/c month is 0-11
            daytocheck // the day number
        );

        //alert(datetocheck + ' < ' + todaysdate);

        if (datetocheck < todaysdate) { 
            listitem.hide();
        } else { 
            listitem.show(); 
        }
    });
})

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

As mentioned in the comments, its always better to compare variables of type Date (so that you neednt take care of the extensive comparison upto december, which can be cumbersome). So, the method I've used is to convert your text into a Date type object and comparing it with the current date:

  var d = new Date();
  d.setHours(0, 0, 0, 0);
  var year = d.getFullYear();
  $(".chkdate").each(function (i) {
      //added a setHours function to make time parameters of Date zero before comparing
     ((new Date($(this).text() + "/" + year)).setHours(0, 0, 0, 0) < d) ? $(this).closest("li").hide() : $(this).closest("li").show();
  });

Assumptions made :

Year will always be current year for the elements in the HTML
The format of mm/dd will always be maintained

See the fiddle : http://jsfiddle.net/UAR8y/8/

EDIT:

Had to add some more lines because for the current date it was comparing time as well so that didnt match. Removed time parameters from the argument by using .setHours(0, 0, 0, 0);
Changed > to <

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 04 '13 at 18:19

krishwader

11,341
1
34
51

1

this seems to be the slickest solution, had to change > to < to hide 'old dates' (no problem) but why won't it display items dated today? – Neil Jun 04 '13 at 21:59
edited answer & fiddle.. Because of this code became slightly bigger :( – krishwader Jun 04 '13 at 22:15
Thats done the trick, very much appreciated. Going to play with this now until I break it! Thank you for taking the time to help. – Neil Jun 04 '13 at 22:42
please upvote whatever answers have helped you so tht it'll help others when they have the same problems :) – krishwader Jun 04 '13 at 22:44
nice optimising, its just become skinny again. – Neil Jun 05 '13 at 15:15

score 0 · Answer 5 · answered Jun 04 '13 at 18:00

Please have a look at http://jsfiddle.net/2dJAN/57/

$(document).ready(function() {
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var todaysdate = (month<10 ? '0' : '') + month + '/' + (day<10 ? '0' : '') + day;
    $('#whatson li').each(function(){
        var datetocheck = $(this).text();
        if (datetocheck < todaysdate) {
            $(this).hide();
            }         
    });
})

May i know is this your requirement or not.

This also seems just to hide the date, not (the parent) li, i.e. the whole text. — Neil, Jun 05 '13 at 15:03

Comparing todays date with a list of dates

5 Answers5