0

Tengo dos horas, inicio y final, quiero recorrer ambas y mostrar un array con ngfor algo así:

introducir la descripción de la imagen aquí

Actualmente obtengo la hora de inicio y la hora final de un objeto y lo formateo con momentJS:

   // Mapeo el objeto para obtener la hora de inicio y almaceno en variable start
    this.start = this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(initialTimeStr => initialTimeStr.initialTimeStr));
    console.log('start', this.start);
    //Mapeo el objeto para obtener la hora de inicio y almaceno en variable end
    this.end = this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(finalTimeStr => finalTimeStr.finalTimeStr) );
    console.log('end', this.end);
    //Formateo las horas
    let start = moment(this.start, "HH:mm");
    let end = moment(this.end, "HH:mm");
    //let diff = end.subtract(start);

    console.log('let start', start);
    console.log('let end', end);
    //intento obtener el rango
    let rangoHoras = momentRange.range(start, end);

    //rango start y end
    rangoHoras.start.format('HH:mm');
    rangoHoras.end.format('HH:mm');

    console.log('range start', start);
    console.log('range', rangoHoras);

    //  this.selectedPlace = this.bookingService.bookingModel.affiliate?.attentionSchedules.filter(schedule => schedule.place._id === this.addressID)
    console.log('hourEnd :>>', this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(finalTimeStr => finalTimeStr.finalTimeStr)));
    
    //Si ha seleccionado el lugar
    if(this.selectedPlace){
      console.log('hourStart :>>', this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(initialTimeStr => initialTimeStr.initialTimeStr)));
    }

¿Cómo podría hacerlo? ¿Cómo obtengo de un array el rango de esta hora con una diferencia de una hora aplicando lib Moment JS?

1
  • ¿Has intentado algo?
    – fredyfx
    el 8 dic. 2021 a las 22:22

1 respuesta 1

0

Hay una librería que puedes usar para separar el rango que ya tienes en múltiples rangos donde tu especificas como se va a separar.

moment-range-split

En tu caso especifico, teniendo como base tu rango generado, solo lo pasas por la función split que te proporciona la librería, te deberá regresar un array de rangos donde cada uno contiene el inicio y fin de el periodo que necesitas.

    const { range } = extendMoment(moment);
    const { split } = require("moment-range-split");

    var start = new Date(2021, 11, 8, 9);
    var end = new Date(2021, 11, 8, 13);


    let rangoHoras = range(start, end);
    console.log(rangoHoras);
    /*
    DateRange
      end: Moment
      start: Moment
    */
    var horas = split(rangoHoras, "hours");

    console.log(this.horas);
    /*    
        Array(4)
        0: DateRange {start: Moment, end: Moment}
        1: DateRange {start: Moment, end: Moment}
        2: DateRange {start: Moment, end: Moment}
        3: DateRange {start: Moment, end: Moment}
        length: 4
    */

Te dejo un ejemplo funcionando en Angular.

https://codesandbox.io/s/silly-williams-9hyvw?file=/src/app/app.component.ts

2
  • Hola! Primeramente muchas gracias por responderme, enserio muchas gracias no sabes cuantas veces he intentado pero no lo logro, mira probe tu ejemplo pero me dice lo siguiente: ERROR TypeError: Cannot read properties of undefined (reading 'startOf') Te dejo el repo, tal vez le hechas un vistazo y tu encuentras más rapido el error, yo no pude: github.com/IzliaB/HTML-Booking/blob/main/…
    – Izlia
    el 9 dic. 2021 a las 1:45
  • this.start = new Date(2021, 11, 8, end);, aquí yo solo puse una fecha genérica, ese es el constructor, mas bien a this.start asigna la fecha, pero lo traes de una variable attentionSchedules.map(schedule => schedule.schedules.map, solo es cuestion de revisar el objeto y asegurar que en this.start tenga una fecha valida. el 9 dic. 2021 a las 1:59

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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