Как я могу настроить дату в Vuetify? - PullRequest
Новая
       118

Как я могу настроить дату в Vuetify?

0 голосов
/ 08 октября 2019

Я хочу сделать datetimepicker следующим образом: https://vuetifyjs.com/en/getting-started/consulting-and-support. Если вы нажмете "2 Hour Consulting Session", будет отображаться datetimepicker следующим образом: https://ibb.co/kHrbHTG. Я хочу сделать так. Но я не нахожу компонент datetimepicker в документации. Документы: https://vuetifyjs.com/en/components/date-pickers

Основываясь на моем анализе, он использует модал DatePicker. не сборщик даты. Timepicker настраивается только с помощью кнопки структуры. но я запутался, как разместить кнопку контура рядом со средством выбора даты

Мой сценарий выглядит так: 

<template>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      <v-dialog
        ref="dialog"
        v-model="modal"
        :return-value.sync="date"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-btn color="success" dark v-on="on">Call datepicker</v-btn>
        </template>
        <v-date-picker v-model="date" scrollable>
          <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>
      </v-dialog>
    </v-col>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      modal: false,
    }),
  }
</script>

Можно ли настроить средство выбора даты таким образом?

1 Ответ

0 голосов
/ 08 октября 2019

Этот Datepicker не является частью Vuetify. Этот скриншот, который вы сделали, на самом деле является <iframe> веб-сайта https://calendly.com/, который выглядит как веб-сайт для управления встречами. Таким образом, этот календарь в основном просто пользовательский CSS, созданный этой компанией, ничего общего с Vuetify.

...