Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BasicUI] No timepicker in Firefox #2645

Open
1 of 4 tasks
mueller-ma opened this issue Jul 5, 2024 · 11 comments
Open
1 of 4 tasks

[BasicUI] No timepicker in Firefox #2645

mueller-ma opened this issue Jul 5, 2024 · 11 comments
Labels
basic ui Basic UI bug Something isn't working

Comments

@mueller-ma
Copy link
Member

Which UI are you reporting an issue for?

  • Basic UI
  • HABPanel
  • HABot
  • CometVisu

The problem

There's no timepicker in Firefox as there's in Chrome:

Chrome:
grafik

Firefox:
grafik

I'm using this sitemap definition:

Input inputHint="time" item=MyDateTimeItem

Expected behavior

It should be similiar in both browsers.

Your environment

runtimeInfo:
  version: 4.1.3
  buildString: Release Build
locale: de-DE

Browser console

no output in the console.

@mueller-ma mueller-ma added the bug Something isn't working label Jul 5, 2024
@lolodomo
Copy link
Contributor

lolodomo commented Jul 5, 2024

Is it only when the current state is NULL ?

@mueller-ma
Copy link
Member Author

mueller-ma commented Jul 5, 2024

No, this issue is independent of the state.

@lolodomo
Copy link
Contributor

lolodomo commented Jul 5, 2024

Strange, I am sure time picker was tested when initially implemented.

@lolodomo
Copy link
Contributor

lolodomo commented Jul 7, 2024

How is defined MyDateTimeItem ?

@mueller-ma
Copy link
Member Author

A DateTime Item without any metadata set, only the title. The title doesn't contain a value format pattern.

@lolodomo lolodomo added the basic ui Basic UI label Jul 9, 2024
@mherwege
Copy link
Contributor

A DateTime item without metadata will default to a datetime-local HTML5 input type. Firefox (and Safari) don’t show time inputs for that type (see https://bugzilla.mozilla.org/show_bug.cgi?id=1726108). You can set time with inputHint time, but that obviously does not show the date. It is possible to show 2 fields, one with inputHint date, another one with time. Setting them independently should preserve the previously set date/time part.

so unless someone is willing to develop a very specific datetime entry widget for BasicUI, I think we have to live with the browser constraint. I therefore suggest to close this as will not fix.

@mueller-ma
Copy link
Member Author

You can set time with inputHint time, but that obviously does not show the date.

I already did, but no timepicker is shown.

Basic UI follows Material Design, so I guess it uses some library for that? Maybe that library also includes a time picker?
If not, I found that one, which might be easy to integrate in Basic UI: https://www.npmjs.com/package/ngx-material-timepicker

@mherwege
Copy link
Contributor

mherwege commented Jul 26, 2024

Basic UI follows Material Design, so I guess it uses some library for that? Maybe that library also includes a time picker?
If not, I found that one, which might be easy to integrate in Basic UI: https://www.npmjs.com/package/ngx-material-timepicker

When developing this I searched for date/time pickers. Material Design Lite does not have one by default. The one you link requires Angular. In mainUI, we have the f7 framework available which also has one. I didn’t find an easy and universal candidate for BasicUI Material Design Lite.

@mherwege
Copy link
Contributor

For reference: google/material-design-lite#1695

@mueller-ma
Copy link
Member Author

What about https://github.com/puranjayjain/md-date-time-picker ?

An implementation of Material Design Picker components in vanilla CSS, JS, and HTML

It shouldn't have dependencies on libraries.

@mherwege
Copy link
Contributor

Looks promising. I may have a look when I find some time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
basic ui Basic UI bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants