useAutoFormatDate

A hook for auto-formatting and validating a text input value to match a short date.

View source

Import

import { useAutoFormatDate } from '@pluralsight/react'

interface Options {
  pattern?: ['m', 'd', 'Y'] | ['d', 'm', 'Y']
  value?: string
}

useAutoFormatDate(options?: Options)

Reference

Call useAutoFormatDate at the top level of your component to provide an automatically formatted date value to your text input:

import { FornControlProvider, Input, FieldMessage } from '@pluralsight/react'
import { useAutoFormatDate } from '@pluralsight/react'
import { CalendarIcon } from '@pluralsight/icons'

function DateInput(props) {
  const inputFormatProps = useAutoFormatDate()

  return (
    <FormControlProvider>
      <Input
        {...inputFormatProps}
        describedBy="birthdate:help"
        id="birthdate"
        name="birthdate"
        startIcon={CalendarIcon}
      />
      <FieldMessage id="birthdate:help">
        Enter your date of birth in the format MM/DD/YYYY
      </FieldMessage>
    </FormControlProvider>
  )
}

Parameters

• options: Object that accepts a pattern property that accepts a String Array value of a Date Pattern along with a value property that accepts a String to set an initial value.

Returns

An Object containing a value property of a short date String and an onChange event handler to attach to your input element.

Troubleshooting

My Dates are showing up incorrectly

Make sure you are passing an accepted format option. If you are using Typescript, the types will be available to help prevent this from happening.

1. Make sure your format option is valid.
2. If you are passing in an initial value, make sure it is valid.