iview 自定义时间选择器组件_Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能...
发布日期:2021-06-24 11:26:37 浏览次数:4 分类:技术文章

本文共 1010 字,大约阅读时间需要 3 分钟。

具体代码如下所述:

Vue.js中使用iView日期选择器并设置开始时间结束时间校验
开始时间: 结束时间:

new Vue({

el: '#app',

data() {

return {

startTime: '',

endTime: '2018-08-11 23:59:59',

startTimeOption: {},

endTimeOption: {}

}

},

mounted() {

this.startTime = '2018-08-08 00:00:00'

this.endTime = '2018-08-11 23:59:59'

this.onStartTimeChange(this.startTime)

this.onEndTimeChange(this.endTime)

},

methods: {

/**

* 开始时间发生变化时触发,设置结束时间不可选择的日期

* 结束时间应大于等于开始时间,且小于等于当前时间

* @param {string} startTime 格式化后的日期

* @param {string} type 当前的日期类型

*/

onStartTimeChange(startTime, type) {

this.endTimeOption = {

disabledDate(endTime) {

return endTime < new Date(startTime) || endTime > Date.now()

}

}

},

/**

* 结束时间发生变化时触发,设置开始时间不可选择的日期

* 开始时间小于等于结束时间,且小于等于当前时间

* @param {string} date 格式化后的日期

* @param {string} type 当前的日期类型

*/

onEndTimeChange(endTime, type) {

this.startTimeOption = {

disabledDate(startTime) {

return startTime > new Date(endTime) || startTime > Date.now()

}

}

}

}

})

总结

以上所述是小编给大家介绍的Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

转载地址:https://blog.csdn.net/weixin_32497403/article/details/114508601 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:java 验证码校验_JavaWeb验证码校验功能代码实例
下一篇:python集合如何去除重复数据_Python 迭代删除重复项,集合删除重复项

发表评论

最新留言

不错!
[***.144.177.141]2024年04月12日 07时45分21秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章