Comments (10)
ENG-958 [BUG] - Time Input wrong HourCycle
from nextui.
Can you share the code same as your screenshot? The example looks fine on my side.
from nextui.
As you can see gmt+2 is right (Europe/Berlin) but the hour cycle should be 24 hours and the times should be 09 and 17. Am I missing something obvious?
from nextui.
but i didn't see you specified hourCycle
in your time input.
from nextui.
This is from the documentation: By default, TimeInput displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the hourCycle prop if needed for a specific usecase. This example forces TimeInput to use 24-hour time, regardless of the locale.
So for me it should automatically be 24 hours instead of 12 hours. It should adapt to the user's location.
from nextui.
@timwirt I got it now. can you help test two things -
- try to set
hourCycle
to both12
and24
, and share the result here. - try not to set
hourCycle
and test with other browsers.
from nextui.
Ok,
- manually setting the hourCycle works (but i think it is still not correct that is shows 11:00 it should be 09:00)
(left one is 24h and right is 12h) - the behaviour is the same on edge and responsively app
from nextui.
- for the left one, 11 looks fine to me since your input is
2024-04-08T09:00:00Z
.Z
meansUTC+0
so if you are inGMT+2
(p.s. there is no difference between UTC and GMT), so that would be9 + 2 = 11
. - for the right one, please apply 24h and share the result.
from nextui.
- for the left one, 11 looks fine to me since your input is
2024-04-08T09:00:00Z
.Z
meansUTC+0
so if you are inGMT+2
(p.s. there is no difference between UTC and GMT), so that would be9 + 2 = 11
.
Ok, thank you.
from nextui.
Ok with help of this Workaround from stackoverflow i can detect the hour cycle like this
const hourCycle = new Intl.DateTimeFormat(undefined, {
hour: "numeric",
})
.format(new Date())
.match(/AM/)
? 12
: 24;
and now i just add to hourCycle={hourCycle}
to the time input. 😁
from nextui.
Related Issues (20)
- [BUG] - Getting Frame Drop while Graphics Acceleration turned off HOT 1
- [BUG] - Navbar menu does not scroll in iOS Safari or Chrome HOT 3
- [BUG] - Table HOT 6
- [BUG] - Dropdown HOT 3
- [BUG] - It should display colors in VSCode just like Tailwind CSS variables do HOT 1
- [BUG] - components don't work with `use server` directive HOT 3
- [BUG] - Unintended Movement and Dark Blue Color Issue with NextUI Elements on Mobile Browsers HOT 1
- [BUG] - Datepicker don't apply DateInput classNames HOT 2
- [BUG] add shouldCloseOnInteractOutside to useModal HOT 1
- [BUG] - DatePicker Locale Not Applying en-US Format HOT 2
- [Feature Request] Make a Distinction Between Loading and Error States in Image Component HOT 1
- [BUG] - Lack of RTL Support in Calendar HOT 1
- [BUG] - Lack of RTL Support in Date Range Picker HOT 1
- [BUG] - `React.Key` is not the same as `Key` from `@react-types/shared` HOT 2
- [BUG] - Incompatibility with Next.js 15 HOT 1
- [Feature Request] Ability to provide custom/wrapped TableRow components to a table (and allow other child-bearing list components to be given custom wrappers) HOT 1
- [BUG] - Date picker with month and year HOT 2
- [BUG] - <Input /> clearButton is in the wrong position in Safari HOT 2
- [Feature Request] ListboxItem to support Link state from react-router-dom HOT 1
- [BUG] - Modal does not adjust position when keyboard appears on iOS HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextui.