How to handle date string with DatePicker whilst still ensuring input works?

[timmaier]

Hey in the application I'm building I'm wanting to use the DatePicker from radix-vue.

My backend sends date/datetime strings such as 2024-06-20, 2024-06-15 13:24:37

I'm wanting to wrap the DatePicker of radix-vue in a CommonDatePicker that consumes this date string and makes the ergonomics of building forms that pre-populate with date string values that my backend sends and expects to receive easier.

Way's I've attempted this is with a computed to map the string modelValue passed to CommonDatePicker into a CalendarDate consumable by the DatePicker. This works but then I lose the ability to type the date into the input as each update mutates.

My work around for the moment is to run the cast to CalendarDate before the modelValue is set into the input and then cast it back to string right before we send the value to the backend. This is fine it's just always up to the dev to ensure this happens for each form that is built.

Maybe the best approach would be to put the work in on the backend and ensure that the date value the backend sends conforms with CalendarDate type of the import {CalendarDate} from "@internationalized/date";

[epr3]

@timmaier It seems the format you use for the dates is ISO 8601. (Although, a date/time object would need a little bit of adjustment on the backend so that it follows the ISO 8601 format, e.g. 2024-06-15T13:24:37)

import {parseDateTime} from '@internationalized/date';

parseDateTime('2024-06-15T13:24:37');

import {parseDate} from '@internationalized/date';
parseDate('2024-06-20');

Both of these functions will return a CalendarDate/CalendarDateTime object, required by the DatePicker components. The previous mentioned date objects also have a .toString() method which converts the object back to a ISO 8601 string.

Would these functions from@internationalized/date help with your use case? If not, could you provide a little bit more context on the component you're trying to build?

[iBobik]

I solved it like this:

<DatePicker v-model="date" />

import { DateTime } from 'luxon'

const model = defineModel<string>()

const date = computed({
  get: () => model.value ? DateTime.fromISO(model.value).toJSDate() : undefined,
  set: (value: Date | undefined) => model.value = value ? DateTime.fromJSDate(value, { zone: 'Europe/Prague' }).toUTC().toISO()! : undefined,
})