Components
Forms
DatePicker

DatePicker

DatePicker

Editable Example

import { DatePicker } from "@wfp/react";

() => {
  return (
    <DatePicker
      helperText="This is the helperText."
      labelText="DatePicker"
    />
  );
};
PropDefaultDescriptionValue

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

formItemClassName

string
–

Provide a custom className that is applied directly to the underlying <textarea> node

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

hideLabel

boolean
–

Specify whether you want the underlying label to be visually hidden

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

light

boolean
–

placeholder

string
–

Specify the placeholder attribute for the input

id

string
–

Provide a unique identifier for the control

name

string
–

Provide a name for the control

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

disabled

boolean
–

Specify if the control is disabled (sets aria-disabled as well)

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

startDate

Date
–

The starting date value, formatted as a string.

datePicker

ComponentType<any>
–

The DatePicker component to be used (react-datepicker by default)

setStartDate

(date: Date) => void
–

Function to set the starting date. Typically used as an event handler.

setEndDate

string
–

Function to set the ending date. Typically used as an event handler.

fromProps

object
–

Additional props for the start date DatePicker component. Can be used to pass custom settings or event handlers.

toProps

object
–

Additional props for the end date DatePicker component. Can be used to pass custom settings or event handlers.

datePickerProps

object
–

Additional props for the DatePicker component.

hideCalendarIcon

boolean
–

On this page

References