Search code examples
javascriptreact-nativemomentjsmoment-timezone

Having Issue with time format AM/PM moment react native?

I'm having problem on generating am/pm using moment.js. Both of my time, (Start time and End Time) give results on AM like this:

enter image description here

I want the end time to be in PM. Please do help me out. Below is my code and api data image of time.

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:

enter image description here

Solution

  • That's because both your time is in AM. This is ISO format which is in 24 Hours Format

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

    In ISO Format if you want your date to be 02:00 AM - 09:00 PM then your date will be like this

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