el-time-picker在选择开始时间后在结束时间选择器禁用开始时间之前的时间

通过selectableRange限制可选时间范围
用模板字符串将开始时间拼接到时间选择范围这里
因为进行了时间格式化,将秒数拼接在后面

        <el-time-picker
          v-model="addForm.startTime"
          :picker-options="{
                selectableRange: '00:00:00- 23:59:59'
               }"
           format="HH:mm"
           value-format="HH:mm"
           placeholder="开始时间"
         ></el-time-picker>
         
         <el-time-picker
           v-model="addForm.startLateTime"
           :picker-options="{
                 selectableRange: `${this.addForm.startTime+':00'}-23:59:59`
                }"
           format="HH:mm"
           value-format="HH:mm"
           placeholder="结束时间"
           style="width:300px"
         ></el-time-picker>
               
您好!对于在 Element UI 中使用 el-date-picker 组件设置开始时间结束时间不能跨年的功能,您可以通过以下方式实现: 1. 使用`picker-options`属性:el-date-picker 组件提供了一个 `picker-options` 属性,您可以通过设置该属性来限制选择的日期范围。您可以在该属性中使用 `disabledDate` 方法来禁用特定的日期。 ```html <el-date-picker v-model="startDate" :picker-options="pickerOptions" ></el-date-picker> <el-date-picker v-model="endDate" :picker-options="pickerOptions" ></el-date-picker> ``` ```javascript data() { return { startDate: '', endDate: '', pickerOptions: { disabledDate(time) { // 获取当前时间的年份 const currentYear = new Date().getFullYear(); // 获取选择的日期的年份 const selectedYear = time.getFullYear(); // 如果选择的日期的年份与当前时间的年份不同,则禁用该日期 return currentYear !== selectedYear; } } } } ``` 2. 使用`value-format`属性:将 el-date-picker 组件的 `value-format` 属性设置为 "yyyy-MM-dd",这将强制日期选择器只接受年份、月份和日期的格式化字符串。这样,用户将无法选择跨年的日期。 ```html <el-date-picker v-model="startDate" value-format="yyyy-MM-dd" ></el-date-picker> <el-date-picker v-model="endDate" value-format="yyyy-MM-dd" ></el-date-picker> ``` 请根据您的需求选择合适的方法来实现开始时间结束时间不能跨年的限制。希望能帮到您!如果您有任何其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值