A composite date picker built from Input and Calendar. The calendar opens when the input receives focus and closes when focus is lost, with interaction detection to keep the calendar open during use.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
calendarAttributesobject

Custom props for the Calendar component.

customAttributesobject

Custom attributes for the wrapper element.

customClassesstring | Array | object

Custom classes for the wrapper element.

inputAttributesobject

Custom props for the Input component.

dateFormatstring | function

Format for displaying selected dates in the input. Strings support YYYY/yyyy, YY/yy, MM/mm, and DD/dd tokens; provide a formatter function for custom logic.

onChangefunction

Change handler when date changes. Receives (value, meta, event) where value is a Date (or [start, end]), meta contains { formattedValue, timestamp }, and event is the triggering event when available.

spacingstring | number | Array | object

Spacing for the wrapper component.

refobject | null

Forwarded ref.

Since
  • 5.7.0
Source
Returns:

DatePicker component.

Type: 
JSX.Element
Example
import { useState } from 'react';
import DatePicker from '@gravityforms/components/react/admin/modules/DatePicker';

export default function CampaignDateField() {
  const [ date, setDate ] = useState( null );
  const [ formatted, setFormatted ] = useState( '' );

  return (
    <DatePicker
      dateFormat="yyyy-MM-dd"
      inputAttributes={{
        labelAttributes: { label: 'Launch Date' },
        helpTextAttributes: { content: 'Use the YYYY-MM-DD format.' },
      }}
      onChange={ ( value, meta ) => {
        setDate( value );
        setFormatted( meta.formattedValue );
      } }
      calendarAttributes={{
        calendarAttributes: { selectRange: false },
      }}
    />
  );
}