Création d'un date picker avec Synfony ux react
Bonjour à tous, je suis nouveau sur developpez.com, et je voudrait faire un date picker react sur un projet Synfony.
Je suis parvenu tout d'abord afaire des composant React avec https://headlessui.com/.
Maintenant avec ce tuto,
https://reactjsexample.com/airbnb-st...lt-with-react/
je voudrait faire un date picker.
J'ai donc fait le:
Code:
npm i @bcad1591/react-date-picker
puis j'ai créer un fichier Calandar.jsx dans le fichier assets/controller, la ou mes précédant script fonctionne.
dont voici le code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| import React from 'react';
import { createRoot } from 'react-dom/client';
import {
DatePicker,
DatePickerProvider,
useDatePickGetter,
useDatePickReset,
} from '@bcad1591/react-date-picker';
const container = document.getElementById('root');
const root = createRoot(container);
function App() {
const { pickedDates } = useDatePickGetter();
const resetFunc = useDatePickReset();
return (
<div>
<DatePicker disablePreviousDays />
<hr />
<div>{pickedDates.firstPickedDate?.toString()}</div>
<div>{pickedDates.secondPickedDate?.toString()}</div>
<button type="button" onClick={resetFunc}>
Reset
</button>
</div>
);
}
root.render(
<DatePickerProvider>
<App />
</DatePickerProvider>,
); |
Dans le twig, la ou ca diffère dans du react normal je met la ligne:
Code:
<div {{ react_component('Calandar') }}></div>
Puis je compile avec npm run build
et je n'ai pas d'erreur.
Quand le lance la page je n'ai rien qui apparait et dans le code source de la page je trouve bien la balise
Code:
<div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="Calandar"></div>
Merci de votre aide!
Cordialement
