-
Notifications
You must be signed in to change notification settings - Fork 4
Open
Description
The current implementation of the DateTimeControl does not allow for configuring the default timezone in any manner. It also does not allow the end user to BTODL (bring their own date library). The AntD DatePicker allows for using custom date libraries if the consumer prefers something like moment, date-fns or luxon.
The complications of trying to implement this inside the library in its current form come in 2 flavors.
- The user will need to supply a config object to the component for their library of choice so we can use
DatePicker. generatePicker(<userConfig>). This can be made generic in component relatively easy via the
GenerateConfighelper from
rc-picker`. - The jsonforms field that we are targeting with this control is a
string
formatted as adatetime
. This means that the value coming in from the form's data orinitialValue
need to be parsed from a string into the relevant flavor of date object for their library of choice (antd uses dayjs by default, which is why that is what is used in that first implementation). This means that along with the config object for the form the end user will need to supply a parse function to convert the datetime string into their (potentially timezone aware/included) date library object. Maybe something along the lines of:
...
import type { GenerateConfig } from 'rc-picker/lib/generate'
import generatePicker from 'antd/es/date-picker/generatePicker'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
import dayjs from 'dayjs'
import type { Dayjs } from "dayjs"
type DateTimeConfig<T> = {
generateConfig: GenerateConfig<T>
/**
* Parse a string value into the date type expected by the generate config
*/
parseDate: (dateString: string) => T
timezone?: string
format?: string
}
type ControlProps = Omit<JSFControlProps, "uischema"> & {
uischema: ControlUISchema<unknown> & {
options?: DateTimeControlOptions & {
dateConfig?: DateTimeConfig<any>
}
}
}
const DEFAULT_PROPS: DateTimeControlOptions = {
format: { format: "YYYY-MM-DD HH:mm:ss", type: "mask" },
} as const
// Default config using dayjs
const defaultDateConfig: DateTimeConfig<Dayjs> = {
generateConfig: dayjsGenerateConfig,
parseDate: (dateString: string) => dayjs(dateString),
}
...
export function DateTimeControl({
...
// Use provided generate config to create picker
const DatePicker = generatePicker(dateConfig.generateConfig)
// Parse initial value using the provided parser
const initialValue = schema.default ?
dateConfig.parseDate(schema.default as string) :
undefined
...
The types here would really need to go in ui-schemas
with the rest of the DateTimeControlOptions but this shoule convey the idea.
Metadata
Metadata
Assignees
Labels
No labels