红叶都枫了 @163

vue+element设置选择日期最大范围（普通版）

效果是只能跟当天时间有关（30天），下一篇将来的任意时段，比较符合实际

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-date-picker
      v-model="value"
      type="daterange"
       unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    el: '#app',
    data: function() {
      return { 
        value:'',
        pickerOptions: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();  // 当前日期
            let one = 31 * 24 * 3600 * 1000;  //一个月时间
            let oneMonth = curDate - one;  //时间差
            return (time.getTime() > (Date.now()- 8.64e7)) || time.getTime() < oneMonth;  //如果当天可选 就不用减8.64e7
          }
 },
      }
    },
    methods:{
       
    }
})
</script>
</html>

 

posted @ 2020-08-12 14:35  红叶都枫了163  阅读(607)  评论(0)  编辑  收藏  举报