element日期选择只能在30天范围内

最新推荐文章于 2023-05-26 17:32:36 发布

技术项目经理

最新推荐文章于 2023-05-26 17:32:36 发布

阅读量653

点赞数

分类专栏： element

本文链接：https://blog.csdn.net/weixin_43837268/article/details/109066344

版权

element 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这篇博客展示了如何使用Element-UI的日期范围选择器组件，通过设置`pickerOptions`和`disabledDate`属性，限制用户只能选择不超过30天的日期范围。代码示例中，当用户选择一个日期后，最大可选日期将被限制为该日期后的30天，确保了日期范围的约束。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element-ui 关于日期范围选择控件，如何限制只能选择30天</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div>
    <div id="app">
        <el-date-picker
                v-model="dateRange"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        pickerMinDate: '',
        dateRange: [],
        pickerOptions: {
          onPick: ({ maxDate, minDate }) => {
            this.pickerMinDate = minDate.getTime()
            if (maxDate) {
              this.pickerMinDate = ''
            }
          },
          disabledDate: (time) => {
            if (this.pickerMinDate !== '') {
              const day30 = (30 - 1) * 24 * 3600 * 1000
              let maxTime = this.pickerMinDate + day30
              if (maxTime > new Date()) {
                maxTime = new Date()
              }
              return time.getTime() > maxTime
            }
            return time.getTime() > Date.now()
          }
        }
      }
    }
  })
</script>
</html>