在jQuery datepicker中突出显示特定日期

时间:2018-09-07 17:26:17

标签: php jquery json datepicker

我有一个日期选择器,如果row Count等于5或大于5,则日期选择器中的日期将突出显示为红色,并且row Count等于3或等于5。大于3时,日期选择器中的日期将突出显示为绿色。我在1种情况下有想法,但在2种情况下我没有任何想法。我为此进行了研究,但没有任何显示。我是初学者。

代码如下:

//html
  <input id="datepicker" name="dates" readonly='true' class="datepicker">

//PHP
$db = getDB();
$stmt = $db->prepare("SELECT scheddate FROM appointment GROUP BY scheddate
        HAVING ( COUNT(scheddate) >=5 )  ");  
$count=$stmt->rowCount();
$stmt->execute();

      if($count=5){

        $data= $stmt->fetchAll(PDO::FETCH_COLUMN);

        $db = null;

              if($data>0)
              {
                   $json_array=$data; 
                   $jarray = $json_array;
                  $jsonencode= json_encode(array_values($jarray)); // to convert data from scheddate column into json array
                  echo $jsonencode; // display array of results

              }
      }

//script
<script type='text/javascript'>
        $(document).ready(function() {


            // var unavailableDates = ["18-8-2018", "19-8-2018", "20-8-2018"]; // sample dates in day month year format


            var unavailableDates = <?php echo $jsonencode; ?>; // array from the condition above


            console.log(unavailableDates);

            function unavailable(date) {


                // ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

                                        // +1  because array starts at index 0 
                                        //  without + 1 january will start on index 0 instead of index 1
                dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

                // to check if dmy exists in the variable array
                // inArray default result will be -1 meaning true. to reverse != -1
                if ($.inArray(dmy, unavailableDates) == -1) 
                {
                    return [true, ""];

                    // if true dates that exist in the array will be disabled
                } 
                else {
                    return [true, "different-background", "Unavailable"];
                }
            }

            $(document).ready(function() { // to load jquery after the whole page loads
                $("#datepicker").datepicker({
                    dateFormat: 'd-m-yy', 
                    // date format that would display on the textbox 
                    //mindate = start of date  from current
                    minDate: 0, 
                    // to disable specific date unavailable function is called
                    beforeShowDay: unavailableDates // function unavailable

                });
            });


        });
    </script>

PS:different-background为红色,表示row count等于或大于5的日期选择器中的a为红色。

0 个答案:

没有答案