@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