javascript - jQuery: Hide divs with date oject -
i'd create simple html schedule javascript/jquery. there 1 div per event day, moth , year data-attribute. script should compare these data-attributes current date , hide/show container when day past (hope understand:d). unfortunately deosn'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 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; }
thanks in advance
in order compare 2 dates don't need compare day day plus month month , year year.
you can compare 2 date objects.
remember months range in 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>
Comments
Post a Comment