OH 3 Examples: How to boot strap the state of an Item

What version of OH are you using. Just this weekend I set a bunch of NULL DateTime Items with

value: oh-input-card
config:
  outline: true
  clearButton: true
  inputmode: text
  footer: =items.Default_Bed.state
  placeholder: hh:mm:ss
  title: Default Bed time
  calendarParams:
    timePicker: true
    dateFormat:
      hour: numeric
      minute: numeric
  type: datetime-local
  sendButton: true
1 Like

Hello Rich - I‘m using 3.1.0M4

I’m on a snapshot from late last week so maybe this is something that has already been fixed?

I just see that you use a different component I think.

This is my widget Configuration.

- component: oh-input-item
  config:
	  title: Startzeit
	  type: datepicker
	  sendButton: true
	  validate: true
	  required: true
	  item: =props.propItem + '_Timer_Startzeit'
	  outline: false
	  calendarParams:
	    timePicker: true
	    dateFormat:
	      month: long
	      day: numeric
	      hour: numeric
	      minute: numeric
	  style:
	    --f7-input-bg-color: "#b5b5b5"

I changed the type to: datetime-local instead of datepicker.
Now I can set the date/time as well. However, the value always disappears in the input box field after it was set. Is this a normal behavior?

EDIT: I added a footer to display the item state as workaround. The calenderParams are useless when using type datetime-local as far as I see.

Yes, that’s normal. That’s why I put the state of the Item in the footer.

1 Like

I have been trying to instantiate a simple, working timepicker widget for quite some time now for the purpose of bootstrapping.
I want to use the “time” input widget as it’s graphically nicer than any text-alike input.
Unfortunately right on Firefox on PC which I use per default, I keep seeing what @rlkoshak did (cannot click into). Chrome, Edge and even Firefox on Android work with the same widget code, there’s a clock symbol appearing, but not on my PC.
Has anyone gotten ‘time’ icon to appear and work with Firefox/PC?

My input card works just fine in my pc but when I try to use my iPhone or iPad I can access the input field:


If I modify the code and change type to datetime instead of datetime-local I get kind of a strange input field that does work on mobile devices but doesn’t work on the macbook/pc.

Any ideas?

I running the latest stable but previous stable had the same issue.

I know that the fields are implemented differently from one browser to the next. Perhaps they are not implemented correctly on Apple. I’m not sure what you can do about it short of just making it a plain old text field instead of a datetime type.

Thanks for the response. Think it is the iPhone and iPad that are the culprit because the mac does do ok. Chrome browser on the 2 former devices have the same issue…

All,

Setting this default state, is this meant to carry across reboots because my items that I do this for (input-card) are showing as NULL after reboots.

Just like in OH 2.x, to persist the state of an Item across reboots one must use Persistence. Unlike in OH 2.x, OH 3 will install rrd4j by default and save everything that rrd4j supports with restoreOnStartup. But since you are coming from 2.5 I suspect either you are using addons.cfg which means rrd4j is probably not installed, or you have an rrd4j.persist file which is configured not to restoreOnStartup these Items.

1 Like

Im using Influx/map but ive added the items into persistence now.

Many thanks for this nice tutorial. I’m wondering why the time has different formats (12/24). E.g. in post #1 (last figure) time in the footer is clearly in 24 hour format but in Yannick’s post #2 the Time input is in 12 hour format. I have exactly the same situation which is somewhat annoying.

The config in the original post just shows the default rendering of the DateTime without any custom formatting applied. If you want to change that define a State Description Pattern to format the DateTime as you want and charger the widget config to use displayState instead of state.

Unfortunately it didn’t work for me. I followed the discussion in here, especially your post #9. I took pattern

"%tH:%tM"

from here.

In my UI the time is still in 12 hour format in the input field but in the footer it is in 24 hour format (see attached image).

There are two changes I’ve said you need to make.

You’ve shown that you changed the State Description Pattern.

Did you also change the widget to use displayState instead of state?

1 Like

Yes, I made these two changes. I’ll have a look at settings again in the evening. Hopefully I manage to change the time to 24 hour format. I made a rule to poll my Modbus device to read the time because it disappears from the input box after I have clicked the check mark.

i do have the same issue with time format , it always shows " --:-- --"
could you share the input card code example which has working 24 hour formatting i can get my input for time running with 24h
here is what i tried.

component: oh-input-card
config:
  action: command
  footer: Time "hh:mm"
  inputmode: text
  item: StartZeitBewaesserungVentil4
  placeholder: hh:mm
  required: true
  sendButton: true
  title: Startzeit Microdrip
  type: time
  timeFormat: HH:MM
  validate: true
  useDisplayState: true
  pattern: "%tH:%tM"
String  StartZeitBewaesserungVentil4 <time> (gBewaesserungComputer) { stateDescription=""[pattern="%tH:%tM"]} 

thx

Hi, I’m not quite sure what causes your problem but in my input card I have displaystate and perhaps you could try it. See my code below.

value: oh-input-card
config:
  footer: =items.Pihavalot_Off.displayState
  inputmode: text
  outline: true
  placeholder: HH:mm
  sendButton: true
  type: time
  validate: true
  validate-on-blur: false

solve !
it was actually the language setting in the browser that define the 12 hour edit mode.
i changed to german and no the 24 hours are shown.
Sorry

many thanks for sharing
I tried with your code and still face same issues .
He input field still has 12hour with AM/PM

the footer is only shown when i change back to state

footer: =items.StartZeitBewaesserungVentil4.state
String  StartZeitBewaesserungVentil4 <time> (gBewaesserungComputer) { stateDescription=""[pattern="%tH:%tM"]} 

the displaystate showns error
image

1 Like