Table of Contents

1. date-input
2. Examples
   1. customize invalidError
   2. add minDate validate and customized its errorMessage
   3. add maxDate validate and customized its errorMessage
   4. customize the whole validate rules, p.s. the default rules will lost
3. demo gif
   1. type your date
   2. valdate when you blur it
   3. validate when you type the full date
4. Have a try ?
5. Import in your project
6. Roadmap

date-input

a react component for date input, totally manual input field

available props

currently, we have default validate rules

let defaultRules = [
  {
    checker: value => moment(dateValue, 'YYYY-MM-DD', true).isValid(),
    errorMessage: this.props.invalidError || 'please input a valid date',
  },
  //only when you pass minDate
  {
    checker: (value, option) => moment(dateValue).isSameOrAfter(option.minDate),
    errorMessage: this.props.minDateError || 'The date is too early',
  },
  //only validate when you pass maxDate
  {
    checker: (value, option) => moment(dateValue).isSameOrBefore(option.maxDate),
    errorMessage: this.props.maxDateError || 'The date is too late',
  },
];

Also, you are allowed to pass customized rules, just following the format above.

Examples

customize invalidError

<DateInput shouldValidate invalidError="it is invalid date" />

add minDate validate and customized its errorMessage

<DateInput shouldValidate minDate="1990-01-01" minDateError="should before 1990-01-01" />

add maxDate validate and customized its errorMessage

<DateInput shouldValidate maxDate={moment().format('YYYY-MM-DD')} maxDateError="your birthday should be a past date" />

customize the whole validate rules, p.s. the default rules will lost

<DateInput shouldValidate rules={[{checker: value => moment().isBefore(value), errorMessage: 'the date should be the future date'}]} />

demo gif

type your date

valdate when you blur it

validate when you type the full date

Have a try ?

yarn install
yarn storybook

then feel free to have a try

Import in your project

yarn add date-input

then date-input will appear in your package.json,

import DateInput from 'date-input';

import this component in your source code

Roadmap

• [X] add props minDate and maxDate which can be exactly date or relative date.
• [X] add more validate Rules for user to choose, like [isFutureDate, isPastDate]
• [X] allow user to pass into customized validate rules, error messages
• [] support date format like MM/YYYY, which is useful like expire date of credit card
• [] support customized style