nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.

Home Page:https://vcalendar.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add custom slot to date picker popover

FedericoGiulianini98 opened this issue · comments

Hello, I'm trying to create a custom slot to insert above the header of the date picker but I'm not able to do it. When I add a v-slot with a custom name, the datepicker does not appear, and searching in the documentation, clicking on the "custom slot" entry leads to a 404 page.
I'm using Vue 2. This is my code:

<v-date-picker v-model="range" is-range :columns="$screens({ default: 1, lg: 2 })">
  <template v-slot="{ inputValue, inputEvents }">
    <div class="datepicker__flex">
      <div class="datepicker__flex_wrapper">
        <label for="">
          check in
        </label>
        <input
        :value="inputValue.start"
        v-on="inputEvents.start"
        class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
        />
      </div>
      
      <div class="datepicker__internal_separator"></div>
      
      <div class="datepicker__flex_wrapper">
        <label for="">
          check out
        </label>
        <input
        :value="inputValue.end"
        v-on="inputEvents.end"
        class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
        />
      </div>
    </div>
  </template>

  <!-- CUSTOM SLOT ABOVE HEADER -->
  <template v-slot:customTopHeader>
    <!-- things... -->
  </template>
  
  <template v-slot:footer>
    <div class="datepicker__footer">
      <p class="datepicker__footer_delete">Cancella date</p>
      <div class="datepicker__footer_update">
        <span>
          aggiorna
        </span>
      </div>
    </div>
  </template>
</v-date-picker>

Thank you.