angularjs - datepicker angular material



Angular UI日期選擇器將天數限制為一個月 (3)

我正在使用AngularUI的datepicker

默認情況下,它會列出上個月和下個月的日期。 這是一張照片。

我如何讓這些日子看不見 我希望第一天永遠是星期天。 所以日子應該列在周日,週一,週二等列上。


你可以用CSS做到這一點:

.text-muted {
  color: transparent;
}

http://plnkr.co/EOS6geIcM5KO6tBwlxZF

但是,您可能需要使其更具體,以避免干擾可能使用text-muted其他引導程序元素。

更新若要進一步並禁用現在不可見的日子,您可以自定義每天由ng-disable引用的disable功能。 例如:

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

這太簡單了,但是適用於最初的日期,應該讓你開始。


我在angularUI文件中修改day.html創建代碼塊(在我的情況下,文件名是ui-bootstrap-tpls-0.12.1.js ),當dt.seconday為true時隱藏日期按鈕。 NG-隱藏= \“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" +
    "");
}]);

你可以試試

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

這將刪除父按鈕的邊界。 所以它不會顯示上個月和下個月的日期。 請注意,我們只隱藏了CSS的日期。





angular-ui