Alter CSS dynamically using JQuery (or simple Javascript) based on date comparison
Question
I am hand-coding a small calendar of events. All that I wish to display is some basic event information (date, time, location, link to learn more). Since this page will rarely have more than 10-20 events listed at any given time (and only even once or twice per year), I'm not over-engineering it by using a calendar plugin or anything.
All I wish to do is to compare the current date against the HTML5 <time date=""></time> attribute and alter CSS on a parent element if the date specified is in the past (by at least one day).
By default the background color of the <li> element with class .event is white ( #fff ). If the date is in the past, I want the background color on the <li class='event'> class to change to grey ( #ddd ) when the page loads.
<doctype html> <html> <head> <title>Events</title> <style> .event { background-color: #fff; } </style> <script> </script> </head> <body> <ul class="row block-grid events"> <li class="small-12 medium-6 large-4 column event"> <dl> <dt><time date="2016-02-02">Feb 2</time></dt> <dd>Boston Public Library at 7:00pm</dd> <dd>Book launch</dd> <dd>Boston, MA</dd> <dd><a href="http://www.bpl.org">More details</a></dd> </dl> </li> </ul> </body> </html>
3 answers
solution1
0 2016-09-07 19:35:01
You can use Javascript to get the current date
var today = new Date();
var day = today.getDate();
var month = today.getMonth()+1; //Jan = 0
var year = today.getFullYear();
Get the time="" attribute something like so, I added the class dateColor to the container you will be changing:
var calDate = document.getElementByClass('dateColor').getAttribute("time");
Then do a conditional check via JS
After that you can use toggleClass() via JQuery to toggle a class with CSS background-color: whateverColor on for particular elements if it returns true .
solution2
0 ACCPTED 2016-09-07 19:48:36
Here is a jQuery solution. You could use "addClass()" or a similar method for more flexibility.
https://jsfiddle.net/4nb0w2yu/1/
$('time').each(function() {
var submitted_date = new Date($(this).attr('date'));
var now = new Date();
console.log(submitted_date.getTime() < now.getTime());
if (submitted_date.getTime() < now.getTime()) {
$(this).parent().parent().css('background', 'gray')
}
});
solution3
0 2016-09-07 21:31:33
I've come up with a jQuery example that should do the trick. I tried to write it as concisely as possible... https://jsfiddle.net/9ekd25L8/3/
$("li.event").each(function(){
var dt = new Date();
var month = dt.getMonth() + 1;
if ($(month).length <= 1) {
var month = "0" + month;
}
var day = dt.getDate();
if ($(day).length <= 1) {
var day = "0" + day;
}
var time = dt.getFullYear() + "-" + month + "-" + day;
var time2 = $(this).find("time").attr("date");
var monthsplit = time.slice(5,7);
var yearsplit = time.slice(0,4);
var daysplit = time.slice(8,10);
var checkday = time2.slice(8,10);
var checkmonth = time2.slice(5,7);
var checkyear = time2.slice(0,4);
var resultyear = yearsplit - checkyear;
var resultmonth = monthsplit - checkmonth;
var resultday = daysplit - checkday;
if (resultyear == 0 && resultmonth <= 0 && resultday <= 0) {
$(this).addClass("new");
}
else if (resultyear > 0) {
$(this).addClass("old");
}
else {
$(this).addClass("old");
}
if (resultyear == 0 && resultmonth == 0 && resultday == 0) {
$(this).addClass("today");
}
$("li").click(function() {
alert(resultyear + "," + resultmonth + "," + resultday);
});
});
This jQuery function just finds all li.event elements and then does some math and lets us know if the date within the <time> is older or newer than today's date.
The jQuery just pumps out the current date, formats it like the <time> date attribute, and then subtracts everything. Then, based on the results, adds an "old" "new" or "today" class to each element.
I hope that helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.