CalendarInput

Type: React component

How to get CalendarInput?

JavaScript

import { CalendarInput } from 'fds/components';

A calendar displayed inside a Drop, used for selecting a year, month and day. The selected date is displayed as a Label inside the component. This component doesn't support selecting a time value (hour, minute and second), if this is desired consider using a TimeSelect or DateTimeSelect instead.

Props

  1. dayOfWeekLabels

    (Optional)

    Type: Array

    The labels displayed as the day within the week. Expects an array of 7 letters, starting at monday.

    Default value

  2. displayClearButton

    (Optional)

    Type: Boolean

    Whether or not the clear button (the "times" [X] icon) should be displayed. Defaults to true.

    Pressing this button clears the CalendarInput value by calling onChange(null) if !isDisabled. Which should set the value prop to null and thereby clearing the input.

    Default value

  3. formatDateLabel

    (Optional)

    Type: Function

    This can be one of two types:

    • function: a custom callback to format the resulting date rendered inside the Label

    component in any way you like by taking the given Date value and returning any string.

    • object: a configuration object that is more limited in terms of formatting options, but

    allows users to enter the date value using 3 separated text input fields to quickly enter any value they like, without using the calendar UI.

    For example:

    • function: value => ${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}

    • object: { separator: '/', order: ['date', 'month', 'year'] }

    You can use any string as a separator, defaults to '/'. For the order, you can use any order of 'date', 'month' and 'year' in an array.

    Arguments

    Returns

    Default value

  4. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  5. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

    Default value

  6. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  7. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  8. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

    Default value

  9. value

    (Optional)

    Type: Object

    The current value of the component. This value should be a valid JavaScript date.

    Related links

    Default value

  10. isBorderless

    (Required)

    Default value

  11. onPositionerMount

    (Required)

    Default value

  12. onPositionerUnmount

    (Required)

    Default value