image.png

代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue2开发:element-ui日期组件不可以选择未来时间</title>
  <!--引入 element-ui 的样式,-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      padding: 50px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-date-picker v-model="billProcessDate" type="date" placeholder="请选择购买日期" size="large" value-format="yyyy-MM-dd"
      :picker-options="pickerOptions">
    </el-date-picker>


  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          billProcessDate: null,
          // 不可选择未来时间
          pickerOptions: {
            disabledDate(date) {
              return date.getTime() > Date.now(); // 禁用大于今天的日期
            },
          },
        }
      },
      created() {

      },
      methods: {

      }
    })
  </script>
</body>

</html>

我的一个道姑朋友
80 声望4 粉丝

星光不问赶路人,岁月不负有心人。