iview的日期组件如何在设置开始和结束时间的时候将置灰的日期精确到时分

1,首先我们来理一下思路:
开始日期 < 结束日期
结束日期 > 开始日期
二者不能相等
2,接下来我们分析以下情况;
1)我们改变开始日期:
如果开始日期为23:59,那么结束时间跟开始时间一定不能为同一天;
如果开始日期不是23:59,那么结束时间跟开始时间可以为同一天;
2)我们改变结束日期;
如果开始日期跟结束日期在同一天,那么我们需要设置开始日期需要置灰的小时和分钟;
如果开始日期跟结束日期不在同一天,那么只需要开始日期< 结束日期就可以了;
这里需要引入一个概念,ivew的官方文档没有关于这个属性的描写,但其实这个属性是存在的;
endTimeOptions: {
disabledHours: [],
disabledMinutes: [],
}
disabledHours ---- 用来是设置需要置灰的小时数,数据类型是数组;
disabledMinutes ---- 用来设置需要置灰的分钟数,数据类型是数组;
3,现在我们上代码,这是在vue.js的代码,其它框架可以参考原理;
html部分

 <DatePicker
                type="datetime"
                v-model="discount_starting_at"
                format="yyyy-MM-dd HH:mm"
                placeholder="请选择开始日期"
                @on-change="changeS
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 iView 的 `DatePicker` 和 `TimePicker` 组件配合使用来实现日期时间选择器,并且可以通过设置 `disabledDate` 函数来限制开始时间结束时间。 以下是一个示例代码: ```html <template> <div> <DatePicker v-model="startDate" :disabledDate="disabledStartDate" placeholder="开始时间" /> <TimePicker v-model="startTime" :disabledHours="disabledStartHours" :disabledMinutes="disabledStartMinutes" :disabledSeconds="disabledStartSeconds" placeholder="开始时间" /> <DatePicker v-model="endDate" :disabledDate="disabledEndDate" placeholder="结束时间" /> <TimePicker v-model="endTime" :disabledHours="disabledEndHours" :disabledMinutes="disabledEndMinutes" :disabledSeconds="disabledEndSeconds" placeholder="结束时间" /> </div> </template> <script> export default { data() { return { startDate: null, startTime: null, endDate: null, endTime: null, }; }, methods: { disabledStartDate(date) { if (!this.endDate) { return false; } return date && date.valueOf() > this.endDate.valueOf(); }, disabledEndDate(date) { if (!this.startDate) { return false; } return date && date.valueOf() < this.startDate.valueOf(); }, disabledStartHours() { if (!this.startTime) { return []; } return Array.from({ length: 24 }, (_, i) => i).slice(0, this.endTime.getHours()); }, disabledStartMinutes(h) { if (!this.startTime || h < this.endTime.getHours()) { return []; } return Array.from({ length: 60 }, (_, i) => i).slice(0, this.endTime.getMinutes()); }, disabledStartSeconds(h, m) { if (!this.startTime || h < this.endTime.getHours() || m < this.endTime.getMinutes()) { return []; } return Array.from({ length: 60 }, (_, i) => i).slice(0, this.endTime.getSeconds()); }, disabledEndHours() { if (!this.endTime) { return []; } return Array.from({ length: 24 }, (_, i) => i).slice(this.startTime.getHours() + 1); }, disabledEndMinutes(h) { if (!this.endTime || h > this.startTime.getHours() + 1) { return []; } return Array.from({ length: 60 }, (_, i) => i).slice(this.startTime.getMinutes() + 1); }, disabledEndSeconds(h, m) { if (!this.endTime || h > this.startTime.getHours() + 1 || m > this.startTime.getMinutes() + 1) { return []; } return Array.from({ length: 60 }, (_, i) => i).slice(this.startTime.getSeconds() + 1); }, }, }; </script> ``` 在上面的示例代码中,我们使用了四个数据属性 `startDate`、`startTime`、`endDate` 和 `endTime` 来分别存储用户选择的开始日期时间结束日期时间。 在 `DatePicker` 和 `TimePicker` 组件上,我们使用 `v-model` 指令将其与数据属性绑定,以实现双向绑定。 在 `DatePicker` 组件上,我们通过设置 `disabledDate` 函数来禁用开始时间晚于结束时间日期。 在 `TimePicker` 组件上,我们通过设置 `disabledHours`、`disabledMinutes` 和 `disabledSeconds` 函数来禁用开始时间晚于结束时间、分、秒。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值