How to make a duration picker react native

Issue

I am trying to build a duration picker: it would look like a simple ios time picker, but it would start with 0 minutes and 0 seconds and go up to 23 hours and 59 minutes. I tried using normal DateTimePickers (react native date picker), and using the 24 hours format, and that would work. The problem is that ios doesn't support the 24 hours format.

PS: the 12 hours format, as you can see from the image, starts from 1 hour and 0 minutes, so that would not be good if someone would want to take 20 minutes, for example.

It would look something like this, but in 24 hours format, starting from 0 hours and 0 minutes, and going till 23 and 59 minutes.

Solution

I found a way to implement this: I used another library (react-native-modal-datetime-picker) and, as said in the docs, you can't set a 24 hours format on ios, but what you can do is setting

locale="en_GB"

Using this you can now achieve this look:

As you can see you will be able to choose even times with 0 hours.

To get the minutes, on the Date object you will get as a prop of onConfirm, do this:

const minutes = date.getMinutes() + date.getHours() * 60;
console.log(minutes);

Finally, if you want your DurationPicker to start at 0 0, set the prop date to a date with 0 hours and 0 minutes.

At the end it is going to look something like this:

<DateTimePicker
  mode='time'
  date={new Date(new Date().setHours(0, 0, 0, 0))}
  locale='en_GB'
  {...props}
/>

Answered By - Leonardo Trapani