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

DateRangeInput

An specialized input to enter a range of dates.

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

Usage

Default

A default date range input.

Editable example

<DateRangeInput /><DateRangeInput />

Value

A date range input can have values.

Editable example

<DateRangeInput defaultStartDate={new Date(1970, 0, 5)} defaultEndDate={new Date(2021, 0, 5)} /><DateRangeInput defaultStartDate={new Date(1970, 0, 5)} defaultEndDate={new Date(2021, 0, 5)} />

Presets

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

Editable example

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

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

Editable example

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

Disabled

A date range input can be disabled.

Editable example

<DateRangeInput disabled /><DateRangeInput disabled />

Readonly

A date range input can be readonly.

Editable example

<DateRangeInput readOnly /><DateRangeInput readOnly />

Fluid

A date range input can take the width of its container.

Editable example

<DateRangeInput fluid /><DateRangeInput fluid />

Validation

A date range 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 between 05/01/1970 and 05/01/2021.

Editable example

() => {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);

    const isValid = useMemo(
        () =>
            (!startDate || startDate >= new Date(1970, 0, 5)) &&
            (!endDate || endDate <= new Date(2021, 0, 5)),
        [startDate, endDate]
    );

    return (
        <DateRangeInput
            validationState={isValid ? "valid" : "invalid"}
            startDate={startDate}
            endDate={endDate}
            onDatesChange={(event, newStartDate, newEndDate) => {
                setStartDate(newStartDate);
                setEndDate(newEndDate);

                console.log(newStartDate, newEndDate);
            }}
        />
    );
};() => {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);

    const isValid = useMemo(
        () =>
            (!startDate || startDate >= new Date(1970, 0, 5)) &&
            (!endDate || endDate <= new Date(2021, 0, 5)),
        [startDate, endDate]
    );

    return (
        <DateRangeInput
            validationState={isValid ? "valid" : "invalid"}
            startDate={startDate}
            endDate={endDate}
            onDatesChange={(event, newStartDate, newEndDate) => {
                setStartDate(newStartDate);
                setEndDate(newEndDate);

                console.log(newStartDate, newEndDate);
            }}
        />
    );
};

Form

A date range input can be used in a form by providing a name prop. When doing so, the name attribute of each inputs will be prefixed by the specified name prop and will respectively be suffixed by "-start-date" and "-end-date".

For example, if the provided name prop is "filter" the start date input name attribute will be "filter-start-date" and the end date input name attribute will be "filter-end-date".

Editable example

<form>
    <DateRangeInput name="filter" />
</form><form>
    <DateRangeInput name="filter" />
</form>

Controlled

A date range input startDate and endDate can be handled in controlled mode.

Editable example

() => {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);

    const handleDatesChange = useCallback(
        (event, newStartDate, newEndDate) => {
            setStartDate(newStartDate);
            setEndDate(newEndDate);
            console.log(newStartDate, newEndDate);
        },
        [setStartDate, setEndDate]
    );

    return (
        <DateRangeInput startDate={startDate} endDate={endDate} onDatesChange={handleDatesChange} />
    );
};() => {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);

    const handleDatesChange = useCallback(
        (event, newStartDate, newEndDate) => {
            setStartDate(newStartDate);
            setEndDate(newEndDate);
            console.log(newStartDate, newEndDate);
        },
        [setStartDate, setEndDate]
    );

    return (
        <DateRangeInput startDate={startDate} endDate={endDate} onDatesChange={handleDatesChange} />
    );
};

API

DateRangeInput

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

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

defaultEndDate

The initial value of end date.

Date

defaultStartDate

The initial value of start date.

Date

disabled

Whether or not the input is disabled.

falsetrue

endDate

A controlled end date value.

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

onDatesChange

Called when the date(s) are / is applied.

(event: SyntheticEvent<Element, Event>, startDate: Date, endDate: Date) => void

`event`	React's original event.
`startDate`	Selected start date.
`endDate`	Selected end date.

placeholder

Temporary text that occupies both date inputs when they are empty.

string

"dd/mm/yyyy"

presets

Array of pre-determined dates range.

DateRangePreset[]

presetsVariant

The presets style to use.

"compact""expanded"

readOnly

Whether or not the input is readonly.

falsetrue

required

Whether or not a user input is required before form submission.

falsetrue

startDate

A controlled start date value.

Date

validationState

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

"valid""invalid"

No Preview

DateRangeInput

Usage

Default

Value

Presets

Disabled

Readonly

Fluid

Validation

Form

Controlled

API

DateRangeInput