date-input

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

Props	description	optional?	comment
shouldValidate	toggle whether validate the date	yes	default false, set it true when you need validate your date
value	the initial date Value	yes	format "YYYY-MM-DD"
onChange	callback function	yes	call when you type in any field
onBlur	callback function	yes	call when you blur the whole DateInput
minDate	the min date	yes	if the date you fill in is before minDate will get error, format "YYYY-MM-DD"
minDateError	customized errorMessage	yes	default errorMessage is "The date is too early"
maxDate	the max date	yes	if the date you fill in is after maxDate will get error, format "YYYY-MM-DD"
maxDateError	customized errorMessage	yes	default errorMessage is "The date is too late"
invalidError	customized errorMessage	yes	default errorMessage is "please input a valid date"
rules	customized validate rules	yes	the format should follow [{checker: value => fun(val), errorMessage: 'a string'}]

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

• add props minDate and maxDate which can be exactly date or relative date.
• add more validate Rules for user to choose, like [isFutureDate, isPastDate]
• 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