search

openhab / openhab-webui

Web UIs of openHAB
Eclipse Public License 2.0
224 stars 242 forks source link

[BasicUI] No timepicker in Firefox #2645

Open mueller-ma opened 4 months ago

mueller-ma commented 4 months ago

Which UI are you reporting an issue for?

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.

lolodomo commented 4 months ago

Is it only when the current state is NULL ?

mueller-ma commented 4 months ago

No, this issue is independent of the state.

lolodomo commented 4 months ago

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

lolodomo commented 4 months ago

How is defined MyDateTimeItem ?

mueller-ma commented 4 months ago

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

mherwege commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

For reference: https://github.com/google/material-design-lite/issues/1695

mueller-ma commented 3 months ago

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 commented 3 months ago

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