symfony-> probleme with datepicker, dateend can be before datestart

Hye,
I am calling on you because I am in a small symfony project and I am just starting out. I have made a reservation form but I have a problem because my return date may be earlier than my departure date, I have tried several things but without success .. I need your lights !!
Thanks for your help !!
my controller page :

#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'],
            ])






{% 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/[email protected]/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 %}
 

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *