Angular UI Bootstrap Datepicker - 添加自定义函数到模板
Angular UI Bootstrap Datepicker - add custom function to template
我想通过为单元格添加颜色来指定 Angular UI 日期单元格的颜色,所以我用这样的东西覆盖默认模板:
<!-- things from pasted default template, here I change something -->
<!-- btn-danger instead btn-info for clicked date, test if I can change anything-->
<!-- call to function from my own controller-->
<button type="button" style="width:100%;" class="btn btn-default btn-sm"
ng-class="{'btn-danger': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)"
ng-disabled="dt.disabled" tabindex="-1">
<span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current,
'text-success': hasEventsCreatedByUser(dt)}">
{{dt.label}}</span>
</button>
这就是我的 testController
中的(目前)功能
$scope.hasEventsCreatedByUser = function(date){
return true;
};
从 btn-info
更改为 btn-danger
非常简单,只需粘贴另一个 class:) 但是我无法在此处从我的控制器调用方法 - 是否有启用调用的解决方案从我的控制器在 Angular UI 模板中运行,或者我必须以某种方式覆盖默认值 DatepickerController
?
更详细的说明:用户可以创建指定日期的活动。这个想法是,例如,用他创建绿色的日期制作单元格
找到模拟解决方案:
我使用 "miniController",我只在按钮上附加:
<button ng-controller="miniController" type="button" style="width:100%;" class="btn btn-default btn-sm" .....
但我知道这只是模拟而不是解决方案 - 如果有人知道如何解决这个问题,如果决定帮助我,我将非常高兴 - 先谢谢你!
我知道在源文件中进行更改不是一个好主意。但是如果您可以在 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
日期选择器指令更改 (datepicker)
.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;
}
Angular UI Bootstrap Datepicker 有 属性 custom-class
你可以在其中调用定义 class:[=12 的函数=]
custom-class (date, mode) (Default: null) : An optional expression to
add classes based on passing date and current mode (day|month|year).
我想通过为单元格添加颜色来指定 Angular UI 日期单元格的颜色,所以我用这样的东西覆盖默认模板:
<!-- things from pasted default template, here I change something -->
<!-- btn-danger instead btn-info for clicked date, test if I can change anything-->
<!-- call to function from my own controller-->
<button type="button" style="width:100%;" class="btn btn-default btn-sm"
ng-class="{'btn-danger': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)"
ng-disabled="dt.disabled" tabindex="-1">
<span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current,
'text-success': hasEventsCreatedByUser(dt)}">
{{dt.label}}</span>
</button>
这就是我的 testController
$scope.hasEventsCreatedByUser = function(date){
return true;
};
从 btn-info
更改为 btn-danger
非常简单,只需粘贴另一个 class:) 但是我无法在此处从我的控制器调用方法 - 是否有启用调用的解决方案从我的控制器在 Angular UI 模板中运行,或者我必须以某种方式覆盖默认值 DatepickerController
?
更详细的说明:用户可以创建指定日期的活动。这个想法是,例如,用他创建绿色的日期制作单元格
找到模拟解决方案:
我使用 "miniController",我只在按钮上附加:
<button ng-controller="miniController" type="button" style="width:100%;" class="btn btn-default btn-sm" .....
但我知道这只是模拟而不是解决方案 - 如果有人知道如何解决这个问题,如果决定帮助我,我将非常高兴 - 先谢谢你!
我知道在源文件中进行更改不是一个好主意。但是如果您可以在 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
日期选择器指令更改 (datepicker)
.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;
}
Angular UI Bootstrap Datepicker 有 属性 custom-class
你可以在其中调用定义 class:[=12 的函数=]
custom-class (date, mode) (Default: null) : An optional expression to add classes based on passing date and current mode (day|month|year).