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';

const MyCustomDate = () => (
  <Date
    id="uniqueid"
    name="date"
    value={new Date('2021-12-17')}
    onChange={() => {
      console.log('your function');
    }}
  />
);

import { DateInput } from '@axa-fr/react-toolkit-form-input-date';
import { InputConstants, 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';

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}
      classNameContainerLabel={
        InputConstants.defaultProps.classNameContainerLabel
      }
      classNameContainerInput={
        InputConstants.defaultProps.classNameContainerInput
      }
    />
  </form>
);
export default MyDateInput;

classModifier = 'required';