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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.