在 bootstrap 日期选择器中显示特定日期

Question

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

见下图。我就是这样用一个select框来临时解决问题的

这是我想要的输出结果

它应该是一个日期选择器，只启用了我从数据库接收到的那些日期。其他日期应该被禁用我尝试在 google 上搜索它，但找不到解决方案。这可能使用 bootstrap 日期选择器吗？如果是，请提出解决方法。

Answer 1

您可以使用 beforeShowDay 函数仅启用从后端系统 return 编辑的日期。

文档here

此函数针对每个日期执行，它检查它是否存在于适用日期列表中，returns true 如果存在并启用它，否则 returns 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 函数还允许您 return 类自定义样式

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

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

Answer 3

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

documentation不是很清楚，也没有例子，但是你可以看到一个函数，它以日期作为参数，returns一个布尔值，表示是否这个日期是可选的

在此代码段中，以 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>

在 bootstrap 日期选择器中显示特定日期

Display specific dates in bootstrap datepicker

javascript

datepicker

bootstrap-datepicker