How to pre-select dates within a date range ?

How to pre-select dates within a date range ?

Hello all,

I have following problem.

I have 2 input fields, a from date and a to date. If I select as start date for example the 5. June, than I can not select an earlier date in the to date field. Thats ok.
But how can I set the dates if they come from the database ?
I load a page and in the from date and to date is already filled, because dates are in the database.
Now when I select for example the start date I can also select dates after the to date and also I can select earlier to dates than in the start date.
How can I set the dates correctly ?

  1. <script type="text/javascript">
                        $(function() {
                            var dates = $("#fromDate, #toDate").datepicker({
                                changeMonth: true,
                                changeYear: true,
                                showButtonPanel: true,
                                dateFormat: 'dd.mm.yy',
                                yearRange: '1950:2021',
                                onSelect: function(selectedDate){
                                    var option = this.id == "fromDate" ? "minDate" : "maxDate",
                                        instance = $(this).data("datepicker"),
                                        date = $.datepicker.parseDate(
                                            instance.settings.dateFormat ||
                                            $.datepicker._defaults.dateFormat,
                                            selectedDate, instance.settings);
                                    dates.not(this).datepicker("option", option, date);
                                }
                            });
                        });
    </script>


















Edit:

I think I've found a pretty solution. Is this correct ?
I just set the maxDate option of the fromDate-field to the date which is filled in the toDate-field and also I set the minDate option of the toDate-field to the date which is filled in the fromDate-field.
I think that's how it works.

  1. $(function() {
        var dates = $("#fromDate, #toDate").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'dd.mm.yy',
            yearRange: '1950:2021',
            beforeShow: function(){
                $("#fromDate").datepicker("option", "maxDate", $("#toDate").datepicker("getDate"));
                $("#toDate").datepicker("option", "minDate", $("#fromDate").datepicker("getDate"));
            },
            onSelect: function(selectedDate){
                var option = this.id == "fromDate" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker"),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });