Datepicker

Le composant Datepicker permet à l'utilisateur de sélectionner une date.

• dateFormat, format d'entrée de la date (YYYY-MM-DD | YYYY | YYYY-MM)
• min, date minimale
• max, date maximale

Le choix a été fait pour ce composant de ne plus utiliser un datepicker natif, car le comportement était trop différent en fonction des navigateurs et freiné l'entrée des informations par les enquêteurs. Aussi, cela permet le support de format qui n'était pas forcément pris en charge par les navigateurs à l'heure actuelle.

Source

{
  "components": [
    {
      "componentType": "Datepicker",
      "max": "2100-01-01",
      "dateFormat": "YYYY-MM-DD",
      "conditionFilter": {
        "type": "VTL",
        "value": "true"
      },
      "label": {
        "type": "VTL|MD",
        "value": "\"➡ 1. \" || \"Birth day\""
      },
      "mandatory": false,
      "min": "1900-01-01",
      "response": {
        "name": "Q1"
      },
      "id": "l7ovm2rv",
      "page": "1",
      "controls": [
        {
          "criticality": "ERROR",
          "errorMessage": {
            "type": "VTL|MD",
            "value": "\"Le format de la date YYYY-MM-DD n'est pas respecté.\""
          },
          "control": {
            "type": "VTL",
            "value": "cast(Q1, date,  \"YYYY-MM-DD\")"
          },
          "id": "l7ovm2rv-format"
        },
        {
          "criticality": "ERROR",
          "errorMessage": {
            "type": "VTL|MD",
            "value": "\"La date saisie doit être comprise entre 1900-01-01 et 2100-01-01.\""
          },
          "control": {
            "type": "VTL",
            "value": "not(cast(Q1, date, \"YYYY-MM-DD\")>cast(\"2100-01-01\", date, \"YYYY-MM-DD\") or cast(Q1, date,\"YYYY-MM-DD\")<cast(\"1900-01-01\", date, \"YYYY-MM-DD\"))"
          },
          "id": "l7ovm2rv-formatborne"
        }
      ]
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "values": {
        "COLLECTED": "1974-03-15",
        "EDITED": null,
        "INPUTTED": null,
        "FORCED": null,
        "PREVIOUS": null
      },
      "name": "Q1"
    }
  ],
  "pagination": "question",
  "resizing": {},
  "label": {
    "type": "VTL|MD",
    "value": "\"Example DatePicker\""
  },
  "lunaticModelVersion": "2.2.13",
  "modele": "DATEPICKER",
  "enoCoreVersion": "2.3.10",
  "generatingDate": "05-09-2022 14:37:43",
  "missing": false,
  "id": "l7ovbqou",
  "maxPage": "1"
}

Data

{}

Code

import {
  type LunaticData,
  type LunaticSource,
  useLunatic,
  LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'

type Props = {
  source: LunaticSource;
  data: LunaticData;
};

export function FormRenderer({ source, data }: Props) {
  const { getComponents, Provider } = useLunatic(source, data, {
    initialPage: '1',
  });
  return (
    <Provider>
      <LunaticComponents components={getComponents()} />
    </Provider>
  );
}

Rendu

Loading...