JQuery datepicker

Tutorial: Dynamically Disabling Dates In JQueryUI Datepicker

JQuery datepicker is a very simple, light weight and useful tool. In this article you will see how to create and disable dates dynamically from MySql table in jQuery datepicker using PHP and Ajax according to selected value from dropdown.

Create two files in your root directory.

  1. index.php
  2. request.php

index.php

This page will contain your form structure and JQuery code to display your datepicker. An AJAX request will be made from here to get the list of dates that are needed to be disabled.

Inside the <head> tags you will have to include the following code.

<head>
    <title>Dynamic Date Disable</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

Then inside <body> tag add <select> and <input> tags as follows.

<select name="sel" id="sel" onchange="myfunc(this)">
    <option value="select1">select1</option>
    <option value="select2">select2</option>
    <option value="select3">select3</option>
    <option value="select4">select4</option>
 </select>

<input type="text" id="date">

In the above code, every time the user selects any value from drop down, the onchange function is triggered which gives a call to myfunc function in <script> tag.

The myfunc function sends the new value to request.php to fetch the list of dates associated with that drop down that has to be disabled.

After receiving list of data, we initialize the JQuery datepicker with the given disabled dates.

<script type="text/javascript">

            function myfunc(x) {
                console.log(x.value);
                $.ajax({
                    url: 'request.php',
                    method: 'POST',
                    data: {
                        val: x.value,
                    },
                    success: function(data) {
                        dates = data;
                        console.log(dates);

                        console.log(dates);

                        function DisableDates(date) {
                            var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
                            return [dates.indexOf(string) == -1];
                        }

                        $(function() {
                            $("#date").datepicker({
                                beforeShowDay: DisableDates
                            });
                        });
                    }
                });
            }
        </script>

request.php

This page processes the data recieved through Ajax request from index.php and sends the list of dates that has to be disabled.

We will be selecting all the dates associated with the drop down value and convert them to json format through following PHP code.

<?php
$server = 'localhost';
$username = 'root';
$password = '';
$db = 'dbname';

$conn = mysqli_connect($server, $username, $password, $db);

if (!$conn) {
    die("Connection Failed: " . mysqli_connect_error());
}

$val = $_POST['val'];
$array = array();
$query = mysqli_query($conn,"SELECT datev FROM date_table WHERE selections='".$val."' ");
while($q = mysqli_fetch_array($query)){
    array_push($array,$q['datev']);
}

$data = json_encode($array,JSON_UNESCAPED_SLASHES);

echo $data;
?>

In the above code, $_POST[‘val’] is the data (drop down value) we received from index.php.

We selected all the date values from table having “selections” column equal to $val and stored them into PHP array.


Database Structure


Output

Leave a Reply

Your email address will not be published. Required fields are marked *