Styjun

I'm trying to highlight a <td> based on that field's date range from today's date.

I've been trying to use current <td> date value less than Date.now() - #(number of days) to determine whether to highlight the <td> (green, yellow, or red) but not having any success with how I'm doing so.

<td v-if="props.item.date < Date.now() - 2">
 <v-icon small style="color:green;">fiber_manual_record</v-icon> props.item.date 
</td>
<td v-else-if="props.item.date < Date.now() - 7">
 <v-icon small style="color:yellow;">fiber_manual_record</v-icon> props.item.date 
</td> 
<td v-else>
 <v-icon small style="color:red;">fiber_manual_record</v-icon> props.item.date 
</td>

I'd like to think I'm close to the solution but I may not be doing it the appropriate way. Any help would be greatly appreciated.

UPDATE 2

<td v-if="Date.parse(props.item.date) > Date.now()">
 <v-icon small class="greenDate">fiber_manual_record</v-icon> props.item.date_sent 
</td>
<td v-else-if="Date.parse(props.item.date) < Date.now()">
 <v-icon small class="yellowDate">fiber_manual_record</v-icon> props.item.date_sent 
</td> 
<td v-else">
 <v-icon small class="redDate">fiber_manual_record</v-icon> props.item.date_sent 
</td>

Tried this just to test and see if anything is even recognized the conditions and it doesnt seem like it. Always hits the last condition (red). Maybe its not like props.item.date formatted mm/dd/yyyy. I also realized my conditions in the original example would conflict since I have both a less than 2 days and 7 days, but no condition for also greater than 2 days under 7 days condition

The Date.now() method returns the number of milliseconds

So if you want to reduce somedays. you have to covert days to milliseconds and then minus. 1 day = 1000 * 60 * 60 * 24 * 1 milliseconds

The Date.parse() method parses a string representation of a date, and returns the number of milliseconds

Convert props.item.date to milliseconds using Date.parse

for example change code like below

<td v-if="Date.parse(props.item.date) < Date.now() - (2 * 1000 * 60 * 60 * 24)">
 <v-icon small style="color:green;">fiber_manual_record</v-icon> props.item.date 
</td>
<td v-else-if="Date.parse(props.item.date) < Date.now() - (7 * 1000 * 60 * 60 * 24)">
 <v-icon small style="color:yellow;">fiber_manual_record</v-icon> props.item.date 
</td> 
<td v-else>
 <v-icon small style="color:red;">fiber_manual_record</v-icon> props.item.date 
</td>