vuejs global filters two params-CodePudding

I want to find the number of days between two dates with vue js, but I could not do it somehow.

for example, the start will always be "today", and the end date will be the date from the database. accordingly, I want to show the user how many days are left. if today's date has not passed the end date "10 days after"... if "today's date" has passed the end date "10 days late". or if the dates are equal, I want "TODAY" to be written.

component

<p>{{'05/10/2021', '30/11/2021' | remainingday }}</p>

app.js

Vue.filter('remainingday ', function (start,end) {
    return
});

CodePudding user response：

I opine this code work

Vue.filter('remainingday', function (value,start,end) {
   return value.match(start)
})



<p>{{ '' | remainingday('05/10/202','30/11/2021') }}</p>

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#demo',
  data(){
    return {
      start: new Date()
    }
  },
  filters: {
    remainingday (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'
      } else if(start.getTime() < end.getTime()) {
        return '10 days after'
      } else return '10 days late'
    }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{'05/10/2021', '30/11/2021' | remainingday }}</p>
</div>