Question

默认情况下，它会列出上个月和下个月的天数。 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为true时隐藏日期按钮。的纳克隐藏= \＆＃34; dt.secondary \＆＃34;

更新的代码块看起来像

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

我已经为按钮添加了一个新类（btn-secon），如果它是使用现有ng-class指令的dt.secondary。然后编写了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;
}

这将删除作为Button的parentNode的边框。所以它不会显示前一个月＆amp;下个月约会。请注意，我们仅使用css隐藏日期。

Answer 5

我通过使用自定义类选项解决了这个问题，该选项可以使用返回字符串的表达式。它将传递所选日期和模式。但在此范围内，您可以使用this访问日期选择器内部使用的任何内容。

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

然后在你的controller \ component

中

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;
}

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

5 个答案: