'use client'; import { cn, withRef } from '@udecode/cn'; import { setNodes } from '@udecode/plate-common'; import { findNodePath } from '@udecode/plate-common/react'; import { Calendar } from './calendar'; import { PlateElement } from './plate-element'; import { Popover, PopoverContent, PopoverTrigger } from './popover'; export const DateElement = withRef( ({ children, className, ...props }, ref) => { const { editor, element } = props; return ( {element.date ? ( (() => { const today = new Date(); const elementDate = new Date(element.date as string); const isToday = elementDate.getDate() === today.getDate() && elementDate.getMonth() === today.getMonth() && elementDate.getFullYear() === today.getFullYear(); const isYesterday = new Date( today.setDate(today.getDate() - 1) ).toDateString() === elementDate.toDateString(); const isTomorrow = new Date( today.setDate(today.getDate() + 2) ).toDateString() === elementDate.toDateString(); if (isToday) return 'Today'; if (isYesterday) return 'Yesterday'; if (isTomorrow) return 'Tomorrow'; return elementDate.toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric', }); })() ) : ( Pick a date )} { if (!date) return; setNodes( editor, { date: date.toDateString() }, { at: findNodePath(editor, element) } ); }} mode="single" initialFocus /> {children} ); } );

Date Element

Installation

Examples

Date