I’m working on a mobile app and trying to accommodate users who have traveled out of their home timezone, by not making them do a mental conversion of the hours as they choose a time using ion-datetime. My user’s home timezone is ‘America/Vancouver’ (PST) and my user’s iPhone has the timezone set to Honolulu (3 hours earlier).
I have an ion-datetime set up as a time picker (presentation="time") and I’m passing in, e.g., “17:00:00” for the value prop and “2024-09-09T17:00:00.000-07:00” for the min prop (you can see the PST timezone offset there: -07:00). The time picker shows the wheels set to the correct time: 5:00 PM. However the button that opens and closes the time picker shows 8:00 PM - 3 hours later. Shouldn’t they reflect the same time?
Hey stylecrampenator, that’s an interesting scenario! I’ve seen similar issues with ion-datetime and timezones. Have you tried using the pickerFormat prop to explicitly set the format for the button display? That might help ensure it matches the picker wheels.
IonDatetime doesn’t adjust for timezone - ion-datetime: Ionic API Input for Datetime Format Picker
If you could provide a StackBlitz of your issue, that would be best so we can easily reproduce it.
Thanks - I don’t see a pickerFormat prop listed in the documentation, can you tell me more about that?
pickerFormat was removed in v6. I think daphnecolson’s response was AI generated and is incorrect.
When I create a new StackBlitz Vue project, as soon as I add the following to package.json:
"@ionic/core": "^8.1.2",
"@ionic/vue": "^8.1.2"
The preview is a blank white screen, and no errors appear in the terminal. Do you have a tip for creating an Ionic project there?
The easiest is to open up an existing example from the Ionic Docs and modify it from there. I’ve actually never tried to start from scratch in StackBlitz 
1 Like
Hey thanks for the input, I realized that the button I was referring to was ours, not actually part of the ion-datetime 
1 Like