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 there is both a less than 2 days and 7 days, but no condition for also greater than 2 days under 7 days condition
Solution :
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>