Angular UI Datepicker 将天数限制为一个月

Question

我正在使用datepicker for AngularUI。

默认情况下，它会列出上个月和下个月的天数。 Here's a picture.

我如何让这些日子不可见。我希望第一天永远是星期天。因此，应在列的顶部列出星期天、星期一、星期二等日期。

Answer 1

你可以用 css 做到这一点：

.text-muted {
  color: transparent;
}

http://plnkr.co/EOS6geIcM5KO6tBwlxZF

但是，您可能需要使其更具体，以避免干扰可能使用 text-muted 的其他引导元素。

更新 要进一步禁用现在不可见的日子，您可以自定义disable 每天引用的ng-disable 函数。例如：

$scope.disabled = function(date, mode) {
  return date.getMonth() !== $scope.dt.getMonth();
};

这过于简单，但适用于初始日期，应该可以帮助您入门。

Answer 2

我在 angularUI 文件中修改了 day.html 创建代码块（在我的例子中文件名为 ui-bootstrap-tpls-0.12.1.js） 当 dt.seconday 为真时隐藏日期按钮。 ng-hide=\"dt.secondary\"

更新的代码块看起来像

    angular.module("template/datepicker/day.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/day.html",
    "<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
    "  <thead>\n" +
    "    <tr>\n" +
    "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" +
    "      <th colspan=\"{{5 + showWeeks}}\"><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
    "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" +
    "    </tr>\n" +
    "    <tr>\n" +
    "      <th ng-show=\"showWeeks\" class=\"text-center\"></th>\n" +
    "      <th ng-repeat=\"label in labels track by $index\" class=\"text-center\"><small aria-label=\"{{label.full}}\">{{label.abbr}}</small></th>\n" +
    "    </tr>\n" +
    "  </thead>\n" +
    "  <tbody>\n" +
    "    <tr ng-repeat=\"row in rows track by $index\">\n" +
    "      <td ng-show=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
    "      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{dt.uid}}\" aria-disabled=\"{{!!dt.disabled}}\">\n" +
    "        <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" ng-hide=\"dt.secondary\" tabindex=\"-1\"><span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span></button>\n" +
    "      </td>\n" +
    "    </tr>\n" +
    "  </tbody>\n" +
    "</table>\n" +
    "");
}]);

Answer 3

如果它是使用现有 ng-class 指令的 dt.secondary，我已向按钮添加了一个新类 (btn-secon)。 然后编写针对此类的 css，通过设置 display:none 来隐藏该按钮。现在按钮的代码如下所示：

    <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt), 'btn-secon': dt.secondary}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" ng-hide=\"dt.secondary\" tabindex=\"-1\">
<span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span>
    </button>

Answer 4

你可以试试这个；

function hideDates(){
   var span = document.getElementsByClassName("text-muted");
   for(var i = 0; i<span.length;i++){
     span[i].parentNode.classList.add('remove-borders');
   }
}
Call hideDates() function on every Month change. You can hide the dates.
In css:
.remove-borders{
  border: none !important;
}
.text-muted{
  color:transparent;
}
table tr td button.remove-borders:hover,
table tr td button.remove-borders:active,
table tr td button.remove-borders:focus{
   background: #fff;
   color: #fff;
   pointer-events: none;
   outline: none;
}

这将删除作为按钮的 parentNode 的边框。所以它不会显示上个月和下个月的日期。请注意，我们仅使用 css 隐藏日期。

Answer 5

我通过使用自定义类选项解决了这个问题，该选项可以采用返回字符串的表达式。它通过选定的日期和模式。但在其中，您可以使用this 访问日期选择器内部使用的几乎所有内容。

<div uib-datepicker ng-model="$ctrl.selected" datepicker-options="{ customClass: $ctrl.getCustomClass }"></div>

然后在你的控制器\组件中

getCustomClass (date, mode) {
  let customClass = '';
  if (mode === 'day') {
    let monthToCheck = date.getMonth();

    // 'this' refers to the datepicker's scope so you can get access to all it's goodies
    let activeMonth = this.datepicker.activeDate.getMonth();

    if (monthToCheck === activeMonth) {
       customClass = 'datepicker-day-current-month';
    }
  }

  return customClass;
}

现在在您网站的 CSS 中，您可以执行以下操作：

.uib-datepicker .uib-day:not(.datepicker-day-current-month) {
  visibility: hidden;
}