Change CSS class based on date with js

Question

I have a table of dates that I am trying to highlight the current line based on the date. and change the class of the previously active row to past.

As you can see the first row the class has been set to past, the second row is active and all future rows are future.

I found a js snippet that seems like it will work but I am having no luck getting it to work

I am not well versed in JS so if anyone can offer assistance to get this working I sure would appreciate it. TIA Steve

Here are the next few table rows.

  <TR class="past">
      <TD>1909</TD>
      <TD>Aug - 06</TD>
      <TD>Aug - 15</TD></TR>
    <TR class="active">
      <TD>1910</TD>
      <TD>Sep - 03</TD>
      <TD>Sep - 12</TD></TR>
    <TR class="future">
      <TD>1911</TD>
      <TD>Oct - 01</TD>
      <TD>Oct - 10</TD></TR>
    <TR class="future">
      <TD>1912</TD>
      <TD>Oct - 29</TD>
      <TD>Nov - 07</TD></TR>
    <TR class="future">
      <TD>1913</TD>
      <TD>Nov - 26</TD>
      <TD>Dec - 05</TD>

and this is the JS that I am trying to get working.

<script type="text/javascript">
$(document).ready(function () {
$( ".class" ).each(function() {

        var text=$(this).text();

        var res = text.split(" "); 
        var resta = res[1].split("/"); 
        var dd=resta[0];
        var mm=resta[1];
        var yy=resta[2];

var now_date = new Date(); //"now"
var duedate = new Date(mm+'/'+dd+'/'+yy);    
var diff = Math.abs(now_date-duedate); 
var each_day = 1000 * 60 * 60 * 24;//milliseconds in a day
var days = Math.round(diff / each_day);

if(days <= 0)
$(this).removeClass("future").addClass("active");
if(days <= -1)
$(this).removeClass("active").addClass("past");
         });
</script> -->

How are you getting the dates there to begin with? Are you hard-coding them into the HTML? — Chris B.
– Chris B., Commented Sep 14, 2019 at 18:46

Ken Sawyerr · Accepted Answer · 2019-09-15 17:00:38Z

1

$(document).ready(function() {
  $("TR").each(function() {
var elements = $(this).children();

//get the year
var year = elements[0].innerHTML;

//get the month and date of upper limit... the important month and date
var upperLimitMonth = elements[2].innerHTML.split(" ")[0];
var upperLimitDate = elements[2].innerHTML.split(" ")[2];


//create a string from the different parts
var upperDate = `${year}-${upperLimitMonth}-${upperLimitDate}`;

//convert the strings to date and then to seconds
upperDate = new Date(upperDate).getTime();

//get today's date and convert to seconds
var today = new Date().setHours(0, 0, 0, 0);


//compare dates
if (upperDate < today) {
  $(this).addClass("past");
} else if (upperDate == today) {
  $(this).addClass("present");
} else {
  $(this).addClass("future");
}

  });


});

.past{
	color: red;
}

.present{
	color: green;
}

.future{
	color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <TR>
    <TD>1909</TD>
    <TD>Aug - 06</TD>
    <TD>Aug - 15</TD>
  </TR>
  <TR>
    <TD>1910</TD>
    <TD>Sep - 03</TD>
    <TD>Sep - 12</TD>
  </TR>
  <TR>
    <TD>1911</TD>
    <TD>Oct - 01</TD>
    <TD>Oct - 10</TD>
  </TR>
  <TR>
    <TD>1912</TD>
    <TD>Oct - 29</TD>
    <TD>Nov - 07</TD>
  </TR>
  <TR>
    <TD>2019</TD>
    <TD>Nov - 26</TD>
    <TD>Sep - 15</TD>
  </TR>
    <TR>
    <TD>2020</TD>
    <TD>Nov - 26</TD>
    <TD>Sep - 15</TD>
  </TR>
</table>

Please let me know if you need further explanations. I have tried to add explanations to different lines as I wrote but I don't know if that's enough for you to understand. So ask questions where necessary.

The first snippet is the javascript, followed by the css and then the html

https://jsfiddle.net/sawyerrken/peg86o42/21/

edited Sep 15, 2019 at 17:00

answered Sep 14, 2019 at 19:35

Ken Sawyerr

2361 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Steve C. Over a year ago

Thanks for the explanation, but I get an error when I run the snippet here but no real info to point it out.

Steve C. Over a year ago

it is saying invalid character on line 45 char 19 line 44 and 45 in the file are: //create a string from the different parts var lowerDate = ${year}-${lowerLimitMonth}-${lowerLimitDate}; var upperDate = ${year}-${upperLimitMonth}-${upperLimitDate};

Ken Sawyerr Over a year ago

Did you add the backticks? See those backticks that look like single quotation. Its a backtick, on my keyboard its before key 1 on the top row.

Steve C. Over a year ago

yes the back ticks are there they just didn't paste above. I tried it in my local host as well and still have the error. In my file all the TR classes are set to "future" in the table. So if I load the page the 1910 line should be green 1909 red and 1911 on blue but they all show blue.

Ken Sawyerr Over a year ago

Notice in my own html I removed the class attribute for all the TRs, because it isn't needed for the solution and it should be set dynamically based on the outcome of the data comparisons. Make that change in your html too and lets know the outcome.

|

Collectives™ on Stack Overflow

Change CSS class based on date with js

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related