如何解决使用datepicker事件查看自定义组件
我在新页面中创建了自己的vuetify组件,我有一个按钮来打开vuetify对话框,该对话框显示带有日期选择器的表单。在这个日期选择器中,我希望能够根据日期提供自定义CSS类
请参阅此处,了解我到目前为止使用的示例:https://codepen.io/chansv/pen/LYYyNYd
new Vue({
el: '#app',vuetify: new Vuetify(),data () {
return {
picker: new Date().toISOString().substr(0,10),availableDates: ["2019-10-02","2019-10-8","2019-10-11"],}
},methods: {
setColor() {
let allDates = document.querySelectorAll(".v-date-picker-table .v-btn .v-btn__content");
allDates.forEach((x,i) => {
if (i % 4 === 0) {
allDates[i].classList.add('J1');
}
if (i % 4 === 1) {
allDates[i].classList.add('J2');
}
})
}
},mounted() {
this.setColor();
}
})
请注意,通常我们会打开一个显示该日期选择器的对话框。当我们更改月份/年份时,我们希望在新的月份显示css类。我试图调查“手表”的使用情况,但到目前为止没有成功。我想拦截datepicker“ open”事件,以便能够添加所需的CSS类,但是我觉得这与旧的jquery方式过于接近。直到现在我都使用了:https://api.jqueryui.com/datepicker/#option-beforeShowDay
我是vuejs新手。
感谢您的帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。