vue开始日期与结束日期分开选择，结束日期禁用开始选中日期

今晚来我家吗

于 2023-10-11 10:12:31 发布

阅读量421

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43059898/article/details/133761961

版权

本文介绍了如何在Vue项目中使用ElementUI库实现日期选择器，并展示了如何通过v-model双向数据绑定和自定义事件处理函数来控制日期范围。

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>

  <style></style>

  <body>
    <div id="app">
      <el-date-picker
        v-model="orderStart"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择开始日期"
        class="form-search-width"
        @change="changeStart"
      >
      </el-date-picker>
      开始日期: {{orderStart}}
      <el-date-picker
        v-model="orderEnd"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="afterwardsDate"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择开始日期"
        class="form-search-width"
      >
      </el-date-picker>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <script src="./vue/vue.js"></script>

  <!-- 引入组件库 -->
  <script src="./vue/index.js"></script>

  <script>
    new Vue({
      el: "#app",
      data: () => {
        return {
          orderStart: "",
          orderEnd: "",
          afterwardsDate: {
            disabledDate: null,
          },
        };
      },
      created() {
      },
      mounted() {},
      methods: {
        changeStart(e) {
          console.log(e);
          if (e) {
            this.afterwardsDate.disabledDate = (date) => {
              return date.getTime() < new Date(e).getTime() + 24 * 60 * 60 * 1000;
            };
          }
        },
      },
    });
  </script>
</html>