@paprika/date-input

Description

The DateInput component allows users to enter and display a date.

Installation

yarn add @paprika/date-input

or with npm:

npm install @paprika/date-input

Props

DateInput

| Prop | Type | required | default | Description | | -------------------- | ---------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------ | | hasError | bool | false | false | If the value of <input> is valid or not. | | dateFormat | string | false | "MM/DD/YYYY" | Date format used while entering and parsing user input. | | date | instanceOf | false | null | Selected date in moment object. | | humanFormat | string | false | undefined | Date format used while displaying date. It should be human-friendly and spelled out, default is MMMM DD,YYYY | | onChange | func | false | () => {} | Callback when date is inputed. Will be called on blur or enter key press. | | onChangePossibleDate | func | false | () => {} | Callback when user inputs date. Will be called after every key up event. | | onError | func | false | () => {} | Error callback. Will be called on blur or enter key press if inputted date can't be parsed. | | onClick | func | false | () => {} | Callback to be executed when the dateInput is clicked or activated by keyboard. | | denyConfirmation | func | false | () => false | Guard function. If it returns true - confirmation will be prevented. | | beforeConfirmation | func | false | () => {} | Callback when confirm |

Usage

import DateInput from "@paprika/date-input";

<DateInput dateFormat="MM/DD/YYYY" />;

Note: Please use <L10n /> component to wrap <DateInput /> in your application.

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG