Question

我在项目中使用引导日期选择器。这是一个会议预订项目。从管理面板中，我添加了特定日期的会话，并且希望我网站的用户能够看到添加会话的日期。我的前端从数据库接收数据。数据包含我添加会话的所有日期。我希望我的日期选择器仅显示数据中的这些日期，并禁用其他日期。目前，我暂时使用了选择框来解决此问题。但是，日期选择器会更好，因为它看起来很容易导航。

请参见下图。这就是我使用选择框临时解决问题的方式

这是我想要的输出

应该是一个日期选择器，仅启用我从数据库收到的那些日期。其他日期应禁用我尝试在Google上搜索它，但找不到解决方案。是否可以使用引导日期选择器？如果是，请提出解决方法。

Answer 1

您可以使用beforeShowDay函数仅启用从后端系统返回的日期。

文档here

该函数针对每个日期执行，它检查它是否在适用日期列表中，如果存在则返回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;
}

Answer 2

没有其他解决方案对我有用，所以这是我的解决方案。

documentation不太清楚，没有示例，但是您可以看到一个以日期为参数并返回布尔值（表明该日期是否可选）的函数

在此摘录中，以2020年1月为例，以便仅查看有效日期。

$(document).ready(function() {
  var datesEnabled = [
    '2021-01-01', '2021-01-11', '2021-01-21',
    '2021-02-01', '2021-02-11', '2021-02-21',
    '2021-03-01', '2021-03-11', '2021-03-21',
    '2021-04-01', '2021-04-11', '2021-04-21',
    '2021-05-01', '2021-05-11', '2021-05-21'
  ];


  $("#datepicker-lorem").datepicker({
    language: "fr",
    autoclose: true,
    todayHighlight: true,
    todayBtn: true,
    title: 'Test ;-)',
    weekStart: 1,
    format: 'dd/mm/yyyy',
    // On n'active que les dates possibles
    beforeShowDay: function(date) {
      var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
      if (datesEnabled.indexOf(allDates) != -1) {
        return {
          classes: 'date-possible',
          tooltip: 'Vous pouvez choisir cette date'
        }
      } else {
        return false;
      }
    }

  });

});

/* For better frontend result, add class to active date and add opacity to disabled date */

td.day.disabled {
  opacity: 0.4;
}

td.date-possible {
  background-color: red;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
    </div>
  </div>
</div>

Answer 3

使用“ 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>

在引导日期选择器中显示特定日期

3 个答案: