@availity/reactstrap-validation-date
Wrapper for react-date-range to work with availity-reactstrap-validation
Last updated 11 days ago by availity-bot-cicd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @availity/reactstrap-validation-date 
SYNC missed versions from official npm registry.

@availity/reactstrap-validation-date

Wrapper for react-date-range to work with availity-reactstrap-validation.

Version

Installation

npm install @availity/reactstrap-validation-date availity-reactstrap-validation reactstrap react --save

Usage

import React from 'react';
import { Label } from 'reactstrap';
import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation';
import AvDate, { AvDateField, AvDateRange, AvDateRangeField } from '@availity/reactstrap-validation-date';
import '@availity/reactstrap-validation-date/styles.scss';
// ...
<AvForm>
    <AvGroup>
        <Label for="justTheDate">My Input Label</Label>
        <AvDate name="justTheDate" required />
        <AvFeedback>Some error message</AvFeedback>
    </AvGroup>

    <AvDateField
        name="fieldWithLabel"
        label="Label Made For Me"
        required
    />

    <AvGroup>
        <Label for="justTheDateRange">My Input Label</Label>
        <AvDateRange name="justTheDateRange" required ranges/>
        <AvFeedback>Some error message</AvFeedback>
    </AvGroup>

    <AvDateField
        name="DateRangeWithLabel"
        label="Label Made For Me"
        required
    />
</AvForm>;

Note: the input callbacks (e.g. onChange) do not get called with an event like other reactstrap-validation component; just the value of the field. This is because the underlying date picker does not return the event in it's callbacks.

AvDate (Default export)

This is the underlying date without the AvGroup, Label or AvFeedback

AvDate Props

See availity-reactstrap-validation for additional props, such as name, validate, min, max, and more.

  • datepicker: Boolean. Optional. Default: true. If true, the date picker button will be shown, clicking it activates the datepicker calendar. If false, only the date input field will be displayed (useful for date of birth fields).
  • calendarIcon: Node. Optional. Default: <Icon name="calendar" />. You can optional change the icon the calendar renders in the case you don't use the availity-uikit icons.
  • min: string. Optional. Minimum date to allow the datepicker and input to take. You can either pass the min here or in the validate object if you want a custom error message with it.
  • max: string. Optional. Max date to allow the datepicker and input to take. You can either pass the max here or in the validate object if you want a custom error message with it.

AvDate Example usage

import React from 'react';
import { Label } from 'reactstrap';
import { AvForm, AvGroup, AvFeedback } from 'availity-reactstrap-validation';
import AvDate from '@availity/reactstrap-validation-date';
// ...
<AvForm>
    <AvGroup>
        <Label for="justFieldAndPicker">My Input Label</Label>
        <AvDate
            name="justFieldAndPicker"
            required
        />
        <AvFeedback>Some error message</AvFeedback>
    </AvGroup>
</AvForm>;

AvDateField

Like AvField, but for dates with a date picker

AvDateField Props

See availity-reactstrap-validation for additional props, such as name, validate, min, max, and more.

  • datepicker: Boolean. Optional. Default: true. If true, the date picker button will be shown, clicking it activates the datepicker calendar. If false, only the date input field will be displayed (useful for date of birth fields).
  • min: string. Optional. Minimum date to allow the datepicker and input to take. You can either pass the min here or in the validate object if you want a custom error message with it.
  • max: string. Optional. Max date to allow the datepicker and input to take. You can either pass the max here or in the validate object if you want a custom error message with it.

AvDateField Example usage

import React from 'react';
import { AvDateField } from '@availity/reactstrap-validation-date';
// ...
<AvForm>
    <AvDateField
        name="fieldWithLabel"
        label="Label Made For Me"
        required
    />
</AvForm>;

AvDateRange

A date range, consists of 2 fields, a start date and an end date. This is the underlying date-range without the AvGroup, Label or AvFeedback.

AvDateRange Props

See availity-reactstrap-validation for additional props, such as name, validate, min, max, and more.

  • start: Object. Required. and object which will be spread on the start date input. It must contain the name prop as required by availity-reactstrap-validation. It can contain additional validations as well.
  • end: Object. Required. and object which will be spread on the end date input. It must contain the name prop as required by availity-reactstrap-validation. It can contain additional validations as well.
  • distance: Object. Optional. Object containing the min and max distance the start and end dates are allowed to be apart from each other. See example below.
  • calendarIcon: Node. Optional. Default: <Icon name="calendar" />. You can optional change the icon the calendar renders in the case you don't use the availity-uikit icons.
  • min: string. Optional. Minimum date to allow the datepicker and input to take. You can either pass the min here or in the validate object if you want a custom error message with it.
  • max: string. Optional. Max date to allow the datepicker and input to take. You can either pass the max here or in the validate object if you want a custom error message with it.
  • ranges: object, boolean, array. Optional. Renders list of ranges preset to the left of the calendar
    • boolean - true will render the default ranges
    • array<string> - Will pick only the selected date ranges by name. See above default ranges for list of names. ex. ["Today"]
    • object - list or object of ranges. structure is noted below
  • autoSync: boolean. Optional. 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
{
    'Tomorrow': {
        startDate: now => now.add(1,'day'),
        endDate: now => now.add(1,'day')
    }
}

AvDateRange Example usage

import React from 'react';
import AvApi from '@availity/api-axios';
import { AvResourceDate } from '@availity/reactstrap-validation-date';
import '@availity/reactstrap-validation-date/styles.scss';
// ...
const avCustomResource = new AvApi({ name: 'my-custom-resource' });
// ...
<AvForm>
    <AvDateRange
        start={{name: 'date.start'}}
        end={{name: 'date.end'}}
        resource={avCustomResource}
        distance={{
            min: {
                value: 3,
                units: 'days'
            },
            max: {
                value: 1,
                units: 'month'
            }
        }}
        ranges={{
            'Last 10 Days': {
                startDate: now => now.add(-9, 'd'),
                endDate: now => now,
            },
            'Last 20 Days': {
                startDate: now => now.add(-19, 'd'),
                endDate: now => now,
            },
            'Tomorrow': {
                startDate: now => now.add(1, 'd'),
                endDate: now => now.add(1, 'd'),
            },
        }}
        required
    />
</AvForm>;

AvDateRangeField

Like AvField, but for a date range with a date range picker

AvDateRangeField Props

See availity-reactstrap-validation for additional props, such as name, label, validate, min, max, and more.

  • start: Object. Required. and object which will be spread on the start date input. It must contain the name prop as required by availity-reactstrap-validation. It can contain additional validations as well.
  • end: Object. Required. and object which will be spread on the end date input. It must contain the name prop as required by availity-reactstrap-validation. It can contain additional validations as well.
  • distance: Object. Optional. Object containing the min and max distance the start and end dates are allowed to be apart from each other. See example below. Note that these values are relative to today's date, not the min/max props.
  • defaultValues: Object. Optional. Object containing the start and end, the prefilled start and end dates. See example below. Note that these values are relative to today's date, not the min/max props.
  • min: string. Optional. Minimum date to allow the datepicker and input to take. You can either pass the min here or in the validate object if you want a custom error message with it.
  • max: string. Optional. Max date to allow the datepicker and input to take. You can either pass the max here or in the validate object if you want a custom error message with it.
  • autoSync: boolean. Optional. 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

Make sure to import the SCSS as well!

AvDateRangeField Example usage

import React from 'react';
import {AvDateRangeField} from '@availity/reactstrap-validation-date';
import { AvForm } from 'availity-reactstrap-validation';
import '@availity/reactstrap-validation-date/styles.scss';
// ...
<AvForm>
    <AvDateRangeField
        name="dateRange" //required
        start={{name: 'date.start'}}
        end={{name: 'date.end'}}
        ranges
    />
</AvForm>

AvDateRangeField Comprehensive Example

This example contains Min/Max dates, default values, and distance requirements for the selected dates.

import React from 'react';
import moment from 'moment';
import {AvDateRangeField} from '@availity/reactstrap-validation-date';
import { AvForm } from 'availity-reactstrap-validation';
import '@availity/reactstrap-validation-date/styles.scss';
// ...

// set max date to 5 days before today
const maxDate = moment();
maxDate.dayOfYear(maxDate.dayOfYear() - 5);
const maxDateString = maxDate.format('YYYY-MM-DD');
// ...
<AvForm>
    <AvDateRangeField
        name="dateRange" //required
        label="Dates of Service"
        min="2019-01-01"
        max={maxDateString}
        start={{name: 'date.start'}}
        end={{name: 'date.end'}}
        distance={{
            min: {
                value: 2,
                units: 'days'
            },
            max: {
                value: 1,
                units: 'month'
            }
        }}
        defaultValues={{
            start: {
                value: -14, 
                units: 'days'
            }, 
            end: {
                value: -7, units: 'days'
            }
        }}
        required
    />
</AvForm>

Current Tags

  • 3.1.7-alpha.99                                ...           canary (3 months ago)
  • 4.0.0                                ...           latest (11 days ago)
  • 0.0.0-t325224b2                                ...           unstable (2 years ago)

76 Versions

  • 4.0.0                                ...           11 days ago
  • 3.1.7-alpha.99                                ...           3 months ago
  • 3.1.7-alpha.96                                ...           3 months ago
  • 3.1.7-alpha.95                                ...           3 months ago
  • 3.1.7-alpha.93                                ...           3 months ago
  • 3.1.7-alpha.91                                ...           4 months ago
  • 3.1.7-alpha.88                                ...           4 months ago
  • 3.1.7-alpha.85                                ...           4 months ago
  • 3.2.22                                ...           5 months ago
  • 3.2.21                                ...           7 months ago
  • 3.2.20                                ...           7 months ago
  • 3.2.19                                ...           7 months ago
  • 3.2.18                                ...           7 months ago
  • 3.2.17                                ...           8 months ago
  • 3.2.16                                ...           8 months ago
  • 3.2.15                                ...           8 months ago
  • 3.2.14                                ...           8 months ago
  • 3.2.13                                ...           8 months ago
  • 3.2.12                                ...           8 months ago
  • 3.2.10                                ...           8 months ago
  • 3.2.9                                ...           8 months ago
  • 3.2.8                                ...           8 months ago
  • 3.2.7                                ...           8 months ago
  • 3.2.6                                ...           8 months ago
  • 3.2.5                                ...           8 months ago
  • 3.2.4                                ...           10 months ago
  • 3.2.3                                ...           10 months ago
  • 3.2.3-alpha.5                                ...           10 months ago
  • 3.2.2                                ...           10 months ago
  • 3.2.1                                ...           a year ago
  • 3.2.0                                ...           a year ago
  • 3.1.9                                ...           a year ago
  • 3.1.8                                ...           a year ago
  • 3.1.7                                ...           a year ago
  • 3.1.7-alpha.60                                ...           a year ago
  • 3.1.7-alpha.59                                ...           a year ago
  • 3.1.6                                ...           a year ago
  • 3.1.5                                ...           a year ago
  • 3.1.4                                ...           a year ago
  • 3.1.3                                ...           a year ago
  • 3.1.2                                ...           a year ago
  • 3.1.1                                ...           a year ago
  • 3.1.0                                ...           a year ago
  • 3.0.6-alpha.16                                ...           a year ago
  • 3.0.5                                ...           a year ago
  • 3.0.4                                ...           a year ago
  • 3.0.3                                ...           a year ago
  • 3.0.2                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.1-alpha.3                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 3.0.0-alpha.30                                ...           a year ago
  • 3.0.0-alpha.29                                ...           a year ago
  • 3.0.0-alpha.25                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.7.12                                ...           a year ago
  • 1.7.11                                ...           a year ago
  • 1.7.10                                ...           2 years ago
  • 1.7.9                                ...           2 years ago
  • 1.7.8                                ...           2 years ago
  • 1.7.8-alpha.5                                ...           2 years ago
  • 1.7.8-alpha.4                                ...           2 years ago
  • 1.7.7                                ...           2 years ago
  • 1.7.6                                ...           2 years ago
  • 1.7.5                                ...           2 years ago
  • 1.7.4                                ...           2 years ago
  • 1.7.3                                ...           2 years ago
  • 1.7.2                                ...           2 years ago
  • 1.7.1                                ...           2 years ago
  • 1.7.0                                ...           2 years ago
  • 0.0.0-t325224b2                                ...           2 years ago
  • 1.6.0                                ...           2 years ago
  • 1.5.0                                ...           2 years ago
  • 1.4.0                                ...           2 years ago
Downloads
Today 0
This Week 76
This Month 167
Last Day 0
Last Week 15
Last Month 1
Dependencies (7)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |