[DatePicker] Implement component

[benjamincanac]

https://www.shadcn-vue.com/docs/components/date-picker.html

I think we can just use a Button + Popover + Calendar for this instead of implementing:

• https://www.radix-vue.com/components/date-field.html
• https://www.radix-vue.com/components/date-picker.html
• https://www.radix-vue.com/components/date-range-field.html
• https://www.radix-vue.com/components/date-range-picker.html

[mehaac]

Why are you not considering adding a DateField to the DatePicker?

[benjamincanac]

I'm a bit hesitant on this actually, are date pickers not mostly used with buttons instead of inputs? 🤔

[mehaac]

I'm a bit hesitant on this actually, are date pickers not mostly used with buttons instead of inputs? 🤔

If buttons do have the edge, it's not by much, in my experience. In companies related to booking trains and flights, it's about even - some allow you to fill in fields directly, others use only buttons.

aa.com britishairways.com

[hywax]

I agree with @mehaac

My vision of the component: DateField with scope slot #default, by default it is UInput, whoever needs it will pass UButton to it.

<script setup lang="ts">
const date = ref(new Date())
</script>

<template>
  <!-- Default -->
  <UDatePicker v-model="date" />

  <!-- Replace UInput to UButton -->
  <UDatePicker>
    <template #default="{ open, date }">
      <UButton :label="date.toLocaleDateString()" @click="open = true" />
    </template>
  </UDatePicker>
</template>