Skip to Content
FrontendBundlesComponentsForm ComponentsCalendar Input

Calendar Input

A form-ready date input that combines a text field with a calendar popover. Used by RenderFormFields for ColumnTypeEnum.DATE and ColumnTypeEnum.DATETIME fields.

Import

import { CalendarInput } from "@phpcreation/frontend-components-react-nextjs-bundle/components/CalendarInput";

Props

PropTypeDefaultDescription
valuestring | Date | undefined—Controlled date value
onChange(value: string) => void—Change handler (ISO string)
placeholderstring"Pick a date"Input placeholder
disabledbooleanfalseDisable the input
formatstring"PPP"date-fns format string
classNamestring—Additional CSS classes

Usage

import { CalendarInput } from "...";
 
<CalendarInput
  value={dueDate}
  onChange={setDueDate}
  placeholder="Select due date..."
/>

With React Hook Form

<FormField
  control={form.control}
  name="dueDate"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Due Date</FormLabel>
      <FormControl>
        <CalendarInput
          value={field.value}
          onChange={field.onChange}
          placeholder="Pick a date"
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>
Last updated on
CalendarTime Picker