Date Range Picker

<State initial={undefined}>
    {([date, setDate]) => (
        <Form>
            <DateRangePicker
                open
                disableCloseOnClickOutside
                value={date}
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>

<State initial={undefined}>
    {([date, setDate]) => (
        <Form>
            <DateRangePicker
                open
                disableCloseOnClickOutside
                value={date}
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>

States

Default

<State initial={{ start: new Date('02/09/21'), end: new Date('02/16/21') }}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label='Default value'
                description="Description goes here..."
                value={date}
                onChange={(v) => setDate(v)}
            />
            <Form.DateRangePicker
                label='Min and Max Date'
                minDate={new Date('02/01/21')}
                maxDate={new Date('02/20/21')}
                value={date}
                onChange={(v) => setDate(v)}
                open
                disableCloseOnClickOutside
            />
        </Form>
    )}
</State>

<State initial={{ start: new Date('02/09/21'), end: new Date('02/16/21') }}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label='Default value'
                description="Description goes here..."
                value={date}
                onChange={(v) => setDate(v)}
            />
            <Form.DateRangePicker
                label='Min and Max Date'
                minDate={new Date('02/01/21')}
                maxDate={new Date('02/20/21')}
                value={date}
                onChange={(v) => setDate(v)}
                open
                disableCloseOnClickOutside
            />
        </Form>
    )}
</State>

Placeholder

<State initial={{}}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label='with Placeholder'
                value={date}
                placeholder="Select the event's date range"
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>

<State initial={{}}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label='with Placeholder'
                value={date}
                placeholder="Select the event's date range"
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>

Error

For each input, errors for exceeding min or max date is handled internally using a tooltip. For errors that are external, use Form.DateRangePicker's error prop to pass in error and the message.

<State initial={{ start: new Date('02/09/21'), end: new Date('02/16/21') }}>
    {([date, setDate]) => (
        <>
        <Form style={{ height: 540 }}>
            <Form.DateRangePicker
                label='Exceed Min and Max Date'
                minDate={new Date('02/10/21')}
                maxDate={new Date('02/12/21')}
                value={date}
                onChange={(v) => setDate(v)}
                open
                disableCloseOnClickOutside
            />
        </Form>
        <Form>
            <Form.DateRangePicker
                label='Externally triggered'
                value={date}
                onChange={(v) => setDate(v)}
                error
                open
                disableCloseOnClickOutside
            />
        </Form>
        </>
    )}
</State>

<State initial={{ start: new Date('02/09/21'), end: new Date('02/16/21')