ОТКЛЮЧИТЬ другую дату, которая не находится в диапазоне startDate и endDate в Bootstrap datepicker, используя дату начала и дату окончания в базе данных? - PullRequest
Новая
       26

ОТКЛЮЧИТЬ другую дату, которая не находится в диапазоне startDate и endDate в Bootstrap datepicker, используя дату начала и дату окончания в базе данных?

0 голосов
/ 15 апреля 2019

Приветствую всех,

У меня возникла проблема, при которой мне нужно настроить указатель даты так, чтобы он соответствовал дате начала семестра и дате окончания семестра, как показано ниже.enter image description here

Самый простой способ, которым я знаю о том, как начинать дату и дату окончания в указателе даты, - использовать следующий код: 

$(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')
            });
        });

Я не уверен, какой идентификатор мне следует передавать через данные, и я не уверен, как добавить данные для startDate и endDate.Пожалуйста, помогите мне решить эту проблему.Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 15 апреля 2019

Вы можете сделать это: у 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>

enter image description here

0 голосов
/ 16 апреля 2019

UPDATE

Я наконец нашел ответ на свой вопрос. Просто делюсь здесь для всех знаний. Я сослался на ответ здесь .

На стороне 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 ранее, что объясняет, почему не работает ответ, предоставленный Расой Мохамедом и 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>
...