Calendar block dates that are from the db
Question
I'm trying to create a calendar inside of a text input with JavaScript and mysqli. This calendar has booked dates in it that are based on the start date and the end date in the db.
I have a db with 2 columns:
- start_datum (start_date)
- end_datum (end_date)
What I want is that the user is able to click on the input date and that it shows this mini calendar where the user is able to pick out dates to make a reservation
However certain dates are blocked because they have been put inside of the db and ate between the start and end date.
The problems I have with this is that I can't create the disabled dates
How do I fix this?
$(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 1, minDate:0, showButtonPanel: true, }); }); $(function() { $( "#datepicker1" ).datepicker({ numberOfMonths: 1, minDate:1, showButtonPanel: true, }); });
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <?php $huis_ID = "1"; $sql = "SELECT * FROM reserveringen WHERE huis_ID =?"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $huis_ID); $stmt->execute(); $result = $stmt->get_result(); $data = $result->fetch_all(MYSQLI_ASSOC); if ($data):?> <?php foreach($data as $row):?> <?php $start_datum = date('dm-Y', strtotime($row['start_datum'])); echo $start_datum, "<br>"; $eind_datum = date('dm-Y', strtotime($row['eind_datum'])); echo $eind_datum, "<br>";?> <?php endforeach?> <?php else:?> No data found <?php endif?> </head> <body> <p>start_date: <input type="text" id="datepicker" name ="datepicker"></p> <p>end_date: <input type="text" id="datepicker1" name ="datepicker1"></p> </body> </html>
Pics of what it looks like right now
1 answers
solution1
0 2022-07-04 04:59:44
$('.datepicker').datepicker({ todayHighlight:'TRUE', startDate: new Date('2022-07-15'), endDate: new Date('2022-07-31'), autoclose: true });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script> <input type="text" class="datepicker" value='' /> <input type="text" class="datepicker" value='' />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.