3

I need to parse the time according to the phone settings(both android and IOS). If I select 24 hours in the device, need to show the 24 hour date in application and for the 12 hours selection, need to show the 12 hour time format in application. How can I find which time format is I selected in the device through the code.

Renjith Krishnan
  • 2,446
  • 5
  • 29
  • 53
  • this is probably answered here https://stackoverflow.com/questions/60740996/detect-if-users-locale-is-set-to-12-hour-or-24-hour-timeformat-using-javascript – Andrei Oct 20 '20 at 23:04
  • But this is for the browser support. I needed this in android and ios devvices – Renjith Krishnan Oct 22 '20 at 05:46
  • it should also work for ionic apps – Andrei Oct 22 '20 at 05:52
  • what is the format of the date you are starting with? are you able to get it passed to you as an ISO string, in which case, it would include the time difference automaticaly – Edward Oct 22 '20 at 17:38
  • @Andrei I tried this in ionic application but it is always returning the true(ie. 24 hours) when the switched the device time setting to 24hours or 12 hours. – Renjith Krishnan Oct 23 '20 at 03:57
  • @Edward I have an ISO date string that needed to parse to specified formats according to the time setting in device. If the device set in 24 hours need to parse date according to one format, 12 hours set need to parse date according to another format. – Renjith Krishnan Oct 23 '20 at 04:01

2 Answers2

2

You are talking about Locale. I think you're looking to use ion-datetime. It resolves all you need and by default it will use the Locale configuration of the user on the phone.

Important: ion-datetime will by default display values relative to the user's timezone. Given a value of 09:00:00+01:00, the datetime component will display it as 04:00:00-04:00 for users in a -04:00 timezone offset. To change the display to use a different timezone, use the displayTimezone property described below.

All the info you need with many samples is in here: https://ionicframework.com/docs/api/datetime

Cheers.

Carles Mateo
  • 199
  • 1
  • 7
2

You can use the following plugin: Globalization
This is the Github repo for documentation: link

And basically you will need to use getDatePattern methode provided by the plugin.

navigator.globalization.getDatePattern(successCallback, errorCallback, options);

This will returns a pattern string to format and parse dates according to the client's user preferences.
For example:
If set to the en_US locale, this example displays a popup dialog with text such as pattern: M/d/yyyy h:mm a :

function checkDatePattern() {
    navigator.globalization.getDatePattern(
        function (date) { alert('pattern: ' + date.pattern + '\n'); },
        function () { alert('Error getting pattern\n'); },
        { formatLength: 'short', selector: 'date and time' }
    );
}

Then you can use the pattern to display your date and time accordingly.
If you need to know more about date time patterns visit this link

You can also take a look at Intl which gives you the ability to format your date and time without using a plugin:
Intl.DateTimeFormat
Intl.DateTimeFormat options

Elmehdi
  • 1,390
  • 2
  • 11
  • 25