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