如何将页脚日期选择器移到日期选择器之外？

Question

我的代码：

<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

我想将页脚日期选择器移到日期选择器之外/放在右侧。但我还是很困惑。因为似乎它会在底部制作新组件

我该怎么做？

Answer 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;
        }
      }
    },
  })