Enkelt React-component for å formattere dato-utskrift fra Sanity med dayjs

Datoer er et format-mareritt i mange tilfeller. Schema-typen datetime og date i Sanity følger standarder for datoformattering, men dette egner seg dårlig i et grensesnitt, siden det er lite leselig. Her ser vi hvordan vi raskt kan lage en enkel komponent for å formatere datoer vi vil vise i React-grensesnittet vårt, ved hjelp av biblioteket dayjs og et enkelt hjelpekomponent.

Forutsetninger

Du har en react-app og en Sanity-database med et date- eller datetime-felt du ønsker å formatere datoer fra.

Dayjs og komponent

Aller først må du installere dayjs. Hvis du bruker node, er det vanlig rutine:

npm install dayjs

Så lager du et hjelpekomponent (ofte plassert i en /utils- eller /helper-mappe) kalt DateConvert.js med følgende kode:

export default function DateConvert({date, format = "DD.MM.YYYY"}) {
    const dayjs = require('dayjs')
    return dayjs(date).locale('nb').format(format)
}Code language: JavaScript (javascript)

La oss bryte ned koden raskt:

Vi lager et komponent kalt DateConvert. Dette tar imot to props: date og format. date er dato-objektet som kommer fra Sanity (eller et annet CMS), format er formatet du vil ha datoen skrevet ut som. Vi har satt en standardverdi for prop-en format. Dette gjør at vi kan la være å sende med en format-prop, og vil få skrevet ut datoen på formatet 01.01.2023. Med format-propen kan vi nå overskrive standard-formatet dersom vi ønsker en annen datovisning.

OBS: Dersom du har et annet standardformat, for eksempel kun dato og måned med klokkeslett i en chat-applikasjon, bytt ut default-verdien for format-propen med din ønskede dato, slik at du i færrest mulig tilfeller trenger å overskrive den. Formatteringsmuligheter kan du finne i dayjs-dokumentasjonen.

Bruk

For å bruke den nye komponenten, importerer du det og bruker det som et vanlig komponent:

import DateConvert from './utils/DateConvert'

export default function Article({title, url, pubdate}) {
  return(
    <article>
      <h2>{title}</h2>
      <p>Published <DateConvert date={pubdate} format="DD.MM.YYYY, HH:MM" /></p>
      <a href={url}>Full story</a> 
    </article>
  )
}
Code language: JavaScript (javascript)

pubdate er datoobjektet vi har hentet fra CMS-et.

Kilder

dayjs + dayjs dokumentasjon