element-ui时间组件同一个月内选择/30天内选择

element-ui时间组件同一个月内选择/30天内选择

同一个月

vue 复制代码
<el-date-picker v-model="time" type="datetimerange"
                                    range-separator="至" start-placeholder="开始时间"
                                    value-format="timestamp" :picker-options="pickerOptions"
                        end-placeholder="结束时间" @change="bizPayLog(1)">
                    </el-date-picker>


//写在data return
selectData:'',
          //日期选择范围在一个月内
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              this.selectData = minDate.getTime()
              if (maxDate) {
                // 选择了最大日期后,清除已选日期,解除限制。
                this.selectData = ''
              }
            },
            disabledDate: (time) => {
              // 是否禁用日期选择
              if (this.selectData) {
                let date = new Date(this.selectData)
                // true:不可以选择该日期;false:可以选择该日期。
                // 大于或者小于本月的日期被禁用
                return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
              } else {
                return false;
              }
            }
          },
  

30天以内

vue 复制代码
 pickerMinDate:'',
          //日期选择范围在一个月内
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              console.log(this.pickerMinDate,'this.pickerMinDate')
              this.pickerMinDate = minDate.getTime();
              if (maxDate) {
                this.pickerMinDate = '';
              }
            },
            disabledDate: time => {
              console.log(this.pickerMinDate,'this.pickerMinDate1')
              if (this.pickerMinDate !== "") {
                const day30 = (31 - 1) * 24 * 3600 * 1000;
                // 只选后30天,minTime不用加day30,只选前30天,maxTime不用加day30
                let maxTime = this.pickerMinDate + day30;
                let minTime = this.pickerMinDate - day30;
                if (maxTime > new Date()) {
                  maxTime = new Date();
                }
                return time.getTime() > maxTime || time.getTime() < minTime;
              }
              return time.getTime() > Date.now();
            }
            },
相关推荐
小彭努力中17 分钟前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟41 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun42 分钟前
Promise 基础使用
前端·javascript·promise
Codebee42 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾1 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
xiguolangzi1 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X1 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112342 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志2 小时前
TypeScript结构化类型初探
javascript
翻滚吧键盘3 小时前
js代码09
开发语言·javascript·ecmascript