Блог

Я пытаюсь выделить <td> на основе диапазона дат этого поля, начиная с сегодняшней даты.

Я пытался использовать текущее <td> значение даты меньше Date.now() — # (количество дней), чтобы определить, следует ли выделять <td> (зеленый, желтый или красный), но не добился никакого успеха в том, как я это делаю.

 <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>
  

Хотелось бы думать, что я близок к решению, но, возможно, я делаю это неподходящим образом. Буду признателен за любую помощь.

ОБНОВЛЕНИЕ 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>
  

Попробовал это просто для проверки и посмотреть, распознает ли что-нибудь условия, и, похоже, это не так. Всегда выполняется последнее условие (красное). Возможно, это не так, как props.item.date отформатировано mm/dd/yyyy . Я также понял, что мои условия в исходном примере будут конфликтовать, поскольку у меня есть как менее 2 дней, так и 7 дней, но нет условия для также более 2 дней при условии 7 дней

Метод Date.now() возвращает количество миллисекунд

Итак, если вы хотите когда-нибудь сократить. вы должны преобразовать дни в миллисекунды, а затем в минус. 1 day = 1000 * 60 * 60 * 24 * 1 миллисекунды

Метод Date.parse() анализирует строковое представление даты и возвращает количество миллисекунд

Преобразовать props.item.date в миллисекунды с помощью Date.parse

например, измените код, как показано ниже

 <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>