@axa-fr/react-toolkit-form-input-date
v3.0.2
Published
1. [Date](#date) 2. [DateInput](#dateinput) 1. [DateInput Required](#dateinput-required)
Downloads
513
Maintainers
Keywords
Readme
@axa-fr/react-toolkit-form-input-date
Date
Installation
npm i @axa-fr/react-toolkit-form-input-date
Import
import { Date } from '@axa-fr/react-toolkit-form-input-date';
import '@axa-fr/react-toolkit-form-input-date/dist/af-date.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const MyCustomDate = () => (
<Date
id="uniqueid"
name="date"
value={new Date('2021-12-17')}
onChange={() => {
console.log('your function');
}}
/>
);
DateInput
Installation
npm i @axa-fr/react-toolkit-form-input-date
Import
import { DateInput } from '@axa-fr/react-toolkit-form-input-date';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-input-date/dist/af-date.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const MyDateInput = () => (
<form className="af-form" name="myform">
<DateInput
id="uniqueid"
label="Place name"
name="placeName"
locale="fr-fr"
onChange={(date) => {
console.log(date.getDay());
}}
helpMessage="jj/mm/aaaa"
message=""
value={Date('2021-12-17')}
messageType={MessageTypes.success}
forceDisplayMessage={true}
/>
</form>
);
export default MyDateInput;
DateInput Required
To achieve DateInput Required, you need to add a classModifier prop like this :
classModifier = 'required';
to the DateInput component