CODEWITHSUNDEEP
angulartypescriptionic-frameworkgoogle-cloud-firestore
xnok
xnok

Reputation: 329

Converting Timestamp to Date Format

Basically what I want to do is to format my timestamp into displaying readable dates. Currently, im receiving a timestamp like this:

2018-10-10T05:00:00.000Z

What I want to do is: 2018-10-10 05:00 PM

Here's how I am querying the document that contains the object with the timestamp:

 ListarConsultas(){
    var query = firebase.firestore().collection("agendaMedicos")
    var auxint = 0;
    this.dataAux
    let auxString = '[';
    //db.collection('Agenda').where("Documento.id", "==", '1').get().then(res => {
    query.where('Deletado', '==', false).get().then(res => {
      res.forEach(item => {

        auxint++;
        auxString += '{"id":"' + item.id + '","agendaMedicos":' + JSON.stringify(item.data()) + '}';
        console.log(item);
        if (res.size != auxint)
          auxString += ', ';
      })
      auxString += ']';
      this.dataJSON = JSON.parse(auxString);
      console.log(auxString);

      console.log(this.dataJSON);
    }).catch(err => {
      console.log('Ocorreu um erro ' + err);
    });
  }

How i am doing to display it on HTML

<ion-content padding>
    <div padding-top class="card" *ngFor="let data of dataJSON">
        <div class="card__consulta avaliar">
            <div class="card__consulta--header">
                <h3>Consulta em cardiologia - {{data?.agendaMedicos?.Documento?.Especialidade}}</h3>
                <span>Cardiologia</span>
            </div>
            <div class="card__consulta--content">
                <span>Atendimento realizado em: {{data.agendaMedicos.Documento.HoraFim}}</span>
            </div>
            <ion-row align-items-center class="card__consulta--footer">
                <ion-col>
                    <span>Código de confirmação:</span>
                    <strong>99887</strong>
                </ion-col>
                <ion-col col-5 center text-center>
                    <button class="btn btn-outline-secondary">
                        Avaliar
                    </button>
                </ion-col>
            </ion-row>
        </div>
    </div>
</ion-content>

Upvotes: 0

Views: 1217

Answers (1)

trk
trk

Reputation: 2236

hope this solution works for you. I think many methods defined here are almost like re-inventing the wheel since I know libraries which might just format dates based on a formatting string. 

//dateString will take values like '2018-10-10T23:00:00.000Z'
function computeDateString(dateString) {
    var input = new Date(Date.parse(dateString))
    var padder = function (val) {
        return pad(val)
    }
    var time = [format12Hour(input.getHours()), input.getMinutes(), input.getSeconds()].map(padder).join(':')
    var date = [input.getMonth(), input.getDate(), input.getFullYear()].map(padder).join('-')
    return [date, time, getAMPM(input.getHours())].join(' ')
}

function pad(val) {
    return (val < 10) ? '0' + val : val
}

function format12Hour(val) {
    var val = (val+1) > 12 ? val-12:val
    return val === 0? 12:val
}

function getAMPM(val) {
    return val > 12 ? 'PM':'AM'
}
//prints 09-10-2018 10:30:00 AM
console.log(computeDateString('2018-10-10T23:00:00.000Z'))

Hope this helps.

Upvotes: 1

Related Questions