Date- and time-picker on Pages

Setup, Configuration and Use Items & Sitemaps
,
1

using OH4.1.1 release.

I’d like to have on a page

  1. show a current timestamp on a DateTime item
  2. possibility to change date and time on that item
  3. save it via “send button”

So I configured my cell:

config:
  title: Start
  item: EMS_SpMaStartpunkt
  sendButton: true
  useDisplayState: true
  showTime: true
  placeholder: --
  type: datepicker
slots: null

What I got:
grafik

  1. I don’t see the actual date and time of the item
  2. I can click on the “–” to open the dialogue
  3. I can chose a date
  4. I can chose a time
  5. I can click the “send button”

=> but nothing happens.

What do I miss here?

2

I’ve not done it with a cell widget so don’t know what options are and are note available. I’ve always been under the impression that cell widgets are intended to go inside Card or List Item widgets and not stand on their own.

But the oh-input-card example and oh-input-item example on the marketplace meet all of your requirements. If nothing else they might give some ideas what might be going wrong.

3

It’s always better if you don’t trim information like this. If you’re having trouble identifying a problem, maybe it isn’t where you think it is, and leaving information out just makes it harder for someone else to help. In deed, in this case, there is no such thing as a cell component that includes any input element, so I have to assume that you have this configured in an oh-input-card not in a “cell” but I can’t see that because you trimmed it off. These are very different components.

Is your date item currently NULL. There are have been other issues with input elements starting with NULL state items. Try just using a quick script to send any valid date to the item, and see if your component then works.

4

Oh, it’s inside a cell “oh-input-card” within a column “oh-grid-col” within a row “oh-grid-row” within a block “oh-block”, if that makes sense…

 - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-input-card
                      config:
                        title: Start
                        item: EMS_SpMaStartpunkt
                        sendButton: true
                        useDisplayState: true
                        showTime: true
                        placeholder: --
                        type: datepicker

no, it’s a valid DateTime value: “2024-02-12T11:10:00.000+0100”

5

When discussing widget components, cell and card have two different meanings in OH. So it helps to keep them distinct in your descriptions:

It does now that I see the whole code :wink:

Hmmm…that’s strange. Your configuration works for me on 4.1.1 with a test DateTime item, and I see no reason it shouldn’t work generically. So, your item state is still likely the problem. The biggest clue is still:

If the item state were properly getting to the widget it should show before you ever click on the input.

  1. Do you see any errors in the OH logs when you load the widget or click on the input?
  2. Do you see any errors in the browser console?
  3. Your item has a proper date time format, but is it a DateTime item or is it a string item with a datetime string for a state?
  4. What do you have for the stateDescription metadata for this item?
6

ok:

  1. there is no error or warn inside the logs, if I load the widget or click the send button.
  2. There even isn’t a XHR-call while clicking and no errors in the JS-console.
  3. The item definition is type: DateTime and
  4. stateDescription has pattern: "%1$td.%1$tm, %1$tH:%1$tM"

I can - however replace placeholder: -- with placeholder: =items.EMS_SpMaStartpunkt.displayState and now I see at least the current state - but still no update after clicking.

7

I believe this is probably incompatible with

You are trying to send your custom formatted date time to the picker which expects something in a standardized format.

8

Oh, thanks! That did it.
I thought “use display state” was for showing information, but I should’ve read the subline “Use the formatted state as the value for the input control”… :wink:

Thanks again!

1 Like