[Feature]: Extend Calendar with DateTime option

[dany68]

Describe the feature

Hi,

First of all thank you for this amazing library ! Would it be possible to extend the Calendar component with a DateTime option ? Currently the v-model is using a DateValue | DateValue[] type and the root expose only a date slot.

I would like to add 3 selects to the current implementation to select hour, minute and period (AM/PM).

Thank you very much,

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[epr3]

@dany68 @internationalized/date supports both CalendarDateTime and ZonedDateTime as part of the DateValue type which have fields for time.

You can pass either of those types described above as a v-model to the CalendarRoot component.

E. g.

<script lang="ts" setup>
import { CalendarDateTime, type DateValue } from '@internationalized/date'
import { ref, type Ref } from 'vue'
import { CalendarRoot, ... } from 'radix-vue'

const date = ref(new CalendarDateTime(2024, 5, 26, 12, 0, 0)) as Ref<DateValue>
</script>

<template>
  <CalendarRoot v-model="date">
  ...
  </CalendarRoot>
</template>

[sadeghbarati]

Based on Eduard comment you can control the DatePickerField or DateField components segments

---

If you pass CalendarDate or toCalendarDate to the DateField, it will look like this (without time segment)

---

If you pass CalendarDateTime or toCalendarDateTime to the DateField, it will look like this

---

If you want Standalone Time Picker inside Calendar or DatePicker this issue might be help in the future

https://github.com/radix-vue/radix-vue/issues/900#issuecomment-2104386498

[dany68]

Thank you very much for your help !