Question

bootstrap-ui-datetime-picker我尝试更改（今天，日期，关闭，现在）按钮样式，但不适合我。在我的控制器中，我为picker添加了新的选项，我翻译了这个按钮，并且在documentation中尝试更改类的地方，没有发生任何事情。我的问题是，如何在日期和时间选择器中更改按钮样式？日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'
                }
            }

Answer 1

您可以使用CSS更改按钮样式。此示例更改“关闭”按钮上的样式。

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

<强>＆GT; demo fiddle

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

1 个答案:

AngularJS应用程序