DateTime Standalone Widget

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

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
1 Like

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

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

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

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.

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

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