Date Field

Components

Date Field

A date field component for use inside a form, used for date input

About

The DateField is built using a composition of the <Popover /> and the <Calendar /> components.

Usage

'use client';
 
import * as React from 'react';
 
import { DateField } from '@/components/ui/formfield';
import { Button } from '@/components/ui/button';
 
export function DateFieldDemo() {
  const [returnDate, setReturnDate] = React.useState<Date>();
  return (
    <form className="flex flex-col gap-4 p-4">
      <DateField name="requiredDate" label="Required Date" defaultValue={new Date()} required={true} />
      <DateField name="returnDate" label="Return Date" />
      <Button>Submit</Button>
    </form>
  );
}

'use client';
 
import * as React from 'react';
 
import { DateField } from '@/components/ui/formfield';
import { Button } from '@/components/ui/button';
 
export function DateFieldDemo() {
  const [returnDate, setReturnDate] = React.useState<Date>();
  return (
    <form className="flex flex-col gap-4 p-4">
      <DateField name="requiredDate" label="Required Date" defaultValue={new Date()} required={true} />
      <DateField name="returnDate" label="Return Date" />
      <Button>Submit</Button>
    </form>
  );
}

API Reference

Prop	Type	Default
name*	string
id	string
label	string
placeholder	string
required	boolean
readOnly	boolean
error	string
displayFormat	string
value	any
onChange	event
className	string