Geoff Ball
Support Engineer at Sanity.io
A custom input component that lets users enter a time without requiring a date.
import React from 'react';
import FormField from 'part:@sanity/components/formfields/default'
import {PatchEvent, set} from 'part:@sanity/form-builder/patch-event'
import {TextInput} from '@sanity/ui'
export const TimeInput = React.forwardRef((props, ref) => {
const { type, onChange, value } = props;
const { title, description } = type;
return (
<FormField label={title} description={description}>
<TextInput
type="time"
ref={ref}
value={value}
onChange={event => {onChange(PatchEvent.from(set(event.target.value)))}}
/>
</FormField>
);
})
import { TimeInput } from '../path/to/time-input';
export default {
name: "documentName",
title: "Document Name",
type: "document",
fields: [
// ...,
{
name: 'time',
title: 'Time',
type: 'string',
description: 'Please enter a time.',
inputComponent: TimeInput,
},
// ...
],
}
The Datetime schema type built into Sanity is useful, but sometimes you only want to work with times. Using a custom input component, we can add an HTML input with type="time"
, which will not require a date and stores the value consistently (as a string in 24-hour format).
The description
property is optional.
The name and file location of your input component do not matter—you just need to be able to import the file into your schema.
time-input.js
and put it in a components/
directory in the root of my studio).time-input.js
.TimeInput
:import { TimeInput } from '../path/to/time-input';
string
and an inputComponent property of TimeInput
.Support Engineer at Sanity.io
GROQ doesn't yet include a function to match the end of a string, but we can simulate it by splitting our string on our term.
Go to Matching the end of a string in GROQSimplify your Studio experience by hiding deprecated fields when you create new documents.
Go to Hide a deprecated field in new documentsIf you want to pass a parameter to a query that might not always be defined
Go to Handle Certain Values To Be TrueThis snippet can be used to fetch current, previous and next articles based on publication date and related tags.
Go to Get current, previous and next post, filtered by tags