如何在datepicker上设置高度滚动？
脚本：如何在datepicker上设置高度滚动？,datepicker,vuetify.js,Datepicker,Vuetify.js,脚本： <v-date-picker v-model="date" @input="changeHours" no-title> <div class="flex-grow-1"></div> <v-btn text color="primary" @click="modal = false">Cancel</v-btn> <v-btn text color="primary" @click="$re
<v-date-picker v-model="date" @input="changeHours" no-title>
<div class="flex-grow-1"></div>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
取消
好啊
如何操作？是可以将滚动时间嵌套的高度设置为datepicker 默认情况下，对话框附带必须禁用的滚动条 首先，我们可以将滚动单独添加到日期选择器或time flex 盒子 在下面的代码中，我将datepicker页脚按钮作为一个单独的flex进行了移动，并添加了仅滚动到时间的滚动条，以便它可以根据时间段的数量进行增长 在此处使用代码笔：
调用日期{{date}
选择时间
请先选择日期
事件
{{allowedTime}
取消
好啊
css
.v对话框{框阴影：无！重要；}
.行{
右边距：0！重要；
}
.v-选择器体{
没有！很重要；
}
.信用卡{
盒影：无！重要；
}
.对话课{
溢出：隐藏；
最大高度：345px！重要；
最大宽度：470像素；
}
.v-date-picker-table{
位置：相对位置；
填充：0 12px；
高度：220px；
}
剧本
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
日期：新日期（）.toISOString（）.substr（0,10），
莫代尔：错，
页脚：false，
时间：空，
允许时间：['13:00-14:00'，'14:00-15:00'，'15:00-16:00'，'16:00-17:00'，'17:00-18:00'，'18:00-19:00'，'19:00-20:00'，'20:00-21:00'，'21:00-22:00']
//允许次数：[]
}),
方法：{
保存（k）{
console.log（此.$refs.dialog）；
},
allowedates:val=>parseInt（val.split（'-'）[2]，10）%2==0，
设定时间（时间）{
这个时间
},
更改小时数{
console.log（_val）
this.allowedTimes=['08:00-09:00'，'09:00-10:00']
},
openModal（）{
this.modal=true
var self=这个；
设置超时（（）=>{
self.setFooter（）
}, 0);
},
setFooter（）{
如果（！this.footer）{
console.log（'footer'）
var div=document.createElement（'div'）；
var html=“AvailableUnavailable”；
div.innerHTML=html；
document.querySelector（'.v-date-picker-table'）.append（div）；
this.footer=true；
}
}
},
})
调用日期{{date}
选择时间
请先选择日期
事件
{{allowedTime}
取消
好啊
css
.v对话框{框阴影：无！重要；}
.行{
右边距：0！重要；
}
.v-选择器体{
没有！很重要；
}
.信用卡{
盒影：无！重要；
}
.对话课{
溢出：隐藏；
最大高度：345px！重要；
最大宽度：470像素；
}
.v-date-picker-table{
位置：相对位置；
填充：0 12px；
高度：220px；
}
剧本
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
日期：新日期（）.toISOString（）.substr（0,10），
莫代尔：错，
页脚：false，
时间：空，
允许时间：['13:00-14:00'，'14:00-15:00'，'15:00-16:00'，'16:00-17:00'，'17:00-18:00'，'18:00-19:00'，'19:00-20:00'，'20:00-21:00'，'21:00-22:00']
//允许次数：[]
}),
方法：{
保存（k）{
console.log（此.$refs.dialog）；
},
allowedates:val=>parseInt（val.split（'-'）[2]，10）%2==0，
设定时间（时间）{
这个时间
},
更改小时数{
console.log（_val）
this.allowedTimes=['08:00-09:00'，'09:00-10:00']
},
openModal（）{
this.modal=true
var self=这个；
<div id="app">
<v-app>
<v-content>
<v-container>
<v-btn color="success" dark @click="openModal()">call date {{ date }}</v-btn>
<v-dialog
:return-value.sync="date"
v-model="modal"
content-class="dialog-class"
ref="dialog"
persistent
>
<v-card>
<div>
<v-container grid-list-md text-xs-cente style="padding: 0px;">
<v-layout row wrap>
<v-flex xs8 style="position: fixed;">
<v-date-picker v-model="date" @input="changeHours" no-title>
</v-date-picker>
</v-flex>
<v-flex xs4 style="position: relative; left: 300px;">
<div>
<p class="text-center mt-3 font-weight-bold">Select Time</p> </div>
<p class="text-center subtitle-2 mt-4" v-if="!allowedTimes.length">Please pick date first</p>
<p class="text-center" v-if="!allowedTimes.length"><v-icon>event</v-icon></p>
<div class="my-3" v-show="date !== null" :style="{'background-color':'white','text-align':'center', 'overflow-y': 'scroll', 'height': '220px'}">
<template v-for="(allowedTime, i) in allowedTimes">
<v-btn
:key="i"
@click="setTime(allowedTime)"
class="my-1"
:outlined="allowedTime !== time"
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</div>
</v-flex>
<v-flex xs12>
<v-card>
<v-card-actions style="padding-top: 0px;">
<v-spacer></v-spacer>
<v-btn color="primary" @click="modal = false">Cancel</v-btn>
<v-btn color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</v-card>
</v-dialog>
</v-container>
</v-content>
</v-app>
</div>
css
.v-dialog { box-shadow: none!important; }
.row {
margin-right: 0 !important;
}
.v-picker__body {
flex: none !important;
}
.v-card{
box-shadow: none !important;
}
.dialog-class {
overflow: hidden;
max-height: 345px !important;
max-width: 470px;
}
.v-date-picker-table {
position: relative;
padding: 0 12px;
height: 220px;
}
script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: new Date().toISOString().substr(0, 10),
modal: false,
footer: false,
time: null,
allowedTimes: ['13:00 - 14:00','14:00 - 15:00','15:00 - 16:00','16:00 - 17:00','17:00 - 18:00','18:00 - 19:00','19:00 - 20:00','20:00 - 21:00','21:00 - 22:00']
// allowedTimes: []
}),
methods: {
save(k) {
console.log(this.$refs.dialog);
},
allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
setTime(time) {
this.time = time
},
changeHours(_val) {
console.log(_val)
this.allowedTimes = ['08:00 - 09:00','09:00 - 10:00']
},
openModal() {
this.modal = true
var self = this;
setTimeout(() =>{
self.setFooter()
}, 0);
},
setFooter() {
if (!this.footer) {
console.log('footer')
var div = document.createElement('div');
var html = "<span><div style='float:left; margin-top:4px; margin-left: 10px; height: 12px; width: 12px; border-radius: 10px; background-color: blue;'></div></span><span style='margin-left: 5px; float: left;font-size:14px'>Available</span><span><div style='float:left;height: 12px; width: 12px; border-radius: 10px; background-color: grey; margin-left:20px; margin-top:4px;'></div></span><span style='margin-left: 8px; float:left; font-size: 14px'>Unavailable</span>";
div.innerHTML = html;
document.querySelector('.v-date-picker-table').append(div);
this.footer = true;
}
}
},
})