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

最新推荐文章于 2024-07-05 12:33:04 发布

今晚来我家吗

最新推荐文章于 2024-07-05 12:33:04 发布

阅读量309

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43059898/article/details/133761961

版权

<!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>