vuejs style binding between two dates

Question

I want to give text color after two date with vue js, but I couldn't find a solution. Example: I want to make the StartDate Today and the End Date 05.10.2021 red accordingly. but I want to do this condition with v-bind is it possible?

<tr v-for="(item, i) in attributes" :class="today ? 'greater' : 'today'">
<td>{{ today ,item.due_date | remainingday}}</td>
</tr>

export default {
  data() {
    return {
      type: 'sales_invoices',
      attributes: [],
      start: new Date().toLocaleDateString,
    }
  },
  async created() {
    const res = await this.callApi('get', this.type)
    if (res.status === 200) {
      this.attributes = res.data.data
    }
  },
  computed: {
    today(){
      const startY = new Date(this.start.split(".").reverse().join("."))
      const end = new Date('05.10.2021'.split(".").reverse().join("."))
      const difDays = Math.floor((startY.getTime() - end.getTime()) / (1000 * 3600 * 24))
      return difDays > 0
    },
  },

app.js

Vue.filter('remainingday', function (startDate, endDate) {
  const start = new Date(startDate.split(".").reverse().join("."))
  const end = new Date(endDate.split(".").reverse().join("."))
  if(start.toDateString() === end.toDateString()) {
    return 'TODAY'
  } 
  const difDays = Math.floor((start.getTime() - end.getTime()) / (1000 * 3600 * 24))
  return difDays > 0 
    ? `PAYMENT DELAYED FOR ${difDays} DAYS `
    : `${difDays * -1} DAYS LEFT`
});

Nikola Pavicevic · Accepted Answer · 2021-10-07 08:42:48Z

1

You can try with class binding and method:

new Vue({
  el: '#demo',
  data(){
    return {
      start: new Date(),
      attributes: [{due_date: '30.10.2021'}, {due_date: '07.10.2021'}, {due_date: '03.10.2021'}]
    }
  },
  methods: {
    remainingday (startDate, endDate) {
      const dates = startDate.toLocaleDateString() + ' ' + endDate
      const start = new Date(startDate)
      const end = new Date(endDate.split(".").reverse().join("-"))
      if(start.toDateString() === end.toDateString()) return {dat: `${dates} - TODAY`, cl: 'today'}
      const difDays = Math.ceil((start.getTime() - end.getTime()) / (1000 * 3600 * 24))
      return difDays > 0 
        ? {dat: `${dates} - PAYMENT DELAYED FOR ${difDays} DAYS`, cl: 'greater'}
        : {dat: `${dates} - ${difDays * -1} DAYS LEFT`, cl: ''}
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.today {
  color: blue; 
}
.greater {
  color: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
    <tr v-for="(item, i) in attributes" :key="i">
      <td :class="remainingday(start, item.due_date).cl">{{ remainingday(start, item.due_date).dat }}</td>
    </tr>
  </table>
</div>

edited Oct 7, 2021 at 8:42

answered Oct 6, 2021 at 19:44

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

11 Comments

lidersin Over a year ago

Thank you for your answer, but due to the global change of my filters, it's not possible for me to do that based on your answer. What I want is "today date and if it is greater than date in database, I just want to specify text color as style or class.

lidersin Over a year ago

my point is, if start and end are the same, class "blue", otherwise "IF TODAY'S DATE IS GREAT, THEN CLASS RED FROM THE SPECIFIED DATE"

Nikola Pavicevic Over a year ago

You could also use some helper library for formatting dates , for example Day,js

lidersin Over a year ago

I have a question. "start:new date" that's ok. but I get an error because my end date is from database and I have listed it with "async created() {".

lidersin Over a year ago

I edited the question. date from database "DAY.MONTH.YEAR" "06.10.2021"

|

Collectives™ on Stack Overflow

vuejs style binding between two dates

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related