Angular ui-bootstrap-datepicker change color on click

Question

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

svarog · Accepted Answer · 2018-02-01 06:37:49Z

1

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

edited Feb 1, 2018 at 6:37

answered Jan 31, 2018 at 21:09

svarog

9,8855 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1438038 · Accepted Answer · 2021-06-04 09:03:59Z

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 = [];

Collectives™ on Stack Overflow

Angular ui-bootstrap-datepicker change color on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related