UNPKG

sanity

Version:

Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches

40 lines (30 loc) 1.81 kB
This folder contains a customised version Sanity Studio's [DateInput](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/form-builder/src/inputs/DateInputs) and accompanying calendar components. Some changes have been made to make both `<DateTimeInput>` and its calendar component _time zone aware_: ## DateTimeInput - This continues to handle all dates in UTC, though it formats + parses values using the _current time zone_ - Date and time handling uses `date-fns` formatting (rather than moment - which the studio is moving away from anyway) - Added the `customValidation` option, a callback function used to validate whether certain date ranges are selectable in the calendar - Added the `customValidationMessage` option, a custom error message displayed when `customValidation` fails ```js // E.g. No scheduling on weekends! const {utcToCurrentZoneDate} = useTimeZone() const handleCustomValidation = (selectedDate: Date): boolean => { return !isWeekend(utcToCurrentZoneDate(selectedDate)) } return ( <DateTimeInput type={{ name: 'date', options: { customValidation: handleCustomValidation, customValidationmessage: 'No schedules on weekends please', }, title: 'Date and time', }} /> ) ``` ## DateTimeInput calendar - Ingested dates (e.g. `focusedDate` and `selectedDate` are now in 'wall time' – or time zone formatted dates). This is accomplished with extensive use of `date-fns-tz` helper functions. - All dates returned in callbacks (e.g. `onSelect` and `onFocusedDateChange`) **always return values in UTC** (for the corresponding `<DateInput>` to ingest). These changes ensure correct days / hours etc are highlighted in various calendar UI elements when switching between time zones.