Отображать конкретные даты в загрузчике DatePicker - PullRequest
Новая
       17

Отображать конкретные даты в загрузчике DatePicker

0 голосов
/ 03 октября 2018

Я использую средство выбора даты начальной загрузки в своем проекте.Это проект бронирования сеанса.В панели администратора я добавляю сеансы на определенные даты и хочу, чтобы пользователь моего веб-сайта мог видеть даты, для которых я добавил сеанс.Мой веб-интерфейс получает данные из базы данных.Данные содержат все даты, на которые я добавил сеанс.Я хочу, чтобы мой указатель даты отображал только эти даты из данных и отключал другие даты.В настоящее время я временно использовал поле выбора, чтобы решить эту проблему.Но выбор даты будет лучше, так как выглядит хорошо, легко ориентироваться.

См. Рисунок ниже.Вот как я использовал поле выбора, чтобы временно решить проблему this is how I have used a select box to temporarily solve the problem

Вот желаемый вывод, который я хочу

It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled

Это должно быть средство выбора даты с включенными только теми датами, которые я получаю из базы данных.Другие даты должны быть отключены. Я попытался найти их в Google, но не смог найти решение.Возможно ли это с помощью средства выбора даты начальной загрузки?Если да, пожалуйста, предложите обходной путь.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Используя параметр beforeShowDay, вы можете отключить даты: 

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/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>
    <script>
        $(function() {
            //date list that you want to disable
            disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
            $("#datepicker").datepicker({
                format: 'dd-mm-yyyy',
                beforeShowDay: function(date) {
                    var m = date.getMonth();
                    var d = date.getDate();
                    var y = date.getFullYear();

                    var currentdate = (m + 1) + '-' + d + '-' + y;
                    for (var i = 0; i < disableddates.length; i++) {

                        // Now check if the current date is in disabled dates array. 
                        if ($.inArray(currentdate, disableddates) != -1) {
                            return [false];
                        }
                    }
                    return [true];
                },

                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
            });
        });
    </script>
</head>

<body>
    <p>Date:
        <input type="text" id="datepicker">
    </p>
</body>
</html>
</body>
</html>
0 голосов
/ 03 октября 2018

Вы можете использовать функцию beforeShowDay, чтобы включить только даты, возвращаемые вашей серверной системой.

Документация здесь

Эта функция выполняется для каждой даты,он проверяет, присутствует ли он в списке применимых дат, возвращает true, если он присутствует, и включает его, в противном случае возвращает false и отключает его. 

$(function () {
  let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
  $('#datepicker').datepicker({
    format: 'yyyy-mm-dd',
    beforeShowDay: function (date) {
      let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      return enabledDates.indexOf(fullDate) != -1
    }
  });
});

beforeShowDay функция также позволяет возвращатьклассы для пользовательского стиля 

beforeShowDay: function (date) {
  let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  if (enabledDates.indexOf(fullDate) != -1) {
    return {
      classes: 'enabled',
      tooltip: 'You can select this date'
    };
  } else
    return false
}


.enabled {
  background: #DCDCDC;
}
...