2.4.5 • Published 5 years ago
date-input v2.4.5
Table of Contents
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
- 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