Angulaire UI Bootstrap Datepicker - ajouter la fonction personnalisée pour modèle

Je veux spécifier la couleur de l'Angulaire de l'INTERFACE utilisateur cellules de date en ajoutant de la couleur pour les cellules, donc je remplace le modèle par défaut avec quelque chose comme ceci:

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

Et qui est (pour le moment) de la fonction dans mon testController

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

Changement de btn-info à btn-danger était assez facile, il n'en coller une autre classe:) Mais je ne peux pas appeler la méthode de mon contrôleur de ici - est-il une solution pour activer la fonction d'appel de mon Contrôleurs Angulaire de l'INTERFACE utilisateur modèle ou je dois remplacer en quelque sorte par défaut DatepickerController?

Description plus détaillée: l'utilisateur peut créer un événement avec la date spécifiée. L'idée est, par exemple, de faire de cellule avec affichage de la date à laquelle il a créé vert

Se moquer de solution trouvée:

- Je utiliser "miniController", dont j'ai ajouter uniquement sur le bouton:

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

Mais je sais que ce n'est que simulacre n'est pas une solution - si quelqu'un a une idée de comment le résoudre, je serai très heureux si vous décidez de m'aider merci d'avance!

Peut-être que vous pouvez accéder à votre fonction de contrôleur de avec $parent.hasEventCreatedByUser(myDate) dans le DatePicker modèle. Lui donner un essai.
Malheureusement, il ne fonctionne pas. Mais j'ai créé "miniController" que j'utilise uniquement sur le bouton avec ma fonction, et d'une certaine manière cela fonctionne 🙂
stackoverflow.com/questions/35872958/... c'est tout ce que vous avez besoin, je suppose!

OriginalL'auteur Radek Anuszewski | 2015-01-26

Je sais que ce n'est pas une bonne idée de faire des modifications dans le fichier source. Mais Si vous êtes d'accord de faire des changements dans l'interface utilisateur de bootstrap fichier source oui, vous pouvez obtenir différentes couleurs. Voici celui que j'ai fait.

Ci-dessous sont des changements dans la source.

Date sélecteur de changement de modèle (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" +

Date du Contrôleur de Sélecteur de changement (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

Sélecteur de Date modification de la directive (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;

Votre modèle de code

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

Votre contrôleur

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

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

Angulaire UI Bootstrap Datepicker - ajouter la fonction personnalisée pour modèle

Toutes les idées sur la façon de le faire sans modifier le fichier source?

OriginalL'auteur anandaravindan

4

Angulaire UI Bootstrap Datepicker a bien custom-class dans lequel vous pouvez appeler votre fonction pour la définition de la classe:

personnalisé-classe (date, mode) (par Défaut: vide) : Une expression en option pour
ajouter des classes basées sur la transmission de la date et du mode en cours (jour|mois|année).

OriginalL'auteur Olga Akhmetova

Vous devez vous connecter pour publier un commentaire.