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
Markdown
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.