如何比较 Vuejs 中的日期？答案

【问题标题】：How to compare dates in Vuejs?如何比较 Vuejs 中的日期？
【发布时间】：2018-08-10 22:18:54
【问题描述】：

您好，我正在尝试制作一个图书馆/图书跟踪应用程序，该应用程序可以跟踪日期并返回状态，如返回或丢失等。我需要在我的应用程序中比较日期，但我无法在 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,


           })
        },
    }
})

})

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

看起来您将日期表示为字符串。然后要比较它，您需要先解析它。我建议您为此使用一些现有的库。 http://momentjs.com/ 就是一个很好的例子。

然后你会做这样的事情：

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
}

【讨论】：

时刻很大，请不要使用它！总共比 vue + vuex + vue-router 占用更多空间。仅使用它来比较日期对于您的应用程序来说是巨大的开销。尝试改用date-fns.org 或github.com/iamkun/dayjs
dayjs 是不错的选择和moment js一样的api dayjs(dateInStr, format) < dayjs(otherDateInStr, format)
正如我所说的时刻只是一个例子。作为起点，完全没问题。根据您的需要，您可以将其替换为任何内容。

【解决方案2】：

您可以简单地将您的日期字符串包装到new Date() 并按如下方式比较new Date(this.enterdate) < new Date() 也检查sn-p。

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>

【讨论】：