Widget with time input

alda1 · March 13, 2025, 10:16am

I have a widget where I want set a ON and OFF time :

problem is, that on the cell phone screen clock is missing :

question is, if this is really correct way how to input a time
Here is my code:

uid: EVCS
tags: []
props:
  parameters:
    - context: item
      description: EVCS Ring On Time
      label: EVCS Ring On Time
      name: ring_on_time
      required: true
      type: TEXT
    - context: item
      description: EVCS Ring Off Time
      label: EVCS Ring Off Time
      name: ring_off_time
      required: true
      type: TEXT
    - context: item
      description: EVCS Ring status
      label: EVCS Ring status
      name: ring_status
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 13, 2025, 6:30:00 AM
component: f7-card
config:
  style:
    aspect-ratio: 1.7
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    display: flex
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-col
            config:
              style:
                align-items: center
                justify-content: center
                display: flex
                flex-direction: column
                width: 40%
            slots:
              default:
                - component: oh-icon
                  config:
                    action: popup
                    icon: /FVE/evcs
                    outline: true
                    text: Open PopOver
                    width: 80%
          - component: f7-col
            config:
              style:
                display: flex
                flex-direction: column
                width: 60%
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.0vw'):('2.5vw')
                            font-weight: bold
                            text-align: center
                          text: ='RING time'
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          style:
                            width: 30%
                          icon: f7:arrowshape_turn_up_right_fill
                          width: =(device.desktop)?('1.0vw'):('3.5vw')
                          color: '=(items[props.ring_status].state == 100) ? "red" : "gray"'
                      - component: Label
                        config:
                          style:
                            width: 10%
                            font-size: =(device.desktop)?('1.0vw'):('2.5vw')
                            font-weight: bold
                          text: ='ON'
                      - component: oh-input
                        config:
                          style:
                            width: 60%
                            font-size: =(device.desktop)?('1.0vw'):('2.5vw')
                          item: =props.ring_on_time
                          type: time
                          sendButton: true
                          dateFormat: HH:mm
                          inputmode: text
                - component: f7-row
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          style:
                            width: 30%
                          icon: f7:arrowshape_turn_up_right_fill
                          width: =(device.desktop)?('1.0vw'):('3.5vw')
                          color: '=(items[props.ring_status].state == 0) ? "red" : "gray"'
                      - component: Label
                        config:
                          style:
                            width: 10%
                            font-size: =(device.desktop)?('1.0vw'):('2.5vw')
                            font-weight: bold
                            text-align: center
                          text: ='OFF'
                      - component: oh-input
                        config:
                          style:
                            width: 60%
                            justify-content: center
                            align-items: center
                            font-size: =(device.desktop)?('1.0vw'):('2.5vw')
                          item: =props.ring_off_time
                          type: time
                          sendButton: true
                          dateFormat: HH:mm
                          inputmode: text
                - component: f7-row
                  config:
                    style:
                      margin-top: 3%
                      align-items: center
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popup
                          color: blue
                          iconF7: graph_circle
                          iconSize: =(device.desktop)?('2.0vw'):('7.5vw')
                          popupOpen: .myPopup_Pump_Info
                          style:
                            margin-left: 0%
                      - component: oh-link
                        config:
                          action: popup
                          actionModal: page:page_c59c737b4a
                          color: orange
                          iconF7: gear_alt
                          iconSize: =(device.desktop)?('2.0vw'):('7.5vw')
                          style:
                            margin-left: 0%
                          text: xxxx
                      - component: oh-link
                        config:
                          action: popup
                          color: green
                          iconF7: info_circle
                          iconSize: =(device.desktop)?('2.0vw'):('7.5vw')
                          popupOpen: .myPopup_Pump_Setup
                          style:
                            margin-left: 0%

JustinG · March 13, 2025, 11:02pm

The clock button is not a function of OH, it is a function of the html input tag itself. Are you viewing the mobile version on an iPhone? I believe that Safari treats the time input differently than many other browsers.

alda1 · March 14, 2025, 7:03am

No it’s android phone. Is this right way for time input or is any other way for time input in the widget ?

JustinG · March 14, 2025, 2:38pm

There are other less direct ways, but this is the way I would use.

alda1 · March 14, 2025, 2:45pm

Thank you. I have one additional question. I want make a “simple” timer
Idea is :
When button is clicked, One hour is add to the actual time and saved into any other item.
Then via rule I will compare actual time with time in this item, and when it’s reached, I will do a action.

Question is if there is any way to add one hour to the actual time and save into item in the widged.

JustinG · March 14, 2025, 3:13pm

There is an imprecise way to do this in all in a widget:

- component: oh-button
  config:
    action: command
    actionItem: MyDateTimeItem
    actionCommand: =dayjs().add(1, 'hour').toISOString() 
    text: Add hour

The reason this is imprecise is that it is not exactly 1 hour from when the button is pressed. It is exactly one hour from when the page loaded (because that is when the dayjs() current time is calculated). So if the user opens the page and then waits 5 minutes before clicking the button then the expression will add 1 hour to the time 5 minutes ago (or only 55 minutes to the current time).

If your use case is such that the time between page load and the button being pushed does not constitute a critical error then this will work fine.

If you need something more precise, then the widget should run a rule which sends the current time to your item. The rule will always be able to access the actual current time and not whenever the page was loaded.

You don’t need to do this, there is a rule trigger that is based on the time in a datetime item. Under the time event item triggers in the UI you can set the following:

alda1 · March 14, 2025, 9:39pm

working, thank you
I used a second way to start a rule