bootstrap-ui-datetime-picker change button style

问题:

with bootstrap-ui-datetime-picker I try to change (today, date, close, now) button style, but not working for me. In my controller, I add new options for picker where I translate this buttons, and where I try to change class like here in documentation nothing happened. My question is, how to change button style in date and time picker? thnx

  date: date4.setDate(date4.getDate()),
            datepickerOptions: {
                showWeeks: true,
                startingDay: 1,
                // minDate: date4.setDate((new Date()).getDate() + 1);
                minDate: date4
            },
            buttonBar: {
                show: true,
                now: {
                    show: true,
                    text: $filter("translate")("TODAY"),
                    cls: 'btn-sm btn-default button_pv'
                },
                today: {
                    show: true,
                    text: $filter("translate")("TODAY"),
                    cls: 'btn-sm btn-default button_pv'
                },
                clear: {
                    show: true,
                    text: $filter("translate")("CLEAR"),
                    cls: 'btn-sm btn-default button_pv'
                },
                date: {
                    show: true,
                    text: $filter("translate")("DATE"),
                    cls: 'btn-sm btn-default button_pv'
                },
                time: {
                    show: true,
                    text: $filter("translate")("TIME"),
                    cls: 'btn-sm btn-default button_pv'
                },
                close: {
                    show: true,
                    text: $filter("translate")("CLOSE"),
                    cls: 'btn-sm btn-default button_pv'
                },
                cancel: {
                    show: false,
                    text: 'Cancel',
                    cls: 'btn-sm btn-default button_pv'
                }
            }

回答1:

You can change the button style by using CSS. This example changes the style on the "close" button.

.datetime-picker-dropdown .my-button {
  background-color: black;
  color: white;
}

AngularJS application

var myApp = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

myApp.controller('MyCtrl', function($scope) {
  var that = this;

  this.buttonBar = {
    show: true,
    now: {
        show: true,
        text: 'Now',
        cls: 'btn-sm btn-default'
    },
    today: {
        show: true,
        text: 'Today',
        cls: 'btn-sm btn-default'
    },
    clear: {
        show: true,
        text: 'Clear',
        cls: 'btn-sm btn-default'
    },
    date: {
        show: true,
        text: 'Date',
        cls: 'btn-sm btn-default'
    },
    time: {
        show: true,
        text: 'Time',
        cls: 'btn-sm btn-default'
    },
    close: {
        show: true,
        text: 'Close',
        cls: 'btn-sm my-button'
    },
    cancel: {
        show: false,
        text: 'Cancel',
        cls: 'btn-sm btn-default'
    }
  }


  this.datePickerOptions = {
    showMeridian: false
  }

  this.date = {
    value: new Date(),
    showFlag: false
  };

  this.openCalendar = function(e, date) {
    that.open[date] = true;
  };
});

> demo fiddle