element 禁选时间

:picker-options="pickerBeginDateBefore"
:picker-options="pickerBeginDateAfter"
pickerBeginDateBefore:{
      disabledDate: (time) => {
          let beginDateVal = this.buildForm.JHJGRQ;
          if (beginDateVal) {
              return time.getTime() > beginDateVal;
          }
      }
  },
  pickerBeginDateAfter:{
      disabledDate: (time) => {
          let beginDateVal = this.buildForm.KGRQ;
          if (beginDateVal) {
              return time.getTime() < beginDateVal;
          }
      }
  }
### Element UI 季节择控件实现方式 在 Vue 和 Element UI 中创建季节择器可以通过组合 `el-date-picker` 组件来完成。通过设置特定属性和事件处理逻辑,可以构建一个功能齐全的季节择器。 #### 构建基础结构 为了使组件易于重用并保持良好的维护性,建议将季节择器封装成独立的Vue组件。此组件应允许用户择起始季度和结束季度,并返回定的时间范围字符串[^1]。 ```html <template> <div class="season-selector"> <el-date-picker v-model="startSeason" type="quarter" placeholder="择开始季度" format="yyyy 第QQ季" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" @change="handleStartDateChange" /> 至 <el-date-picker v-model="endSeason" type="quarter" placeholder="择结束季度" format="yyyy 第QQ季" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" @change="handleEndDateChange" /> </div> </template> <script> export default { data() { return { startSeason: '', endSeason: '', pickerOptionsStart: {}, pickerOptionsEnd: {} }; }, methods: { handleStartDateChange(value) { this.$emit('input', `${this.formatDate(this.startSeason)}-${this.formatDate(this.endSeason)}`); }, handleEndDateChange(value) { this.$emit('input', `${this.formatDate(this.startSeason)}-${this.formatDate(this.endSeason)}`); }, formatDate(dateStr) { const date = new Date(dateStr); let month = (date.getMonth() + 1).toString(); if (+month < 10) month = '0' + month; return `${date.getFullYear()}${month}`; } } }; </script> ``` 上述代码展示了如何利用两个日期择器分别表示开始和结束季度的择。注意这里使用了自定义格式化函数`formatDate()`用于转换日期对象为指定格式的字符串[^3]。 #### 设置样式与交互优化 为了让用户体验更佳,在实际应用中还需要考虑一些细节上的调整: - **规则**:对于结束季度的择,应该限制其不能早于已中的开始季度;同样地,开始季度也不能晚于当前设定的结束季度。 - **默认值支持**:如果业务场景中有预设时间段的需求,则可以在初始化时传入相应的默认值给这两个字段。 这些特性都可以通过对`pickerOptions`属性进行配置以及监听输入变化事件来达成[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值