<DateRangeField />
The same as DateRange
but with a Label
that appears above the input and a Feedback
that appears below the input.
Example
import React from 'react';
import { Form } from '@availity/form';
import { DateRangeField } from '@availity/date';
import '@availity/date/styles.scss';
import { Button } from 'reactstrap';
import { dateRange } from '@availity/yup';
import moment from 'moment';
import * as yup from 'yup';
const Example = () => (
<Form
initialValues={{
dateOfService: {
startDate: moment().format('YYYY-MM-DD'),
endDate: moment().format('YYYY-MM-DD'),
},
}}
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('This field is invalid.')
.required('This field is required.'),
})}
>
<DateRangeField
id="dateOfService"
label="Date of Service"
name="dateOfService"
min={{ value: 7, units: 'day' }}
max={{ value: 7, units: 'day' }}
/>
<Button color="primary" type="submit">
Submit
</Button>
</Form>
);