Question

问候大家

我遇到一个问题，我需要将日期选择器设置为紧随以下所述的学期开始日期和学期结束日期。

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

$(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附加数据。请帮我解决这个问题。提前致谢。

Answer 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>

Answer 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;
        }
?>

我以前使用的datepicker是Bootstrap datepicker的。我之前忘记删除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>

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

2 个答案: