如何比较 Vuejs 中的日期？
[英]How to compare dates in Vuejs?
问题描述
Hi I'm trying to make a library/book tracking app which tracks the date and returns the status like its returned or lost etc. I need to compare dates in my app but i can't find how to in vuejs could you please help thanks.
嗨，我正在尝试制作一个图书馆/书籍跟踪应用程序，它可以跟踪日期并返回状态，如返回或丢失等。我需要在我的应用程序中比较日期，但我在 vuejs 中找不到如何使用，请你帮忙谢谢。
<html>
<head>
<meta charset=utf-8>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="newVue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" required placeholder="Enter Name">
<input type="date" v-model="enterdate" placeholder="Enter Date">
<table border="1" v-for="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
</tr>
</table>
<button @click="addRow">Add</button>
</div>
</body>
window.addEventListener('load',()=>{
window.vue = new Vue({
el: '#app',
data: {
message:'',
enterdate:'',
items:[{
name:'',
}]
},
methods: {
addRow() {
this.items.push({
name: this.message,
date: this.enterdate,
})
},
}
})
}) })
2 个解决方案
解决方案1
0 2018-08-10 22:23:31
Looks like you have dates represented as strings.看起来您将日期表示为字符串。 Then to compare it you need to parse it first.然后要比较它，您需要先解析它。 I would recommend you to take some existing library for this.我建议您为此使用一些现有的库。 http://momentjs.com/ is a good example. http://momentjs.com/就是一个很好的例子。
Then you would do something like:然后你会做这样的事情：
dateA = moment(itemA.date, "MM-DD-YYYY"); // replace format by your one
dateB = moment(itemB.date, "MM-DD-YYYY");
if (dateA.diff(dateB) > 0) {
// do something if A is later than B
} else {
// do something if B is later that A
}
解决方案2
0 2022-03-17 14:22:42
You can simply wrap your date string into new Date() and compare as follows new Date(this.enterdate) < new Date() Check the snippet as well.您可以简单地将您的日期字符串包装成new Date()并进行如下比较new Date(this.enterdate) < new Date()检查代码段。
new Vue({ el: '#app', data: { message: '', enterdate: '', items: [{ name: '', }] }, methods: { addRow() { if (new Date(this.enterdate) < new Date()) { alert("Today or Past date"); } else { alert("Future date"); } this.items.push({ name: this.message, date: this.enterdate, }) }, } })
<html> <head> <meta charset=utf-8> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="newVue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" required placeholder="Enter Name"> <input type="date" v-model="enterdate" placeholder="Enter Date"> <table border="1" v-for="item in items"> <tr> <td>{{item.name}}</td> <td>{{item.date}}</td> </tr> </table> <button @click="addRow">Add</button> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.