我知道對源文件進行更改不是一個好主意。但是,如果您可以在ui bootstrap源文件中進行更改,那麼您可以嘗試不同的顏色。這是我所做的一個。
以下是源代碼的變化。
日期選擇器模板變化(datepicker.html)
<tr ng-repeat=\"row in rows\">\n" +
" <td ng-show=\"showWeekNumbers\" class=\"text-center\"><em>{{ getWeekNumber(row) }}</em></td>\n" +
" <td ng-repeat=\"dt in row\" class=\"text-center\">\n" +
" <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'dt-disabled':dt.disabled,'btn-info': dt.selected,'dt-selected': dt.selected,'dt-available':(dt.verified && dt.available),'dt-verified':dt.verified}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" +
" </td>\n" +
" </tr>\n" +
日期選取器控制器的變化(DatepickerController)
//Your modification starts
this.dateVerified = function(date,mode){
var currentMode = this.modes[mode || 0];
return ($scope.dateVerified && $scope.dateVerified({date: date, mode: currentMode.name}))
}
this.dateAvailable = function(date,mode){
var currentMode = this.modes[mode || 0];
return ($scope.dateAvailable && $scope.dateAvailable({date: date, mode: currentMode.name}))
}
//your modification end
日期選取器指令改變(日期選擇器)
.directive('datepicker', ['dateFilter', '$parse', 'datepickerConfig', '$log', function (dateFilter, $parse, datepickerConfig, $log) {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/datepicker.html',
scope: {
dateDisabled: '&',
//your modification starts here
dateVerified:'&',
dateAvailable:'&',
//Your modification ends here
},
ngModel.$setValidity('date', valid);
var currentMode = datepickerCtrl.modes[mode], data = currentMode.getVisibleDates(selected, date);
angular.forEach(data.objects, function(obj) {
obj.disabled = datepickerCtrl.isDisabled(obj.date, mode);
});
//your modification starts here
//set dateVerfied
if(datepickerCtrl.dateVerified){
angular.forEach(data.objects, function(obj) {
obj.verified = datepickerCtrl.dateVerified(obj.date, mode);
});
}
//set date availabe
if(datepickerCtrl.dateAvailable){
angular.forEach(data.objects, function(obj) {
obj.available = datepickerCtrl.dateAvailable(obj.date, mode);
});
}
//Your modification ends here
ngModel.$setValidity('date-disabled', (!date || !datepickerCtrl.isDisabled(date)));
scope.rows = split(data.objects, currentMode.split);
scope.labels = data.labels || [];
scope.title = data.title;
您的代碼模板
<datepicker ng-model="model.selectedDate" ng-click="dateClicked();" date-format="yyyy-MM-dd" date-type="string" ng-class="{'opacity-2':model.loadingDate}" style="width: 395px;height: 230px;margin:0 auto;" date-disabled="isDateNonAvailableDate(date, mode)" date-verified="dateVerified(date, mode);" date-available="dateAvailable(date, mode);" show-weeks="true" class="well well-sm" close-text="Close"></datepicker>
你的控制器
$scope.dateVerified= function(date, mode) {
return true;
$scope.dateAvailable = function(date, mode) {
return true; // to get color
};
你的CSS
.dt-available{
color: #fff;
background-color: green !important;
border-color: green !important;
}
.dt-disabled{
color: #fff;
background-color: red !important;
border-color: red !important;
}
.dt-selected{
color: #fff;
background-color: blue !important;
border-color: blue !important;
}
也許你可以通過DatePicker模板中的'$ parent.hasEventCreatedByUser(myDate)'來訪問你的控制器函數。試一試。 – 2015-01-26 21:17:39
@HimmetAvsar不幸的是,它不起作用。但我創建了「miniController」,我只使用按鈕與我的功能,並以某種方式它的作品:) – 2015-01-26 21:23:04
http://stackoverflow.com/questions/35872958/disable-specific-single-date-and-multiple-dates -in-angularjs-only-datepicker-an/35874264?noredirect = 1#comment59706187_35874264多數民衆贊成在所有你需要我猜! – 2016-03-16 11:12:30