CODEWITHSUNDEEP
phpjquerymysqlmysqli
beckyboo
beckyboo

Reputation: 63

How to disable certain days of the week on a jQuery datepicker based on a result in a database with PHP

I have a mySQL database with a table of staff information and what days of the week they work i.e Tuesday, Wednesday, Friday.

I have an HTML from which allows user to book an appoint, the idea is based on who they want the appointment with would depend what days they can chose from within the jquery datepicker.

HTML

<form action="" method="post">
     <input type="text" id="Name" name="Name" required="required" value="Name">
     <select id="SelectStylest" name="stylest">

`<?php 

     $sql = mysqli_query($con, "SELECT Name FROM staff") or die(mysqli_error());

      while ($row = $sql->fetch_assoc()){

        echo "<option value='".$row['Name']."'>".$row['Name']."</option>";

      }

    ?>
    </select>

    <input type="text" name="appointment_date"id="datepicker">

    <input type="submit" name="submit" id="submit" value="Submit" />
</form>


          
          $( function() {
            $( "#datepicker" ).datepicker();
             $('input.timepicker').timepicker({
                minTime: "09:00",
                maxTime: "17:00"
               
             });
            });

I know I need to following query to search the database to friend the name of the stylist, but after that I get lost. I have googled the problem but haven't found anything on the subject.

$stylest = $_POST['stylest'];

    $query = mysqli_query($con,"SELECT * FROM staff WHERE Name LIKE '%$stylest%'");

Upvotes: 1

Views: 1245

Answers (2)

Joni
Joni

Reputation: 111259

You can do this with the beforeShowDay option in date picker. For example this enables only Tuesdays Wednesdays and Fridays:

workingDays = [2, 3, 5];

$( "#datepicker" ).datepicker({
  beforeShowDay: function (date) {
      return [workingDays.indexOf(date.getDay()) > -1];
  }
});

Day of week as returned by Date go from Sunday=0 to Saturday=6.

To transform your current working_days format to the numeric workingDays array needed in JS, you can use:

<?php
... // get row from mysqli_fetch_assoc
$weekDays = explode(',', $row['working_days']);
$days = [];
foreach ($weekDays as $d) {
    if ($d == 'Sunday') $days[] = 0;
    if ($d == 'Monday') $days[] = 1;
    // ... and so on
}
echo '<script type="text/javascript">workingDays='.json_encode($days).'</script>';
?>

Upvotes: 2

Mike Volmar
Mike Volmar

Reputation: 2093

this will disable weekend days and a select list of holidays

var disabledDays = ["2018-11-22","2018-11-23","2018-12-24","2018-12-25", "2019-01-01"]

$( "input#ship_date" ).datepicker({   
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    numberOfMonths: 1,
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        var day = date.getDay();        
        return [ day != 0 && day != 6 && disabledDays.indexOf(string) == -1 ]
    }
});

Upvotes: 0

Related Questions