jQuery: Hide divs with date object

Question

I'd like to create a very simple html schedule with JavaScript/jQuery. So there is one div per event with a day, moth and year data-attribute. The script should compare these data-attributes to the current date and hide/show the container when the day is past (hope you understand:D). Unfortunately doesn't work :(

My current code: https://jsfiddle.net/ypkzhocy/1/

    <div class="event" data-day="28" data-month="7" data-year="2017">
        <h2>Birthday</h2>
        <span class="date">28.07.2017</span>
        <p>Description</p>
    </div>
    <div class="event" data-day="5" data-month="8" data-year="2017">
        <h2>Summerparty</h2>
        <span class="date">05.08.2017</span>
        <p>Description</p>
    </div>
    <div class="event" data-day="20" data-month="9" data-year="2017">
        <h2>meeting</h2>
        <span class="date">20.08.2017</span>
        <p>Description</p>
    </div>

The Javascript

 $(document).ready(function() {
  dateMethod();
});

function dateMethod() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1;
  var yyyy = today.getFullYear(); 
    var day = $(this).data("day");
  var month = $(this).data("month");
  var year = $(this).data("year");

  if (yyyy < year && mm =< month && dd > day){ 
    $(".event").show(); 
  } else{ 
    $(".event").hide();
  }
}

and some css

            @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');

        * {
            font-family: Montserrat;
            margin: 0;
            padding: 0;
        }

        .event h2 {
            text-transform: uppercase;
            display: inline;
            color: #fff;
        }

        .event {
            max-width: 40em;
            background-color: #009688;
            padding: .5em;
            margin: 1em 0 2em 1em;
        }

Answer 1

In order to compare two dates you don't need to compare day by day plus month by month and so year by year.

You can simply compare the two date objects.

Remember only the months range in the interval 0 -- 11.

The snippet (updated fiddle):

$(document).ready(function() {
    dateMethod();
});

function dateMethod() {
    var today = new Date();

    $('.event').each(function(idx, ele) {
        var day = $(ele).data("day");
        var month = $(ele).data("month");
        var year = $(ele).data("year");

        var divDate = new Date(year, month - 1, day);

        $(ele).toggle(divDate >= today);
    })
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');

* {
    font-family: Montserrat;
    margin: 0;
    padding: 0;
}

.event h2 {
    text-transform: uppercase;
    display: inline;
    color: #fff;
}

.event {
    max-width: 40em;
    background-color: #009688;
    padding: .5em;
    margin: 1em 0 2em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="event" data-day="28" data-month="7" data-year="2017">
    <h2>Birthday</h2>
    <span class="date">28.07.2017</span>
    <p>Description</p>
</div>
<div class="event" data-day="5" data-month="8" data-year="2017">
    <h2>Summerparty</h2>
    <span class="date">05.08.2017</span>
    <p>Description</p>
</div>
<div class="event" data-day="20" data-month="9" data-year="2017">
    <h2>meeting</h2>
    <span class="date">20.08.2017</span>
    <p>Description</p>
</div>