bootstrap-ui-datetime-picker更改按钮样式 [英] bootstrap-ui-datetime-picker change button style

问题描述

with bootstrap-ui-datetime-picker 我尝试改变（今天，日期，关闭，现在）按钮样式，但不适用于我。
在我的控制器中，我为翻译这个按钮的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：$过滤器（translate）（TODAY），
 cls：'btn-sm btn-default button_pv'
}，
今天：{
 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' 
}，
取消：{
显示：false，
文本：'取消'，
 cls：'btn-sm btn-default button_pv'
 } 
} 
  

解决方案

风格通过使用CSS。

  .datetime-picker-dropdown .my-button {
背景颜色：黑色; 
颜色：白色; 
 
 
 
 $ h $ 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'
}，
今天：{
 show：true，
 text：'Today'，
 cls：'btn-sm btn-default'
}，
 clear：{
 show：true，
 text：'Clear'，
 cls：'btn-sm btn-default'
}，
日期：{
 show： true，
 text：'Date'，
 cls：'btn-sm btn-default'
}，
时间：{
 show：true，
文本：'时间'，
 cls：'btn-sm btn-default'
}，
关闭：{
显示：true，
 text：'关闭'，
 cls：'btn-sm my-button'
}，
取消：{
显示：false，
文本：'取消'，$ b $公元前ls：'btn-sm btn-default'
} 
} 
 
 
 this.datePickerOptions = {
 showMeridian：false 
} 
 
 this.date = {
 value：new Date（），
 showFlag：false 
}; 
 
 this.openCalendar = function（e，date）{
 that.open [date] = true; 
}; 
}）; 
  
 > 演示小提琴   
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'
                }
            }

解决方案
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

                        
这篇关于bootstrap-ui-datetime-picker更改按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！