How to disable dates in Datepicker using dates entered into database?

Question

What I want to achieve is to block out dates in the Jquery Datepicker that have already been booked. So far I have managed to build a working form with a functioning Datepicker that uses $_POST to send data to my database. I know that I should be using the BeforeShowDay Jquery function but I can't quite figure out how to implement it. Let me walk you through my code.

<?php require_once('inc/header.php');

Connect to the database using PDO and use prepare to input the data. All working fine.

require('database.php');

$stmt = $db->prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->bindParam('1', $_POST['Name']);
$stmt->bindParam('2', $_POST['LastName']);
$stmt->bindParam('3', $_POST['Email']);
$stmt->bindParam('4', $_POST['Guests']);
$stmt->bindParam('5', $_POST['From']);
$stmt->bindParam('6', $_POST['To']);
$stmt->bindParam('7', $_POST['Questions']);
$stmt->execute();

This is where I retrieve the info from the database.

    try {
        $results = query("SELECT fromDate, toDate FROM besucher");

    } catch (Exception $e) {
        echo "Data could not be retrieved from the database.";
        exit;
    }

?>

The form itself.

<!-- Begin page content -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="page-header">
      <h1>Make a booking enquiry</h1>
      </div>
    </div>
  </div><!--endrow-->
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <form role="form action="form.php" method="post">
        <div class="form-group">
          <label for="Name">First Name</label>
          <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required>
        </div>
        <div class="form-group">
          <label for="LastName">Surname</label>
          <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required>
        </div>
        <div class="form-group">
          <label for="Email">Email</label>
          <input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required>
        </div>    
        <div class="form-group">
          <label for="Guests">Number of Guests</label>
          <input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required>
        </div>        
        <div class="form-group">
          <label for="From">From <span class="glyphicon glyphicon-calendar"></span></label>
          <input type="text" id="From" name="From" class="form-control" required>
        </div>
        <div class="form-group">     
          <label for="To">To <span class="glyphicon glyphicon-calendar"></span></label>
          <input type="text" id="To" name="To" class="form-control" required>      
        </div>
        <div class="form-group">
          <label for="textarea">Questions?</label>
          <textarea class="form-control" id="textarea" name="Questions" rows="3"></textarea>             
        </div>
        <div class="form-group">
          <label for="checkbox" class="sr-only">Checkbox</label>
          <input id="checkbox" type="checkbox"> I would like to recieve emails from Muscheltraum              
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>     
    </div>
  </div><!--endrow-->
</div><!--container-->
</div><!--wrap-->

<?php require_once('inc/footer.php'); ?>

This is the datepicker.js file code where I want to put the BeforeShowDay function. Unfortunately, I don't know how to get the fromDate and toDate from my SELECT query into my date-picker and how that would fit into the below code. It's really frustrating because I know exactly what I want to do and how the pieces should fit together but I just can't work how to implement it.

From the Jquery UI API

beforeShowDayType: Function( Date date )

Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.




    $.datepicker.setDefaults( $.datepicker.regional[ "de" ] );

    $(function() {
      $( "#From" ).datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 1,
        gotoCurrent: true,
        minDate:0,
        maxDate: "+1y", 
        onClose: function( selectedDate ) {
          $( "#To" ).datepicker( "option", "minDate", selectedDate );
        }
      });
      $( "#To" ).datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 1,
        gotoCurrent: true,
        maxDate: "+1y",
        onClose: function( selectedDate ) {
          $( "#From" ).datepicker( "option", "maxDate", selectedDate );
        }
      });
    });

Ergec · Accepted Answer · 2014-01-28 12:38:58Z

1

Basic idea, didn't test but it should work.

PHP

Let's assume you have your dates to disable in an array in PHP

$disablethese = array("2014-01-03","2014-01-13","2014-01-23");

Print your From Date field with disabled dates in data attribute using json_encode

<input type="text" id="From" name="From" class="form-control" required data-disablethese="<?=json_encode($disablethese)?>">

JQuery

var disablethese = $("#From").data("disablethese"); //this will auto-decode JSON to Array

Now you can use disablethese variable in your beforeShowDate

var disablethese = ["2014-01-03","2014-01-13","2014-01-23"];

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disablethese.indexOf(string) == -1 ]
    }
});

JSFiddle Example

edited Jan 28, 2014 at 12:38

answered Jan 27, 2014 at 22:19

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chap Over a year ago

I tried your solution turning the date into an array like this.

try {         $sth = $db->prepare("SELECT fromDate, toDate FROM besucher");         $sth->execute();          $disablethese = $sth->fetchAll();         print_r($disablethese);          } catch (Exception $e) {                  echo "Data could not be retrieved from the database.";         exit;                  }

It disables all dates in my From datepicker. In my Jquery function I added the following code beforeShowDay: function(disablethese) { return [false, "highlighted", "booked out"]; }

Ergec Over a year ago

I don't think your beforeShowDay usage is correct. I edited my answer, check the usage, I also put JSFiddle example. Also your PHP must return exact same format of array.

Sandeep Bajpai · Accepted Answer · 2018-08-31 15:46:06Z

0

<?php
include'db.php';
$Pro_id = 4;
$dateslistselect1[]='';
$queryres = mysqli_query($conn, "SELECT start_date,end_date FROM table_name WHERE id='".$Pro_id."' AND YEAR(start_date) = YEAR(CURDATE()) OR YEAR(start_date) = YEAR(CURDATE()) + 1") or die(mysqli_error($conn));
while($row = mysqli_fetch_array($queryres))
{
$start = strtotime($row['start_date']);
$end = strtotime($row['end_date']);            
for ($i1=$start; $i1<=$end; $i1+=86400) { 
$dateslistselect1[]= '"'.date('d-m-Y',$i1).'"';   
}          
}
$dateslistselect1=array_filter($dateslistselect1);
$totaldayslist1 =implode(", ", $dateslistselect1);   
?>
<script>
var disableddates = [<?php echo $totaldayslist1; ?>];     
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
</script>
<script type="text/javascript">
(function( $ ) {
var disableddates = [];     
$("#in").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#out").datepicker("option", "minDate", dt);
}
});
$("#out").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#out").datepicker("option", "maxDate", dt);
}
});
/* $( ".datepicker" ).datepicker( "option", "maxDate", dt );*/
})( jQuery );
</script>

answered Aug 31, 2018 at 15:46

Sandeep Bajpai

11 bronze badge

1 Comment

Capricorn Over a year ago

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made.

Collectives™ on Stack Overflow

How to disable dates in Datepicker using dates entered into database?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related