Transforming Time Stamp into Date Structure

Question

Transforming Time Stamp into Date Structure

I am trying to format a timestamp into a more readable date format. Currently, the timestamp I receive looks like this:

2018-10-10T05:00:00.000Z

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

This is how I am querying the document containing the timestamp object:

 ListAppointments(){
    var query = firebase.firestore().collection("doctorAgenda")
    var auxint = 0;
    this.dataAux
    let auxString = '[';
    
    query.where('Deleted', '==', false).get().then(res => {
      res.forEach(item => {

        auxint++;
        auxString += '{"id":"' + item.id + '","doctorAgenda":' + 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('An error occurred ' + err);
    });
  }

This is how I am displaying it in HTML

<ion-content padding>
    <div padding-top class="card" *ngFor="let data of dataJSON">
        <div class="card__appointment review">
            <div class="card__appointment--header">
                <h3>Cardiology appointment - {{data?.doctorAgenda?.Document?.Specialty}}</h3>
                <span>Cardiology</span>
            </div>
            <div class="card__appointment--content">
                <span>Appointment held at: {{data.doctorAgenda.Document.EndTime}}</span>
            </div>
            <ion-row align-items-center class="card__appointment--footer">
                <ion-col>
                    <span>Confirmation code:</span>
                    <strong>99887</strong>
                </ion-col>
                <ion-col col-5 center text-center>
                    <button class="btn btn-outline-secondary">
                        Review
                    </button>
                </ion-col>
            </ion-row>
        </div>
    </div>
</ion-content>

angular typescript ionic-framework google-cloud-firestore

Answer 1

Answer №1

Hopefully this solution suits your needs. It seems that many of the methods mentioned here are akin to reinventing the wheel, as there are libraries available that can easily format dates based on a formatting string.

//dateString will be in the format '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'))

I trust this information proves useful.

Answer 2

Hopefully this solution suits your needs. It seems that many of the methods mentioned here are akin to reinventing the wheel, as there are libraries available that can easily format dates based on a formatting string.

//dateString will be in the format '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'))

I trust this information proves useful.

Transforming Time Stamp into Date Structure

Answer №1

Similar questions

React type error: The argument 'profile' cannot be assigned to the parameter of type 'ComponentType<never>'

Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

Tips for accessing FCM Intent Extras within an IONIC framework

"Learn how to utilize Angular to showcase an array of strings and choose a specific value for

Combining Types in TypeScript: Overriding Field Types

Writing a condition using *ngFor to validate two values

Enhancing ES6 capabilities with Angular polyfills

Troubden array filtration in Angular is malfunctioning

Service consumption across various components is failing to function as intended

Solid Start is having difficulty executing the Create Effect feature

Is there a method to indicate type narrowing to TypeScript following an initial null/undefined validation?

Unable to retrieve React state within the callback function

The classification of a property is determined by the types of the other properties present

Leverage the template pattern in React and react-hook-form to access a parent form property efficiently

An issue occurred in the ngx-bootstrap module at line 8 of the type-checks.d.ts file, displaying the error message: "Cannot find name 'Extract'"

ReactJS - Triggering a timeout reset and reactivation with a single button press

Effective ways to manage extensive forms in Angular 2

The data type 'string' cannot be assigned to the data type 'undefined'

Leveraging TypeScript 2.1 and above with extended tsconfig configurations

Issues with the File plugin in Ionic 2