<DateRange />

A date range, consisting of 2 fields, a start date and an end date, without a Label or Feedback

Example

import React from 'react';
import { Form } from '@availity/form';
import { DateRange } from '@availity/date';
import { dateRange } from '@availity/yup';
import '@availity/date/styles.scss';
import { Button } from 'reactstrap';
import moment from 'moment';
import * as yup from 'yup';

const Example = () => (
  <Form
    initialValues={{
      dateOfService: undefined,
    }}
    onSubmit={(values) => console.log(values)}
    validationSchema={yup.object().shape({
      dateOfService: dateRange(
        {
          min: moment().subtract(7, 'day').format('MM/DD/YYYY'),
          max: moment().add(7, 'day').format('MM/DD/YYYY'),
          format: 'MM/DD/YYYY',
        },
        `Date must be between ${moment()
          .subtract(7, 'day')
          .format('MM/DD/YYYY')} and ${moment()
          .add(7, 'day')
          .format('MM/DD/YYYY')}`
      )
        .typeError({ message: 'This field is invalid.' })
        .required('This field is required.'),
    })}
  >
    <DateRange
      id="dateOfService"
      name="dateOfService"
      min={{ value: 7, units: 'day' }}
      max={{ value: 7, units: 'day' }}
    />
    <Button color="primary" type="submit">
      Submit
    </Button>
  </Form>
);

Live example

Storybook

Props

See react-dates for additional props

name: string

The name of the field. Will be the key of the selected dates that come through in the values of the onSubmit callback.

min?: string | LimitType

Used in conjunction with max to derive isOutsideRange prop from react-dates and selectable year options in datepicker. Dates outside the allowed range will not be clickable in datepicker.

{
  // LimitType
  "value": "12",
  "units": "day"
}

max?: string | LimitType

Used in conjunction with min to derive isOutsideRange prop from react-dates and selectable year options in datepicker. Dates outside the allowed range will not be clickable in datepicker.

{
  // LimitType
  "value": "12",
  "units": "day"
}

disabled?: boolean

Whether the date range is disabled.

onPickerFocusChange?: ({ focusedInput: string }) => void

Function to be run when focus on the input changes. focusedInput contains the id of the focused field.

Possible Values:

• startId - the id of the start field. "<name>-start"
• endId - the id of the end field. "<name>-end"
• undefined - the date range was unfocused

format?: string

How to format date value in onSubmit callback. Must be a format recognized by moment. Default: MM/DD/YYYY

datepickerProps?: SingleDatePickerShape

Props to be spread onto the datepicker component from react-dates.

autoSync?: boolean

Toggle whether the other date should be automatically synced to the selected date when focus changes. Dates are only auto synced the first time the input is touched and if the date field to auto sync is empty

Props to be spread onto the datepicker component from react-dates.

ranges?: boolean | string[] | {[key:string]:MomentDateRange}

Show preset date ranges when calendar is visible. Accepts boolean to display default ranges. If string[] will strip subset of ranges off defaults. If object will overwrite the default ranges.

interface MomentDateRange {
  startDate: Moment;
  endDate: Moment;
}

openDirection?: string

Set which direction the date picker renders. Possible values are up and down. Default: down

allowInvalidDates?: boolean

Defaults to false, with this behavior the onInputChange handler will not pass through invalid dates to formik. By setting this prop to true, you can allow formik to handle invalid dates. Very useful for getting errors from non-required date range components.