Discussion :

[bouboule22]

Bonjour,

Je fais appel à vous car je suis dans un petit projet en symfony et je débute..J'ai réalisé un formulaire de réservation mais j'ai un problème car ma date de retour peut être antérieure à ma date de départ, j'ai essayé plusieurs choses mais sans succès.. J'ai besoin de vos lumières !!
Merci pour votre aide !!

Ma page controller :

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
21
22
23
24
#Date de départ type calendrier
            ->add('dateStart', DateType::class, [
                'label' => 'date de départ',
                'widget'=>'single_text',
                'required'=>true,
                'invalid_message' => 'This value is not valid.',
                'invalid_message_parameters' => [],
                'format' => 'dd-MM-yyyy',
                // prevents rendering it as type="date", to avoid HTML5 date pickers
                'html5' => false,
                'attr' => ['class' => 'js-datepicker','id' =>'dateStart'],
            ])
 
 
            # Date de retour type calendrier
            ->add('dateEnd', DateType::class, [
                'label' => 'date de retour',
                'widget'=>'single_text',
                'required'=>true,
                'format' => 'dd-MM-yyyy',
                // prevents rendering it as type="date", to avoid HTML5 date pickers
                'html5' => false,
                'attr' => ['class' => 'js-datepicker','id' =>'dateEnd'],
            ])

ma page twig :

Code twig :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{% extends "base.html.twig" %}
 
{% block stylesheets %}
 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
 
{% endblock %}
 
{% block body %}
 
       <h3 class=" text-center py-6 col-md-12">FORMULAIRE DE RÉSERVATION
        </h3>
    {{ form_start(form) }}
 
 
            <div class=" row  w-50 mt-2 mx-auto ">
                <div class="w-10 "><i class="fa fa-calendar"></i> {{ form_label(form.dateStart) }}
                {{ form_widget(form.dateStart) }} </div>
 
                <div class="w-10 mx-auto"><i class="fa fa-calendar"></i> {{ form_label(form.dateEnd) }}
                {{ form_widget(form.dateEnd) }}</div>
            </div>
 
            <div class="row w-100 mt-3 justify-content-center">
            {{ form_row(form.save)}}
            </div>
 
            {{ form_end(form) }}
 
            {% endblock %}
 
        {% block javascripts %}
            {{ parent() }}
 
    <script>
                
        $(document).ready(function() {
                  $(".js-datepicker").datepicker({
             clearText          : 'Effacer',
             yearRange          : "2024:2060",
             changeMonth        : true,
             autoclose          : true,
             minDate            : "-0d", // pas dans le passé
             changeYear         : true,
             updateViewDate     :  true,
             closeText          : 'Fermer',
             prevText           : 'Précédent',
             nextText           : 'Suivant',
             monthNames         : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
             monthNamesShort    : ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
             dayNames           : ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
             dayNamesShort      : ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
             dayNamesMin        : ['D','L','M','M','J','V','S'],
             weekHeader         : 'Sem.',
             dateFormat         : 'dd/mm/yy',
             firstDay           : 1,
             isRTL              : false,
             showMonthAfterYear : false,
             yearSuffix         : '',
             defaultDate        : "+1w",
     })
 $("#dateStart").datepicker({                    
                        onClose: function(selectedDate) {
                            $("#dateEnd").datepicker("option", "minDate", selectedDate);
                        }
                    })
                    $("#dateEnd").datepicker({
                        
                        onClose: function(selectedDate) {
                            $("#dateStart").datepicker("option", "maxDate", selectedDate);
                        }
                    })
        })
</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" />
 
{% endblock %}

[armel18]

bonjour,

tu peux utiliser la contrainte de validation GreaterThan qui permet de comparer 2 valeurs(date dans ton cas).

Code :

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

1
2
3
4
5
6
7
8
 
//entité liée au formulaire
 
/**
  * @Assert\Date
  * @Assert\GreaterThan(propertyPath="dateStart")
  */
 private $dateEnd;

https://symfony.com/doc/current/refe...eaterThan.html

[bouboule22]

Super ça fonctionne, mille mercis armel18 !!!!