需要根据日历日期选择从数据库中获取时隙

时间:2018-08-28 16:58:44

标签: java php mysql ajax

我正在创建一个小脚本,该脚本根据日历日期选择器显示可用的时隙。

我的回答很好(https://stackoverflow.com/a/39264049/10285899)符合我的要求的70%,但是有一个问题;该脚本显示了预定义的时隙。

我的目标是使用PHP和SQL从数据库中基于日期选择来调用时隙。

这是我找到的完整脚本:

    <html lang="en">
    <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <style>
    .popover {
        left: 60% !important;
        width:500px;
    }
    .btn {
        margin: 1%;
    }
    </style>
    </head>
    <body>
        <div class=" col-md-4">
          <div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
          <span class="" id="example-popover-2"></span> </div>
        <div id="example-popover-2-content" class="hidden"> </div>
        <div id="example-popover-2-title" class="hidden"> </div>
    <script>
    $('.date-picker-2').popover({
        html : true, 
        content: function() {
          return $("#example-popover-2-content").html();
        },
        title: function() {
          return $("#example-popover-2-title").html();
        }
    });
    $(".date-picker-2").datepicker({
        onSelect: function(dateText) { 
            $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
            var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
            $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
            $('.date-picker-2').popover('show');
        }
    });
    </script> 
    </body>
    </html>

任何帮助将不胜感激。

0 个答案:

没有答案