bootstrap-ui-datetime-picker更改按钮样式 [英] bootstrap-ui-datetime-picker change button style
本文介绍了bootstrap-ui-datetime-picker更改按钮样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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;
};
});
这篇关于bootstrap-ui-datetime-picker更改按钮样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文