1,674 questions
your code is not using the MAUI time picker, but rather the webview (browser) <input type="time"> picker. you will need to create a replacement time picker using css and html. google for samples written in javascript.
Blazor Hybrid MAUI TimePicker Spinner Style
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(137.6, 81%, 23%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EEA%3C/text%3E%3C/svg%3E)
Erik A
0
Reputation points
We are using a TimePicker in Blazor Hybrid MAUI like this:
<input type="time" id="arrivalTimePickerH" name="arrivalTimePickerHT" style="width:100%;height:40px;border-bottom:1px #bdbdbd solid;" onfocus="this.showPicker()">
Now we got a lot of complaints from users that they don't like the Material Design Native TimePicker with this round-style clock.
I have implemented the code from this Stack Overflow post
But it does not work, the code compiles but the clock is still the round type clock. How can I get the spinner clock in Blazor Hybrid MAUI?
Developer technologies | .NET | Blazor
Developer technologies | .NET | .NET MAUI
4,159 questions
Developer technologies | .NET | Other
4,107 questions
Developer technologies | C#
11,578 questions
1 answer
Sort by: Most helpful
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator2023-06-13T16:14:47.4933333+00:00 -
Erik A 0 Reputation points
2023-06-13T19:39:21.44+00:00 Hi, thanks for the reply.
But when I compile this project for Android and run it on Android and click the input field, the native Android TimePicker does appear. I guess its the WebView then that opens the native TimePicker? If so it should still be possible to control the mode somehow.
-
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator
2023-06-13T20:07:11.0166667+00:00 that's because the browser (web view) uses the native control. same with safari on IOS. But unlike when used with the android sdk, you can only modify via css (very limited). see:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
again in a webview your only option is a make a your own.
note: I agree the android time picker is funky.
-
Erik A 0 Reputation points
2023-06-14T11:58:37.24+00:00 Hi Bruce,
Thanks for your reply!
So as far as I understand this is technically not possible right now. I think this is something that needs to be improved in MAUI (WebView?), isn't it reasonable to want to use the spinner instead as an application developer. Would it be possible for the MAUI team to manage this or where could this be "implemented"? I would like to open a request for this to the MAUI team (?).
-
Bruce (SqlWork.com) 77,926 Reputation points Volunteer Moderator
2023-06-14T15:32:48.88+00:00 this is outside the MAUI team's control. You could make a request to the Google team to add more customization support to the chrome on android.
But there are literally dozens of time pickers designed for the browser. Telerik even has one for Blazor.
Sign in to comment -