Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

DateInput

An input to enter a single date value.

usage: import { DateInput } from "@sharegate/orbit-ui";
sources: Github

Usage

The Date constructor monthIndex argument is 0 based. Therefore, for 01/01/2021 you must write new Date(2021, 0, 1).

Default

A default date input.

Editable example

<DateInput /><DateInput />

Value

A date input can have a value.

Editable example

<DateInput defaultValue={new Date(1970, 0, 5)} /><DateInput defaultValue={new Date(1970, 0, 5)} />

Presets

A date input can offer a predefined set of frequently used dates:

Editable example

<DateInput
    presets={[
        {
            text: "Last week",
            date: subWeeks(new Date(), 1)
        },
        {
            text: "Last month",
            date: subMonths(new Date(), 1)
        },
        {
            text: "Last 3 months",
            date: subMonths(new Date(), 3)
        },
        {
            text: "Last 6 months",
            date: subMonths(new Date(), 6)
        }
    ]}
/><DateInput
    presets={[
        {
            text: "Last week",
            date: subWeeks(new Date(), 1)
        },
        {
            text: "Last month",
            date: subMonths(new Date(), 1)
        },
        {
            text: "Last 3 months",
            date: subMonths(new Date(), 3)
        },
        {
            text: "Last 6 months",
            date: subMonths(new Date(), 6)
        }
    ]}
/>

By default, presets are displayed as compact but they could also be displayed as expanded:

Editable example

<DateInput
    presetsVariant="expanded"
    presets={[
        {
            text: "7 D",
            date: subWeeks(new Date(), 1)
        },
        {
            text: "1 M",
            date: subMonths(new Date(), 1)
        },
        {
            text: "3 M",
            date: subMonths(new Date(), 3)
        },
        {
            text: "6 M",
            date: subMonths(new Date(), 6)
        }
    ]}
/><DateInput
    presetsVariant="expanded"
    presets={[
        {
            text: "7 D",
            date: subWeeks(new Date(), 1)
        },
        {
            text: "1 M",
            date: subMonths(new Date(), 1)
        },
        {
            text: "3 M",
            date: subMonths(new Date(), 3)
        },
        {
            text: "6 M",
            date: subMonths(new Date(), 6)
        }
    ]}
/>

Disabled

A date input can be disabled.

Editable example

<DateInput disabled /><DateInput disabled />

Readonly

A date input can be readonly.

Editable example

<DateInput readOnly /><DateInput readOnly />

Fluid

A date input can take the width of its container.

Editable example

<DateInput fluid /><DateInput fluid />

Validation

A date input can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the input via the validationState prop.

The example below illustrates how one would validate if the date is greater than 05/01/1970.

Editable example

() => {
    const [value, setValue] = useState(null);

    const isValid = useMemo(() => !value || value > new Date(1970, 0, 5), [value]);

    return (
        <DateInput
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onDateChange={(event, newDate) => {
                setValue(newDate);
                console.log(newDate);
            }}
        />
    );
};() => {
    const [value, setValue] = useState(null);

    const isValid = useMemo(() => !value || value > new Date(1970, 0, 5), [value]);

    return (
        <DateInput
            validationState={isValid ? "valid" : "invalid"}
            value={value}
            onDateChange={(event, newDate) => {
                setValue(newDate);
                console.log(newDate);
            }}
        />
    );
};

Controlled

A date input value can be handled in controlled mode.

Editable example

() => {
    const [date, setDate] = useState(null);

    const handleDateChange = useCallback(
        (event, newDate) => {
            setDate(newDate);
            console.log(newDate);
        },
        [setDate]
    );

    return <DateInput value={date} onDateChange={handleDateChange} />
};() => {
    const [date, setDate] = useState(null);

    const handleDateChange = useCallback(
        (event, newDate) => {
            setDate(newDate);
            console.log(newDate);
        },
        [setDate]
    );

    return <DateInput value={date} onDateChange={handleDateChange} />
};

API

DateInput

usage: import { DateInput } from "@sharegate/orbit-ui";
extends: Input
StyleProps

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

defaultValue

The default value of value when uncontrolled.

Date

fluid

Whether or not the input take up the width of its container.

false | true | ResponsiveValue<boolean>

max

The maximum (inclusive) date.

Date

min

The minimum (inclusive) date.

Date

onDateChange

Called when the date change.

(event: ChangeEvent<HTMLInputElement>, date: Date) => void

`event`	React's original synthetic event.
`date`	The new date value.

presets

Array of pre-determined dates.

DatePreset[]

presetsVariant

The presets style to use.

"compact""expanded"

"compact"

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

A controlled value.

Date

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

No Preview

DateInput

Usage

Default

Value

Presets

Disabled

Readonly

Fluid

Validation

Controlled

API

DateInput