两个日期比较大小

sunshine22 girl

已于 2024-01-03 14:27:51 修改

阅读量672

点赞数 1

分类专栏： Vue Element-ui 文章标签： vue.js elementui javascript

于 2023-05-10 14:25:18 首次发布

本文链接：https://blog.youkuaiyun.com/annier_11/article/details/130599790

版权

Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

Element-ui

2 篇文章

订阅专栏

在日常开发中，通过将日期转化为时间戳来比较起止日期的大小。文中以Element-UI的日期选择组件为例，展示了如何在Vue.js应用中实现这一功能。当StartDate和EndDate改变时，JS代码会检查EndDate是否大于StartDate，如果不满足条件则给出警告，并清空不正确的日期输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常开发中，会经常用到起止日期比较大小，这里会将时间都转化为时间戳，方便进行比较，

以element-ui的日期选择组件为例

如图：在form表单中

html代码如下：

<el-form-item label="Start Date" prop="StartDate">
   <el-date-picker
     v-model="StartDate"
     format="yyyy/MM/dd"
     value-format="yyyy/MM/dd"
     @change="changeDate('start')"
      >
    </el-date-picker>
</el-form-item>
<el-form-item label="End Date" prop="EndDate">
   <el-date-picker
     v-model="EndDate"
     format="yyyy/MM/dd"
     value-format="yyyy/MM/dd"
     @change="changeDate('end')"
      >
   </el-date-picker>
</el-form-item>

js代码如下

    changeDate(type) {
      if (this.StartDate && this.StartDate!== "" && this.EndDate && this.EndDate!== "") {
        if (new Date(this.StartDate).getTime() > new Date(this.EndDate).getTime()) {
          this.$message({
            type: 'warning',
            message: "End Date 必须大于 start Date",
            duration: 4000
          });
          if (type === 'start') {
            this.StartDate = "";
          } else {
            this.EndDate = "";
          }
        }
      }
    },