Discussion :

[dubitoph]

Bonjour,

Afin d'utiliser un calendrier sur un champs date, je cherche à faire appel à datepicker. Cependant, lors de la génération de mon formulaire, j'obtiens l'erreur suivante :

jquery.js:3827 Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (addAdvert.js:52)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)
(anonymous) @ addAdvert.js:52
mightThrow @ jquery.js:3534
process @ jquery.js:3602
setTimeout (async)
jQuery.readyException @ jquery.js:3826
(anonymous) @ jquery.js:3846
mightThrow @ jquery.js:3534
process @ jquery.js:3602
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
process @ jquery.js:3622
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
ready @ jquery.js:3878
completed @ jquery.js:3888

Quelqu'un aurait une idée? Mes recherches n'ont rien donné jusqu'ici :-(

Merci d'avance pour votre aide!

[JeromeDz]

dans ta page, ctrl+u
clique sur le lien datepicker.min.js voir si le lien est bon

copie colle le code qui lie le fichier datepicker.min.js et jquery, bootstrap, ...

[MehrezLabidi]

Bonjour,

le fameux message $(...). is not a function .. peux arriver pour divers raisons:
- la libraire datepicker n'est pas appelée
- la libraire JQuery n'est pas appelée
- la libraire datepicker est appelé avant JQuery
- plusieurs version de JQuery sont appelés ce qui a causé un conflit de version
..

[dubitoph]

Bonjour,

Merci pour votre aide.

Dans les sources, je n'ai pas de lien vers le fichier datepicker.min.

Voici comment j'ai procédé dans mon code :

Dans mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$builder->add('manufactureDate', DateType::class, array('widget' => 'single_text', 'html5' => false , 'attr' => [ 'class' => 'js-datepicker' ],));

Dans mon template :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        {{ form_label(formAdvert.vehicle.manufactureDate, 'Date de construction du véhicule', {'label_attr': {'class': 'foo'}}) }}
        {{ form_errors(formAdvert.vehicle.manufactureDate) }}
        {{ form_widget(formAdvert.vehicle.manufactureDate) }}

Dans mon fichier js lié à mon template :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$ ( document ). ready ( function () {
    // you may need to change this code if you are not using Bootstrap Datepicker
    $ ( '.js-datepicker' ). datepicker ({
        format : 'yyyy-mm-dd'
        //format : 'ddmm-YYYY'
    });
});

Dans mon fichier js lié à mon template de base :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */
 
require('bootstrap');
 
 // any CSS you require will output into a single css file (app.css in this case)
import '../css/app.scss';
 
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
import $ from 'jquery';
 
import greet from './greet';
 
$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

Donc, dans les sources générées, je ne retrouve pas (de manière logique selon moi, mais je me trompe peut-être), un lien vers datepicker.min

[JeromeDz]

bonjour,

pour utiliser une bibliothèque javascript il faut la lier.
si dans ton code source tu n'a pas de lien avec la bibliothèque et ses dépendances (jquery), tu ne peux pas l'utiliser.

je t'invite a lire le mode d'emploi de la dite bibliothèque.

[dubitoph]

C'est ce que j'ai fait, sans succès