Cerberus Design System

Start Date

We also have access to the ISO format: 0000-00-00

Usage

1
'use client'
2

3
import { Calendar } from '@cerberus/icons'
4
import {
5
  Field,
6
  FieldMessage,
7
  Input,
8
  Label,
9
  useDate,
10
  type InputProps,
11
} from '@cerberus/react'
12

13
export function DateInput(props: InputProps) {
14
  const date = useDate()
15
  return (
16
    <Field>
17
      <Label htmlFor={props.id}>Start Date</Label>
18
      <Input
19
        {...props}
20
        describedBy="help:start_date"
21
        onChange={date.onChange}
22
        startIcon={<Calendar />}
23
        placeholder="DD MMM YYYY"
24
        type="text"
25
        value={date.value}
26
      />
27
      <FieldMessage id="help:start_date">
28
        We also have access to the ISO format: {date.ISO}
29
      </FieldMessage>
30
    </Field>
31
  )
32
}

Helpers

Cerberus exposes the following helper functions for date formatting. These are already used internally by the useDate hook.

Date Formats

1
export const DateFormats = {
2
  get ISO() {
3
    return 'YYYY-MM-DD'
4
  },
5
  get USMilitary() {
6
    return 'DD MMM YYYY'
7
  },
8
  get Months() {
9
    return MONTHS
10
  },
11
}

Military Formatters

1
// Takes an ISO date string and returns a military date string
2
// 'YYYY-MM-DD' -> 'DD MMM YYYY'
3
export function formatISOToMilitary(input: string): string
4

5
// Takes a military date string and returns an ISO date string
6
// 'DD MMM YYYY' -> 'YYYY-MM-DD'
7
export function formatMilitaryToISO(input: string): string
8

9
// Takes a military date string and returns a military date string
10
// 'DD MMM YYYY' -> 'DD MMM YYYY'
11
export function formatMilitaryDate(input: string): string

API

export interface UseDateBase {
  format: string
  value: string
  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
}

export interface UseDateOptions extends UseDateBase {
  initialValue?: string
}

export interface UseDateReturn extends UseDateBase {
  ISO: string
}

define function useDate(options?: UseDateOptions): UseDateReturn

Arguments

The useDate hook accepts the following optional arguments:

Name	Default	Description
`format`	`'DD MMM YYYY'`	The format of the date string.
`initialValue`		An initial value of the date string.
`onChange`		The custom event handler for the date input.

Return

Name	Default	Description
`format`	`'DD MMM YYYY'`	The format of the date string is.
`value`		The current value of the date string.
`ISO`		The current value of the date string in ISO format.