date - uib - ui bootstrap tpls 2.5 0

Resalte las fechas específicas en UI angular DatePicker

Question

Estoy usando la directiva datepicker de angular-ui y necesito renderizar algunas de las fechas con texto coloreado. He encontrado ejemplos de esto para el selector de fecha bootstrap usando el evento beforeShowDay pero no puedo encontrar nada para el datepicker angular-ui. Soy bastante nuevo en angular y angular-ui y agradecería cualquier sugerencia.

Answer 1

Si todavía estás en esto, estoy en ese problema también ahora y aquí hay un resumen de una posible solución en la que pensé:

1. Obtenga el año y el mes actual usando un controlador para el evento ng-change
2. Formatee el año y el mes para que sea a las 12 a. M. Del comienzo del mes
3. Seleccione los días de ese mes con eventos de la base de datos (para MySQL algo como: SELECT DAYOFMONTH(eventDate) FROM eventTable WHERE eventDate >= date AND eventDate <= date + INTERVAL 1 MONTH
4. Pase esta matriz a una función javascript y cree una matriz inversa tal que day [x] sea verdadera cuando x pertenece a un número (la fecha) devuelto desde el paso 3, y el día [y] es falso cuando y es un número que no está en formación.
5. Pase la matriz del paso 4 a la directiva datepicker (suponga que está almacenado como eventfulDays)
6. Use ng-class = "{''highlight'': eventfulDays [x] == true}" para resaltarlo.

¡No lo he probado, pero probablemente lo implementaré pronto!

Answer 2

 <input type="text" ng-model="startDate" datetime-picker="MM/dd/yyyy" datepicker-options="datepickerOptions" button-bar="false" enable-time="false" is-open="isopen" datepicker-append-to-body="true" />

Agregue customClass en su datepicker-options en el controlador

datepickerOptions: {
customClass: getDayClass,
showWeeks: false,
startingDay: 1,
minDate: new Date(date.getFullYear(),
date.getMonth(), date.getDate())
}

Llame a getDayClass () Y en for loop puede escribir lógica para agregar clases a múltiples fechas, por ejemplo:

 function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === ''day'') {
for (var j = 0; j < $scope.dates.length; j++) {
var currentTime=moment().valueOf();
var startDate=moment(startDate).valueOf();
if(currentTime<startDate){
return ''highlight-current-date'' ;//class name
}
}
return '''';
}
}

Agregue esta clase en su html

 <style>.highlight-current-date{
background: LightSkyBlue;
}
</style>