Experiencing problems with the time format in AM/PM while using moment in a react native

I'm encountering difficulties when it comes to generating AM/PM using moment.js. Currently, both my start time and end time are displaying in the AM format as shown below:

https://i.sstatic.net/DtinC.png

I would like the end time to be in PM. Any assistance with this issue would be greatly appreciated. Below you will find my code along with an image of the API data for reference.

return (
            <ScrollView style={[GlobalStyle.CustomScrollView]}>
                <HeaderBar3/>
                <Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
                <View style={[GlobalStyle.EventDetailView]}>
                    <Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
                    <Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
                    <Text style={[GlobalStyle.EventDate]}>{moment(eventData.starts_on).format('DD MMMM YYYY')}</Text>
                    <Text style={[GlobalStyle.EventTime]}>{moment(eventData.starts_on).format('hh:mm A')} {'-'} {moment(eventData.ends_on).format('hh:mm A')}</Text>

API Data Image:

https://i.sstatic.net/2Dm4t.png

Answer №1

It seems that the confusion arose because both times are displayed in AM. The format being used is ISO, which follows a 24-hour clock system.

"starts_on": "2022-03-19T02:00:00.000000Z",
"ends_on": "2022-03-19T09:00:00.000000Z",

In order to display your date as 02:00 AM - 09:00 PM in ISO Format, the correct timing should be:

"starts_on": "2022-03-19T02:00:00.000000Z",
"ends_on": "2022-03-19T21:00:00.000000Z",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Is there a way to access mongodb count results in nodejs so that the outcome can be easily retrieved by asynchronous requests? Currently, I am able to retrieve the result and update the database successfully. However, when it comes to accessing the varia ...

The Next.js page suddenly disappears after a moment

Out of the blue, my next.js page suddenly went blank for no apparent reason. I didn't make any changes, it just happened. I attempted to restart my dev server and even deleted the '.next' folder, but nothing seemed to fix the issue. Despite ...

Tips for concealing a product item when the price is listed as 0

I am facing an issue where some of my products have a price of 0. In order to address this problem, I would like to hide those products from the collection pages. My question is: How can I hide the .productItem or .ItemOrj if the .productPrice span is eq ...

Undefined boolean when passing to AngularJS directive

I developed a custom directive that allows for the addition of a gradient background color in AngularJS: .directive('colouredTile', function () { return { restrict: 'A', controller: 'ColouredTileController&apos ...

Create a dynamic pulse line on an HTML5 Canvas

Hello everyone, I've been attempting to grasp HTML5 Canvas animation without much success. I was hoping to create the shape below by animating a custom shape every 10 seconds interval. Unfortunately, I got lost in the math and ended up manually writi ...

Storing a temporary value within an ng-repeat iteration in AngularJS

A unique and interesting query arises when dealing with random value generation. Here is a snippet of code that showcases how to achieve this: function randomize() { return function (input) { if (input !== null && input !== undefined & ...

Could you please explain how to make a WordPress navigation menu that switches the background image when hovered over?

I came across a website with a very interesting navigation style that caught my attention. You can see it here: . What intrigued me the most was how when you hover over each menu item, the main picture changes. I attempted to incorporate jQuery into the c ...

Lambda function failing to execute Auth0 methods through the Auth0 node-auth0 SDK

I am working with a lambda function that triggers when a message is added to the SQS queue. Within the message, there is a userId that I want to connect to using the Auth0 node SDK. The code snippet for my GetUserDetails function below shows that it logs ...

Turn off a feature on older buttons

For my project, I am looking to dynamically add specific elements like buttons. However, every time a new button is added, the function call for the old button gets duplicated. var btnElem ='<button type="button"class="doSomething">Button< ...

Implementing authentication fallback during re-login when a session expires in a web application built with React, Node.js, and Mariadb database

Greetings everyone, this is my debut post here so kindly bear with me :D. Currently, I am in the process of developing a social app where I am incorporating a fallback mechanism for situations when my database goes offline. Within my Login.jsx component, I ...

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: https://i.sstatic.net/HoVEC.png Now, how can I style the tabs to look like this: https://i.sstatic.net/dbsRj.png This is my current code: <b-card no-body ...

php generate a new file within a specific folder

In the following code snippet, a check is performed for the existence of a directory named 'dat'. If the directory does not exist, it is created. This functionality works correctly; however, the goal is to write a file to this directory that can ...

Locating numerous words within a given string

In my quest to identify specific words within a comma-separated log, I have encountered an issue. The current code snippet effectively locates individual words, but struggles to find all three words together in the log. $log = "Left Side Turn, Left Side ...

Tips for preventing the first character of a word in the input box from being "-"

I'm looking for a solution to prevent the first character in a text box from being a "-" symbol. $(document).on("keypress", "#form_name", function() { if ($('#form_name').val().substr(0, 1) == "-") { return true } else { return ...

Search for data within a nested array using MongoDB aggregation techniques

In my data structure, I have nested array documents that are outlined below: countries: [ { "id": "id of country", "cities": [ { "id": "id of city 1", "areas": [ ...

Incorporate the casper function within the casper.evaluate() method

Is it possible to use the casper function inside casper.evaluate() with jQuery code? I need to iterate through elements in a way similar to how jQuery does. I have loaded the jquery.js library. Here is the script I have tried: casper.evaluate(function() ...

What steps should I take to resolve a plugin error specifically related to index.js while using Cypress?

I am encountering an error in Cypress A plugin has thrown the following error, causing our tests to stop running due to a plugin crash. Please verify your plugins file (/home/dev2/Desktop/kavitaSeffcon/CypressProject/cypress/plugins/index.js) Error: ENOE ...

Steps for running a function upon activation of a React Router:

I'm currently using Reacter Router to manage the routes of my application. For authentication, I am utilizing an OAuth system that provides my application with the following URL: http://localhost/login-meli?code=1234567890 Every time this particular ...

Trying out the basic Angular component using only the ngOnInit method

As a newcomer to testing, I'm looking for guidance on best practices. I have a basic service and component setup that I'd like to test: export class SessionService { fetchFromStorage() { let x = localStorage.getItem('email&a ...