使用数据库中的开始日期和结束日期禁用不在 Bootstrap datepicker 中的 startDate 和 endDate 范围内的其他日期？答案

【问题标题】：DISABLE other date which is not in the range of the startDate and endDate in Bootstrap datepicker using the start date and end date in database?使用数据库中的开始日期和结束日期禁用不在 Bootstrap datepicker 中的 startDate 和 endDate 范围内的其他日期？
【发布时间】：2019-04-15 01:14:38
【问题描述】：

大家好，

我遇到了一个问题，我需要将日期选择器设置为跟随学期开始日期和学期结束日期，如下所示。

我知道如何在日期选择器中开始日期和结束日期的最简单方法是使用以下代码：

$(document).ready(function(){
            $('#appointment_date').datepicker({
            format: "yyyy-mm-dd",
            daysOfWeekDisabled: [0, 6],
            startDate: new Date('2019-1-14'),
            endDate: new Date('2019-5-14')
            });
        });

但是，我应该使用 AJAX 和 PHP 来限制日期。所以我修改了代码如下：

 $('#appointment_date').datepicker({
            format: "yyyy-mm-dd",
            daysOfWeekDisabled: [0, 6],
            $.ajax({
                type: 'POST',
                url: '../ajax/ajax-get-semester-date.php',
                data: {'appointment_date': $('#appointment_date').val()},
                success: function (data) 
                {
                    $('#appointment_date').append(data);
                }
                // startDate: new Date('2019-1-14'),
                // endDate: new Date('2019-5-16')
            });
        });

我不确定应该通过数据传递什么 ID，也不确定如何为 startDate 和 endDate 附加数据。请帮我解决这个问题。提前致谢。

【问题讨论】：

我不清楚你的问题。单独禁用两个日期？或禁用给定的开始日期到结束日期？
@Rasa Mohamed：禁用开始和结束日期之外的日期。并启用从 2019 年 14 月 1 日到 2019 年 14 月 5 日的日期。
@RasaMohamed 这是可行的解决方案。您需要根据您的要求更改 minDate 和 maxDate
@vwadhwa 那么很好......我认为这是两个不同的日期，这就是我这样回答的原因:-)
@Naz Azhar 我认为这个问题要求两个不同的日期，但实际期望是启用从开始日期到结束日期的日期集

标签： php ajax datepicker bootstrap-datepicker

【解决方案1】：

你可以这样做：Datepicker 有一个选项 maxDate 和 minDate

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Restrict date range</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!--   <link rel="stylesheet" href="/resources/demos/style.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>

  <body>
  <p>Date: <input type="text" id="datepicker"></p>
  <script>
    $( function() {
      $("#datepicker").datepicker({
        dateFormat:'yy-mm-dd',
        minDate:'2019-04-5',
        maxDate:'2019-04-10'
      });
    });
  </script>
  </body>

</html>

【讨论】：

【解决方案2】：

更新

我终于找到了我的问题的答案。在这里分享一下，供大家参考。我提到了一个答案here。

在 PHP 端，这样做：

<?php
    //select semester date
        $select_date_query = "SELECT semester_end FROM semester ORDER BY semester_end ASC";
        $select_date_stmt = $db->prepare($select_date_query);
        $select_date_stmt->execute();
        if($select_date_stmt)
        {
            $semDates = array();
            while ($row = $select_date_stmt->fetch(PDO::FETCH_ASSOC))
            { 
              $semDates[] = $row['semester_end'];
            }

            $maxDate = explode("-", end($semDates));
            $maxDate[1] -= 1;
        }
?>

我之前使用的日期选择器是 Bootstrap 的日期选择器。我之前忘了删除 datepicker.js，这解释了为什么 Rasa Mohamed 和 vwadhwa3 提供的答案不起作用。谢谢你们愿意回答，即使这不是我想要的。

在 JQuery 日期选择器端，这样做：

<script>
        $(document).ready(function(){
            $('#appointment_date').datepicker({
                dateFormat:'yy-mm-dd',
                beforeShowDay: $.datepicker.noWeekends,
                minDate: 0,
                maxDate: new Date(<?php echo($maxDate[0]);?>,<?php echo($maxDate[1]);?>,<?php echo($maxDate[2]); ?>)
             });
        });
    </script>

【讨论】：