In datepicker range, count the days or nights

[cdmoro]

I promise this will be my last issue, but I think this is one of the most beauty calendar and datepicker for Vue, and I want to use in my developments.
This would be an enhancement, but it would be nice to have the possibility to show the count of days or nights when select a range in datepicker. This behavior appears mostly in lodging sites, with check-in and check-out.
This component has the behavior https://krystalcampioni.github.io/vue-hotel-datepicker/

[nathanreyes]

I'm starting to try and work out this feature and I'm beginning to think that perhaps allowing a custom popover component to be used within an attribute would solve your request as well as allowing custom content to be used within v-calendar as well. Then, when a calendar day is hovered or focused, that component gets displayed within the popover.

v-date-picker could use this popover to display the date range in days by default, but one could override by specifying a different drag-attribute prop.

In summary, maybe something like this...

<template>
<v-calendar
  :attrubutes='attributes'>
</v-calendar>
</template>

import MyAttrPopover from './MyAttrPopover';

export default {
  data() {
    return {
      attributes: [
        {
          popover: {
            component: MyAttrPopover,  // This component should declare dayInfo as a prop
            label: (dayInfo) => $`You just hovered day ${dayInfo.day}`, // Also could use a static string or function that returns string given the _dayInfo_
            visibility: 'hover', // Other option could be on 'focus'
            // ...other popover related properties
          },
          dates: [..],
        },
      ],
    };
  },
};

Any thoughts here?

[cdmoro]

I think the best solution is, by default, don't show the tooltip, and I could activate to view days or nights. If any user wants to show another thing in the tooltip, you could make a slot with the "template", template wich give us the possibility to put our variables, conditionals, icons, etc.

Something like this ('limitDay' is an external variable of v-calendar)

<v-calendar>
<template slot="tooltip" scope="data">
<div v-show="data.day > limitDay">The offers is not longer valid</div>
<div>{{data.day}}</div>
</template>
</v-calendar>

[nathanreyes]

That was my original thought, but I thought Vue would give me fits trying to pass down slots to child components more than one level deep.

For example, I'd have to pass the slot down this hierarchy...
Calendar.vue >> CalendarPane.vue >> CalendarWeeks.vue >> CalendarDay.vue

I'm sure it can be done, but it will probably be kind of hacky. I wish there was a way built into Vue to do this easily. I guess I need to do some more testing with this approach.

[nathanreyes]

The date picker now displays a popover by default to show the days and nights. This, however, can be customized. You can assign a function for the popover label or just use a custom slot.

Reference the popover example code on the docs site in the 'Attributes' section. I need to add more detailed documentation, but hopefully this will be enough to get you going. Popovers can be assigned for any attribute, not just for date pickers.

[elfwine]

Is there a way to disable the popover? It's not always required to show days & night counts, it will be great if it can be turn off.