Quiero para especificar el color de Angular de la interfaz de usuario fecha de las células, mediante la adición de color para las células, por lo que me anular la configuración predeterminada de la plantilla 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 que es (por el momento) de la función en mi testController

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

Cambio de btn-info a btn-danger fue bastante fácil, es sólo pegar otra clase:) Pero no puedo llamar a un método de mi controlador de aquí – hay alguna solución para habilitar la función de llamada de mi Controladores Angular de interfaz de usuario de la plantilla o tengo que cambiar en alguna forma predeterminada DatepickerController?

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

Burlarse de la solución encontrada:

Yo uso «miniController» que me anexar sólo en el botón:

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

Pero sé que esto es sólo el simulacro no es una solución – si alguien tiene una idea de cómo resolverlo, voy a ser muy feliz si decide ayudarme, gracias de antemano!

  • Tal vez usted puede acceder a su función de control con $parent.hasEventCreatedByUser(myDate) en el selector de fecha de la plantilla. Darle una oportunidad.
  • Por desgracia, no funciona. Pero he creado «miniController», que yo sólo uso en el botón con mi función, y que de alguna manera funciona 🙂
  • stackoverflow.com/questions/35872958/… eso es todo lo que usted necesita, supongo!

2 Comentarios

  1. 7

    Sé que no es una buena idea para hacer cambios en el archivo de origen. Pero Si usted está bien de hacer cambios en la interfaz de usuario de bootstrap archivo de origen sí se puede lograr de diferentes colores. Aquí es uno que he hecho.

    A continuación son los cambios en la fuente.

    Fecha selector de plantilla de cambio (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" +

    Selector de fecha Controlador de cambio (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

    Selector de fecha directiva cambiar (datepicker)

    El código de la plantilla

    Su controlador

    Tu css

    Angular de la interfaz de usuario de Bootstrap Datepicker - añadir función personalizada a la plantilla

    • Alguna idea de cómo hacer eso sin cambiar el archivo de origen?
  2. 4

    Angular de la interfaz de usuario de Bootstrap Datepicker tiene la propiedad custom-class en el que usted puede llamar a la función para la definición de la clase:

    personalizado de clase (fecha, modo) (por Defecto: null) : Una expresión opcional para
    agregar clases de acuerdo en pasar la fecha y el modo de corriente (día|mes|año).

Dejar respuesta

Please enter your comment!
Please enter your name here