bootstrap-datepicker

Ce sujet est résolu
Default
,

Bonjour,

Voila j'ai un petit soucis pour mettre en place un date picker start-end avec symony...
J'ai mis en place bootstrap-datepiker, mais il ne s'affiche pas, voila ce que j'ai fait:

Ma vue:

                            {{ form_start(form) }}
                            {{ form_widget(form) }}

                            <div class="input-daterange input-group" id="datepicker">
                                {{ form_row(form.date_debut) }}
                                {{ form_row(form.date_fin) }}
                            </div>
                            <button class="btn btn-primary">Créer</button>
                            {{ form_end(form) }}

Mon form:

   $builder
             ->add('nom')
            ->add('date_debut', DateType::class, [ 'widget' => 'single_text',  'html5' => false, 'attr' => ['name'=>'start', 'class' => 'input-sm form-control']])
            ->add('date_fin', DateType::class, [ 'widget' => 'single_text',  'html5' => false, 'attr' => ['name'=>'end', 'class' => 'input-sm form-control']]);                     

Mon js:

<script>
        $('#sandbox-container .input-daterange').datepicker({
        format: "dd/mm/yy",
        startView: 1,
        todayBtn: "linked",
        clearBtn: true,
        language: "fr",
        multidate: false,
        todayHighlight: true,
        toggleActive: true
    });
</script>

Je me suis appuier sur la sandbox:
https://uxsolutions.github.io/bootstrap-datepicker/?markup=range&format=dd%2Fmm%2Fyy&weekStart=&startDate=&endDate=&startView=1&minViewMode=0&maxViewMode=4&todayBtn=linked&clearBtn=true&language=fr&orientation=auto&multidate=false&multidateSeparator=&todayHighlight=on&keyboardNavigation=on&forceParse=on&toggleActive=on#sandbox

Du coup j'ai mes champs date, mais je n'ai pas de datepicker qui s'affiche...
Quelqu'un aurais t'il une idée?
Jquery est bien en place.

Merci de votre retour

jojo

2 Réponse

17162
,

Bonjour.
Pour commencer, est-ce que tu as bien un élément avec comme valeur pour son attribut id sandbox-container ?
Si oui montres nous le code où se trouve cet élément.
Ensuite, tu ne dois pas uniquement attacher le comportement de datepicker sur un container, mais sur l'élément en question, car si par exemple tu regardes sur le lien que tu nous montre, ils attachent le comportement sur les éléments input qui sont situé dans l'élément ayant comme valeur de son attribut id sandbox-container, donc ils ciblent tous les éléments input de ce container, essaies donc par exemple de remplacer $('#sandbox-container .input-daterange') par $('#sandbox-container .input-daterange input').

Default
,

Bonjour,
Merci pour ton retour, en effet j'ai refait le tour, et j'ai trouvé...
La prochaine fois je relirais le code source en sortie de navigateur avant de demander...

Bonne journé.