A problem with my Datepicker system (disabled dates)

I have a datepicker for my reservation system but it doesn't work with 1 example. I have 2 date's for the employee to fill in. If i save the Check-in date(mm/dd/yy) 01/01/2020 and the Check-out date is 01/05/2020. Then after if i want to edit the reservation data. I can not change the Check-out date to 01/03/2020 because 1 until 5 are now disabled dates.

My question is if someone knows how to handle this. Maybe i need to write code for another system for handling the disabled dates only. But i want to know if someone know's how to do this with the datepicker only. I prefer that.

I use flatPickr as datepicker with Jquery. I use PHP for getting the disabled dates from the database and i load that as a array inside the disabled dates function of the datepicker.

Let me know what your thoughts are, and if you have tips and hints you can also answer to me.

Thanks for your time

HTML code

<div class="form-group row">
<label for="date" class="col-4 col-form-label">Check in</label>
<div class="col-8">
<input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off"  />
</div>
</div>
<div class="form-group row">
<label for="date" class="col-4 col-form-label">Check out</label>
<div class="col-8">
<input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off"  />
</div>
</div>

Datepicker code jquery. Dates from the database and code to take all day's between the 2 dates and placed inside the disable[] function with variable $strBlockA

 $('#from1').flatpickr({
     onChange: function(selectedDates, dateStr, instance) {
       endPicker.set('minDate', selectedDates[0]);
     },

     allowInput: true,
     dateFormat: "m/d/yy",
     disable: [<?php echo implode(',',array_unique(explode(',', $strBlockA))); ?>],
   });

   endPicker = flatpickr("#to1", {
   allowInput: true,
   dateFormat: "m/d/yy",
   disable: [<?php echo implode(',',array_unique(explode(',', $strBlockA))); ?>],

   });

Code that takes the dates from the database and also gets all the dates inbetween

  //Camping Block A
     $sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)'";
     $statement = $connect->prepare($sql);
     $success = $statement->execute();

     $strBlockA = '';
        while ($output = $statement->fetch(PDO::FETCH_ASSOC)) {

               // Specify the start date. This date can be any English textual format
                    $date_from = $output["dateFrom"];
                    $date_from = strtotime($date_from); // Convert date to a UNIX timestamp

                    // Specify the end date. This date can be any English textual format
                    $date_to = $output["dateTo"];
                    $date_to = strtotime($date_to); // Convert date to a UNIX timestamp

                    // Loop from the start date to end date and output all dates inbetween
                    for ($i=$date_from; $i<=$date_to; $i+=86400) {
                        $strBlockA .= "'".date("m-d-y", $i)."',";
                    }

           }


           $strBlockA .= rtrim($strBlockA,",");

Solution

For the first issue, you can simply add another where condition onto your query, such that you exclude the current reservation from your search, like so:

 ... and reservationID != {$currentReservationID}

Then you'll only be looking at other reservations, which is all that you need when you are editing one.

For the latter issue, do you currently have two date fields, a check in and a check out date? If so, the easiest way to address this will be to use the range calendar feature to have one date range picker instead of two date pickers, which does not appear to allow disabled dates inside of the range.

If you do this, the only thing you will have to change is that instead of something to the effect of:

$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];

you would use:

$dateRange = $_POST['dateRange'];
$dateRange = explode(" to ", $dateRange);
$startDate = $dateRange[0];
$endDate = $dateRange[1];

If, however, that won't work for you for whatever reason, I believe the next best option would be to do a simple SQL query before inserting their reservation that validates if the dates are available.

You could do something like this, just before inserting their query:

select reservationID from campinginformation
where
  dateFrom between "{$startingDate}" and "{$endingDate}"
  or dateTo between "{$startingDate}" and "{$endingDate}"

If this returns any results, do not insert their reservation, and provide a failure message.