DateTime Standalone Widget

Add-on Marketplace UI Widgets
,
1

image
image1464Ă—804 110 KB

A simple stand alone widget that presents an input field to select a date time. The widget supports a custom label and shows the current state of the DateTime Item in the footer. Clicking on the calendar icon opens the selection widget. Alternatively one can just type in the date. Clicking the check causes the new date time to be sent to the Item.

Screenshots

image
image1404Ă—290 14.9 KB

image
image1416Ă—744 111 KB

Changelog

Version 0.1

  • initial release

Resources

uid: rlk_datetime_standalone
tags: []
props:
  parameters:
    - description: Label for the widget
      label: Label
      name: label
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
component: oh-input-card
config:
  outline: true
  clearButton: false
  inputmode: text
  footer: =items[props.item].state
  item: =props.item
  placeholder: =items[props.item].state
  title: =props.label
  type: datetime-local
  sendButton: true
2 Likes
2

Hello,

I am interested in working with dates in a custom widget but what happens to me is that when I press outside, the date is deleted and I would like it to remain present. I have seen the example of him, I have replicated it and it also happens.

Would you know any possible solution to this?

Thanks

3

I get the following error when trying to add the “Date Time Standalone Widget”:

image
image1224Ă—89 8.56 KB

Running OH 3.3.0-SNAPSHOT on Win 10. No problem to add when running OH 3.2.0

4

For info, as I get inconsistent results depending on browser. I get that there’s not much control available for this…!

Dark theme used throughout.

Ubuntu, Firefox

image

Clicking on either dd, mm, or yyyy gives the below - no time picker. Clicking anywhere else provides nothing. After selecting a date, user has to manually enter a time before the check icon can be clicked, otherwise nothing happens.
image

Ubuntu, Chromium

image

The picker only comes up when clicking the almost invisible calendar icon, but at least you can choose the time! Picker doesn’t respect the theme settings.
image

Android, Chrome & Brave

Note the empty input field.
Screenshot_20220210-195018

Tapping the input field provides this pop-up.

Screenshot_20220210-195155
Screenshot_20220210-195155720Ă—1068 24 KB

Tapping the check icon to accept the date time then clears the input field again, so it’s empty.

5

It’s interesting. I already realized that for the black background the calendar symbol is barely visible…

6

I have similar problem with iPhone/iOS.
Doesn’t work in openHAB app or edge browser on the phone.
The widget works fine on PC.
@rlkoshak do you know why?

I’m using the version from marketplace

widget
widget719Ă—676 22.3 KB

Edge on iOS

image
image1170Ă—2532 198 KB

openHAB app

image
image1170Ă—2532 159 KB

7

There where some issues with setting time in the input card. This should be resolved with PR#1525. It will be available with the next milestone.
The datetime-local behaviour is not consistent across browsers. With the next milestone, you should be able to use datepicker as type and set a showTime flag to true. However, when using datetime-local, it should now correctly show time as well.

1 Like
8

great
Thanks for letting me know

9

On iOS, no matter what browser you use, all browsers are forced to use the same renderer. So when you see differences in how things look, switching browsers on an iOS device isn’t going to help.

10

I do not know whether it is clear to everyone who reads this but I successfully used this widget with iOS and iPadOS based devices. openHAB 3.4.1.

Thanks a lot for it! Now I can dynamically set my alarm clock time in a convenient way!

11

Thanks for providing this! Is there a way to disable the time component, i.e., only show a date picker?

12

I don’t know. Try just date or date-local for the type field and see what happens.

13

date actually worked, thanks!

Am I missing something? Are the configuration options documented anywhere?

14

Sort of. When you create a widget through the “default x widget” metadata screen, under Type it says

Type of input (see f7 input docs or datepicker)

and under Input Mode it says

Type of data that might be entered (see MDN docs)

Which isn’t really used here but I include it for completeness.

There isn’t a link for “datepicker” but through trial and error I’ve found time works so assumed date would work too.

1 Like