angularjs - work - Angular UI Bootstrap Datepicker: agrega una función personalizada a la plantilla

ui bootstrap tpls 2.5 0

Question

Deseo especificar el color de las celdas de fecha de UI angular, agregando color para celdas, por lo que invalidaré la plantilla predeterminada con algo como esto:

<!-- 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>

Y esa es la función (en este momento) en mi testController

$scope.hasEventsCreatedByUser = function(date){
return true;
};

Cambiar de btn-info a btn-danger fue bastante fácil, solo se pega otra clase :) Pero no puedo llamar al método desde mi controlador aquí - ¿hay alguna solución para habilitar la función de llamada desde mis Controladores en la plantilla de UU angular o tengo que anular? de alguna manera predeterminado DatepickerController ?

Descripción más detallada: el usuario puede crear un evento con una fecha especificada. La idea es, por ejemplo, hacer que la celda con la fecha en la que creó el verde

Solución falsa encontrada :

Yo uso "miniController" que añado solo en el botón:

<button ng-controller="miniController" type="button" style="width:100%;" class="btn btn-default btn-sm" .....

Pero sé que esto no es solo una solución, si alguien tiene una idea de cómo resolverlo, estaré muy feliz si decide ayudarme, ¡gracias de antemano!

Answer 1

Sé que no es una buena idea hacer cambios en el archivo fuente. Pero si está bien hacer cambios en el archivo fuente ui bootstrap sí puede lograr diferentes colores. Aquí hay uno que hice.

A continuación hay cambios en la fuente.

Cambio de plantilla del selector de fecha (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" +

Cambio de controlador selector de fecha (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

Cambio de directiva de selector de fecha (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;

Su plantilla de código

<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>

Su controlador

$scope.dateVerified= function(date, mode) {
return true;
$scope.dateAvailable = function(date, mode) {
return true; // to get color
};

Tu 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;
} 

Answer 2

Angular UI Bootstrap Datepicker tiene una propiedad custom-class en la que puedes llamar a tu función para definir la clase:

clase personalizada (fecha, modo) (Valor predeterminado: nulo): una expresión opcional para agregar clases en función de la fecha de paso y el modo actual (día | mes | año).