3

hola me he montado un calendar de AngularJS (Angular 1), es un programador de novedades donde la gente registra de que hora a que hora estaría disponible o no.

¿Cómo hago para que la fecha en el calendar me la muestre en formato "1 mar 2017 12:00"?

se que con ng-repeat es agregar date:'MMMM dd yyyy' y funciona, pero en el calendar no, yo lo tengo para que al dar click en un elemento del calendario, muestre la información detallada en un cuadro de texto, con el nombre completo y las fechas... no consigo que en ese cuadro de texto me lo muestre con el formato.

  <div class="Calendar" ui-calendar='vm.uiConfig.calendar2' ng-model='vm.eventSources2'></div>
  <div class="col-md-5">
    <div ng-show="vm.selectedEvent" class="alert alert-success" style="margin-top:8px; font-size: 15px; font-weight: normal;">
      <h4 style="margin-top:0px; font-weight: bold;">Detalles:</h4>
      <p>{{vm.selectedEvent.titledetail}}</p>
      <p>{{vm.selectedEvent.dateini | date: 'dd MMMM yyyy, HH:mm'}}</p>
      <p>{{vm.selectedEvent.datefin | date: 'dd MMMM yyyy, HH:mm'}}</p>
      <p>Novedad: {{vm.selectedEvent.description}}</p>
    </div>
  </div>


</div>

me sale así desde: 2017-06-16T11:55:00-05:00

4
  • Si quieres "mar" para Marzo, ha de ser "MMM"
    – lois6b
    el 27 mar. 2017 a las 14:23
  • mi problema no es ese, es que en el cuadro de texto no me funciona el formato, pero debe haber otra manera de hacer que se vea la fecha como quiero.... no funciona el date:'yyyy MMM dd'. el 27 mar. 2017 a las 14:49
  • Si, estoy buscando que puede ser, pero mientras tanto te ponia ese comentario como nota.. Has probado usando nb-bind? (<p ng-bind="vm.selectedEvent.dateini | date:'yyyy MMM dd'"></p>)
    – lois6b
    el 27 mar. 2017 a las 14:58
  • Gracias por tu ayuda, pero sale igual de esa forma. el 27 mar. 2017 a las 15:23

2 respuestas 2

1

Bueno para los que quieran hacerlo ya lo resolví, en el controlador del calendario hay unas variables donde asigno los valores que vienen de la base de datos o un valor del array que trae, estas estan en la función que muestra los datos en el calendario de forma gráfica, lo que hice fue aplicar el formato en esa parte así:

vm.eventSource.push({

dateini: ' desde: ' + $filter('date')(data[i].fechaIni, 'dd-MMMM-yyyy HH:mm'),

start: new Date(data[i].fechaIni),
  end: new Date(data[i].fechaFin),
  allDay: false,
  stick: true
  });

dateIni es una variable donde almaceno la fecha de inicio, luego en el cuadro de texto llamas ese dateIni.

0

Puedes hacer un filtro customizado. Un filtro es una funcionalidad que básicamente te permite transformar cualquier dato en cualquier cosa.

Puedes usar como entrada una cadena de caracteres 'mes/año' o 'mes' y obtener un arreglo en la salida con los días deseados.

Te dejo un demo:

https://github.com/angular-ui/ui-calendar

angular.module('app', [])
  .controller('CalendarioCtrl', function() {
    var vm = this;
    vm.meses = [{
      nombre: 'Enero',
      numero: 1
    }, {
      nombre: 'Febrero',
      numero: 2
    }, {
      nombre: 'Marzo',
      numero: 1
    }, {
      nombre: 'Abril',
      numero: 4
    }, {
      nombre: 'Mayo',
      numero: 5
    }, {
      nombre: 'Junio',
      numero: 6
    }, {
      nombre: 'Julio',
      numero: 7
    }, {
      nombre: 'Agosto',
      numero: 8
    }, {
      nombre: 'Septiembre',
      numero: 9
    }, {
      nombre: 'Octubre',
      numero: 10
    }, {
      nombre: 'Noviembre',
      numero: 11
    }, {
      nombre: 'Diciembre',
      numero: 12
    }];
    vm.semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
  })
  .filter('calendario', function() {
    return function(input) {
      if (input) {
        var result = [];
        var year = moment().year();
        var startDay = moment(input + '/01/' + year);
        var endDay = startDay.clone().endOf('month');
        var prefix = startDay.weekday();
        var dayPrevMonth = startDay.clone().day(0).date();
        var endPrevMonth = startDay.clone().day(0).endOf('month').date();
        if (endPrevMonth - dayPrevMonth < 7) {
          for (var i = dayPrevMonth; i <= endPrevMonth; i++) {
            result.push({
              day: i,
              current: false
            });
          }
        }
        var days = startDay.daysInMonth();
        for (var i = 0; i < days; i++) {
          result.push({
            day: i + 1,
            current: true
          });
        }

        var endNextWeek = endDay.clone().day(7).date();
        for (var i = 1; i < endNextWeek; i++) {
          result.push({
            day: i,
            current: false
          });
        }

        return result;
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div ng-app="app" ng-controller="CalendarioCtrl as vm">
  <select ng-options="mes.numero as mes.nombre for mes in vm.meses" ng-model="vm.selected">
  </select>
  <br>
  <br>
  <div ng-if="vm.selected">
    <ul class="calendar header">
      <li class="day" ng-repeat="dia in vm.semana">{{dia}}</li>
    </ul>
    <ul class="calendar">
      <li class="day" ng-class="{other: !item.current}" ng-repeat="item in vm.selected | calendario track by $index">
        {{item.day}}
      </li>
    </ul>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.