nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.05k stars 511 forks source link

[DatePicker] Implement component #2524

Open benjamincanac opened 2 days ago

benjamincanac commented 2 days ago

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:

mehaac commented 2 days ago

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

benjamincanac commented 2 days ago

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

mehaac commented 1 day ago

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 commented 1 day ago

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>