Get dates from database to the jQuery Ui Picker in PHP-CodePudding

I am trying to get the dates from the database using PHP. Which will be highlighted in datepicker. To do achieve that I have made a sql query to fetch the dates as shown below.

HTML

Date: <input type="text" id="datepicker">

// Static dates
// An array of dates
var eventDates = {};
eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );

<script>
$(function() {
// An array of dates
var eventDates = {};
<?php

$sql = "SELECT * from `table` WHERE `value` > 0";

$result = $connect->query($sql);                       

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

?>
eventDates[new Date('<?php echo $date = $row['date']; ?>')] = new Date(
'<?php echo $date = $row['date']; ?>');
<?php
}
?>

// datepicker
$('#datepicker').datepicker({
beforeShowDay: function(date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", 'Tooltip text'];
} else {
return [true, '', ''];
}
}
});
});
</script>

So in the above code, I have looped all the dates having value > 0. Which should print all the dates but it doesn't. I have checked the query and it works perfectly in a separate PHP file. It echo out all the date have value > 0.

I am not sure if this is the right method to fetch the date from the database and pass it to the datepicker. There is another method using JSON but I am not familiar with that method since I haven't worked with JSON.

What changes can I make to fetch dates from the database and highlight them in the datepicker?

CodePudding user response：

I have formatted the date to YY/MM/DD from YY-MM-DD. Since the datepicker date formate is YY/MM/DD. If you use the second format with - it will not show the output.

Here is the corrected script code:

<script>
    $(function() {
        // An array of dates
        var eventDates = {};
        <?php

        $sql = "SELECT * from `table` WHERE `value` > 0";

        $result = $connect->query($sql);   

        while( $final=$result->fetch_assoc() ) 
        {

        ?>
        eventDates[new Date('<?php 
        $orgDate = date($final['date']);
        $date = str_replace('-"', '/', $orgDate);  
        $newDate = date("Y/m/d", strtotime($date));  
        echo $newDate   ?>')] = new Date(
            '<?php $orgDate =date($final['date']); 
             $date = str_replace('-"', '/', $orgDate);  
             $newDate = date("Y/m/d", strtotime($date));  
             echo $newDate  
             ?>'
        );

        <?php
        
        }

        ?>

        // datepicker
        $('#start').datepicker({

            dateFormat: "yy-mm-dd",

            beforeShowDay: function(date) {
                var highlight = eventDates[date];
                if (highlight) {
                    return [true, "event", 'Tooltip text'];
                } else {
                    return [true, '', ''];
                }
            }
        });
    });
    </script>