Angular UI Datepicker Limiting Days to One Month

Question

I'm using the datepicker for AngularUI.

By default it lists the days from the previous month and the next month. Here's a picture.

How do I make these days invisible. I'd like the first day to always be Sunday. So the days should be listed Sunday, Monday, Tuesday, etc on top of the columns.

Answer 1

You can try this;

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

This will remove the borders for the parentNode which is a Button. So It won't show the previous month & next month dates. Note that we are hiding the dates with the css only.

Answer 2

I have added a new class (btn-secon) to the button, if it is dt.secondary using the existing ng-class directive. Then wrote css targetting this class to hide that button by setting display:none. The code of the button now will look as follows:

    <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 3

I modified day.html creation code block in the angularUI file (in my case file name is ui-bootstrap-tpls-0.12.1.js) hide the date button when dt.seconday is true. ng-hide=\"dt.secondary\"

updated code block looks like

    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 4

You could do this with css:

.text-muted {
  color: transparent;
}

http://plnkr.co/EOS6geIcM5KO6tBwlxZF

But, you probably need to make it more specific to avoid interfering with other bootstrap elements that may use text-muted.

Update To go further and disable the now invisible days, you can customize the disable function that is referenced by ng-disable on each day. For example:

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

This is overly simplistic, but works for the initial date and should get you started.

Answer 5

I solved this by using the custom class option which can take an expression that returns a string. It is passed the selected date and the mode. But within that you can use this to access pretty much anything that the datepicker uses internally.

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

then in your 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;
}

And now in your site's css you can do something like this:

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