bootstrap-ui-datetime-picker 更改按钮样式

Question

with bootstrap-ui-datetime-picker 我尝试更改（今天、日期、关闭、现在）按钮样式，但对我不起作用。在我的控制器中，我为选择器添加了新选项，我在其中翻译了这个按钮，并且我尝试像这里一样更改 class 在 documentation 中没有任何反应。我的问题是，如何更改日期和时间选择器中的按钮样式？谢谢

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

Answer 1

您可以使用 CSS 更改按钮样式。此示例更改 "close" 按钮的样式。

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

AngularJS申请

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

bootstrap-ui-datetime-picker 更改按钮样式

bootstrap-ui-datetime-picker change button style

html

angularjs

twitter-bootstrap-3

bootstrap-datetimepicker

AngularJS申请