@axa-fr/react-toolkit-form-input-date

@axa-fr/react-toolkit-form-input-date

• Date
• DateInput
  • DateInput Required

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