CODEWITHSUNDEEP
angular-ui-bootstrap
Ela
Ela

Reputation: 879

Angular ui-bootstrap-datepicker change color on click

I'm using ui.bootstrap.datepicker. How can I change the color of a date when I press a button? The styles for 'full' and 'partially' are applied at the beginning, but when I change 'events', I see no change. 

$scope.events = [
        {
            date: new Date(),
            status: 'full'
        },
        {
            date: new Date(),
            status: 'partially'
        }
    ];

vm.open = function () {
        $scope.events[0].date = new Date(2018, 0, 1);
        return $scope.events[0].status;
    }

Upvotes: 0

Views: 681

Answers (2)

user1438038
user1438038

Reputation: 6077

Not sure what your intent is, but you can push new items to the $scope.events array quite easily:

$scope.events.push({
  date: new Date(2018, 0, 1),
  status: 'my-event'
});

The status property corresponds to a CSS class that you can define as desired, to style the event however you want. For example you can highlight the event like this:

.my-event button span {
  background-color: red;
  border-radius: 32px;
  color: black;
}

This will leave you with a small red dot on the specific date, just as the example in the angular-ui documentation showcases. If you'd like to highlight the entire button, try this instead:

.my-event button span {
  background-color: red;
  color: white;
}

To remove or change the highlighting of events, you might want to clear the $scope.events array sometimes (or remove single items):

$scope.events = [];

Upvotes: 0

svarog
svarog

Reputation: 9847

What I've done is I've added an ng-change to the element and I'm calling a function every time the model changes (when you click a datepicker button).

Then I filter the events and remove the one with the matching date

HTML

<div style="display:inline-block; min-height:290px;">
  <div uib-datepicker ng-model="dt" ng-change="clickOnDate(dt)" 
  class="well well-sm" datepicker-options="options"></div>
</div>

JS

$scope.clickOnDate = function(dt) {
    $scope.events = $scope.events.filter(function(d) {
        return (
          !(d.date.getFullYear() === dt.getFullYear() &&
            d.date.getMonth() === dt.getMonth() &&
            d.date.getDate() === dt.getDate())
        );
    })
}

I'm using the Array.prototype.filter method above.

Demo plunker

Upvotes: 1

Related Questions