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...today's date has passed the end date10 days late.TODAY to be written.component
<p>{{'05/10/2021', '30/11/2021' | remainingday }}</p>
app.js
Vue.filter('remainingday ', function (start,end) {
return
});
Try like following snippet:
new Vue({
el: '#demo',
data(){
return {
start: new Date(),
end: new Date()
}
},
filters: {
remainingday (start, endDate) {
const end = new Date(endDate)
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`
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<label>Chose end date</label>
<input type="date" v-model="end" />
<p>{{start, end | remainingday }}</p>
</div>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>