Grapes homepage4.1.1
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    useDateFormatter

    useDateFormatter is a hook providing localized date for the current locale. It is built around the native Intl.DateTimeFormat API with predefined date formats but can also be used using the same API.

    See the MDN docs for full details on how to use the API.

    useDateFormatter is built on top of the function dateFormatter. This function can also be used to format a date.

    Format Output

    SHORTMEDIUMLONG_WITH_TIMECUSTOM
    en-US9/11/26Sep 11, 2026September 11, 2026 at 12:28 PM09/11
    en-UK11/09/202611 Sept 202611 September 2026 at 12:2811/09
    fr-FR11/09/202611 sept. 202611 septembre 2026 à 12:2811/09
    it-IT11/09/2611 set 202611 settembre 2026 alle ore 12:2811/09
    de-DE11.09.2611.09.202611. September 2026 um 12:2811.09.
    es-ES11/9/2611 sept 202611 de septiembre de 2026 a las 12:2811/9

    Example

    import { useDateFormatter, DATE_FORMAT } from "@spendesk/grapes";
    
    export default function ProductPage() {
      const dateFormatter = useDateFormatter();
    
      return <p>{dateFormatter(new Date(), DATE_FORMAT.MEDIUM)}</p>;
    }
    

    Example with Intl.DateTimeFormat options

    import { useDateFormatter, DATE_FORMAT } from "@spendesk/grapes";
    
    export default function ProductPage() {
      const dateFormatter = useDateFormatter();
    
      return (
        <p>
          {dateFormatter(new Date(), DATE_FORMAT.CUSTOM, {
            day: "2-digit",
            month: "2-digit",
          })}
        </p>
      );
    }
    

    Example using only dateFormatter

    import { dateFormatter } from "@spendesk/grapes";
    
    export function localeFormat(locale) {
      const formattedDate = dateFormatter(locale, new Date(), DATE_FORMAT.MEDIUM);
      return formattedDate;
    }