如何将页脚日期选择器移到日期选择器之外?
Posted
技术标签:
【中文标题】如何将页脚日期选择器移到日期选择器之外?【英文标题】:How can I move footer datepicker outside datepicker? 【发布时间】:2020-02-28 22:17:11 【问题描述】:我的代码:
<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>
演示和完整代码:https://codepen.io/positivethinking639/pen/zYYPQOX
我想将页脚日期选择器移到日期选择器之外/放在右侧。但我还是很困惑。因为似乎它会在底部制作新组件
我该怎么做?
【问题讨论】:
【参考方案1】:我对 codepen 代码进行了更改,以将 datepicker 按钮移动到单独的页脚
在这里工作的代码笔:https://codepen.io/chansv/pen/vYYdKNJ
<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>
.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;
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
this.setFooter()
,
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;
,
)
【讨论】:
以上是关于如何将页脚日期选择器移到日期选择器之外?的主要内容,如果未能解决你的问题,请参考以下文章