1

I am new to React Native and I'm having the hardest time trying to do something I've done many times in PHP and other languages.

There are many ways to deal with time zone conversion and formatting of dates but, I'm just having no luck and I've spent WAY too much time on this.

Here is what I'm trying to do:

  1. Take the date which is coming from MariaDB/MySQL format like 2021-09-11 00:22:00 etc and is stored in UTC time. I have this in a variable and ready to go and convert in my React App.
  2. Convert MySql date as shown above to local time zone based on the user's device time zone OR a specified time zone which I can specify for this user (I store this in my DB already).
  3. Take the date in step 2 and format it in various ways like 12 hour format, 24 hour format, day of week version day number of the week and so on.

I'm able to do these things quite easily in PHP for example and I thought I had previously done similar in vanilla JS but can't remember. For the last two days I have been in this rabbit hole I fell down dealing with just dates.. Uggg help me get out.

I am currently using the code below and it does what I want on IOS and I thought I was done until I tested on Android and realized that it shows military time on Android. Uggg..

I have seen recommendations to use moment.js but when I looked over that it basically says that it's old school and it shouldn't be used for modern coding.

I am looking for something modern and not incredibly complicated, I don't think what I'm doing is incredibly complex Geesh.. Prefer not to use a library but will if I have to so I don't have to spend another 2 days screwing with a date conversion.

Here's what I have now in a component I made for my app. I'm sure it's horrible code wise but it works except on Android.

Thanks in advance for any help.

Here is what I have which outputs something like Fri 09/09/2021, 10:29 pm when I push a MySQL date into it. In Android is shows the same output but military (24 hour) time.

import React from 'react';

const DateConvert = (rawDate) => {
    // Convert the date into local time based on handset
    const msgDateLocal = new Date(rawDate);

    let msgDateDay; // Convert the numeric weekday to something more readable ZERO based
    switch (msgDateLocal.getDay()) {
        case 0:
            msgDateDay = "Sun";
            break;
        case 1:
            msgDateDay = "Mon";
            break;
        case 2:
            msgDateDay = "Tue";
            break;
        case 3:
            msgDateDay = "Wed";
            break;
        case 4:
            msgDateDay = "Thu";
            break;
        case 5:
            msgDateDay = "Fri";
            break;
        case 6:
            msgDateDay = "Sat";
            break
        default:
            msgDateDay = "Invalid day of the week";
    }

    // Let's do a little formatting to make it all pretty
    return `${msgDateDay} ${msgDateLocal.toLocaleDateString()} ${msgDateLocal.toLocaleTimeString()}`;

};

export default DateConvert;
Fonewiz
  • 2,065
  • 3
  • 17
  • 17
  • Probably don't need the import of React at the top. Again, I'm new to React Native so take it easy on me LOL. – Fonewiz Sep 11 '21 at 17:12
  • Can you add the URL saying that moment.js is an old-school approach? Also you should import React at the top in React Native, or you should add a transformer in your configuration that I didn't manage to make it work :p – Hamza Jadid Sep 11 '21 at 17:25
  • @HamzaJadid Sure, here is the link https://momentjs.com/docs/#/-project-status/ – Fonewiz Sep 11 '21 at 20:29
  • I don't expect this to run on it's own since it's something I export, then import into another file. I just put it in the code snippet thing because it looks better and is more readable. Apologies if that's not the correct way. – Fonewiz Sep 11 '21 at 20:31
  • This question is asking how to parse a timestamp to a date, then format the date. Both questions have been asked many, many times before. See [*Converting a string to a date in JavaScript*](https://stackoverflow.com/questions/5619202/converting-a-string-to-a-date-in-javascript), [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) and [*How to format a JavaScript date*](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date?r=SearchResults&s=1|1931.6324). – RobG Sep 12 '21 at 07:49
  • Thank you @Todd for the link! – Hamza Jadid Sep 12 '21 at 21:21
  • @RobG I get how to do this in Javascript and have successfully done it in Javascript. Maybe I wasn't clear in my post but the issue is that what I can do in Javascript isn't behaving in Android, so that's the real issue. I can get the time to show up in 12 hour format using the code I have provided and it WILL work in browsers and on IOS but when it displays in Android (through React Native/Expo) the time shows in 24 hour format. I did search and dig for many hours before posting this and have read everything in the links you provided a number of times before I ever posted. – Fonewiz Sep 13 '21 at 04:25

1 Answers1

0

I was able to solve this using the examples shown here reactnativecode.com/get-current-time-in-12-hours-am-pm-format Not sure if there was a better way but, this allowed me to solve my issue and move on with something more fun than screwing with dates... Thanks for the responses and assistance.

Fonewiz
  • 2,065
  • 3
  • 17
  • 17