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

最新推荐文章于 2023-08-24 17:20:11 发布

马学君

最新推荐文章于 2023-08-24 17:20:11 发布

阅读量690

点赞数 1

分类专栏： iview vue 时间组件

本文链接：https://blog.csdn.net/weixin_43448394/article/details/117566896

版权

本文介绍了如何在iview的日期组件中，当设置开始和结束时间时，将不符合条件的日期精确到时分级别置灰。通过分析开始和结束日期的关系，利用endTimeOptions的disabledHours和disabledMinutes属性实现禁用特定小时和分钟。同时提供了一段Vue.js代码示例，并提及了isSameDay方法的作用，确保在切换日期时避免因默认时间为00:00而产生的错误。

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

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