uid: my_timepicker
tags: []
props:
  parameters:
    - description: Time format (12h|24h)
      label: Format
      name: timeFormat
      required: true
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Oct 23, 2022, 11:00:20 AM
component: f7-block
config:
  label: Time picker
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            config:
              width: "=(props.timeFormat === '12h') ? '70': '100'"
            slots:
              default:
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            text-align: center
                          width: "45"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                style:
                                  --f7-button-text-color: var(--f7-text-color)
                                  font-family: u2400
                                  font-size: 150%
                                text: ▲
                      - component: f7-col
                        config:
                          width: "10"
                      - component: f7-col
                        config:
                          style:
                            text-align: center
                          width: "45"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                style:
                                  --f7-button-text-color: var(--f7-text-color)
                                  font-family: u2400
                                  font-size: 150%
                                text: ▲
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "45"
                        slots:
                          default:
                            - component: oh-label-card
                              config:
                                label: "=(((items[props.item].state === 'NULL') || !props.item) ? '?': props.timeFormat == '12h' ? dayjs(items[props.item].state).format('hh'): dayjs(items[props.item].state).format('HH'))"
                      - component: f7-col
                        config:
                          style:
                            margin: auto
                            text-align: center
                          width: "10"
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  font-size: 200%
                                text: ":"
                      - component: f7-col
                        config:
                          width: "45"
                        slots:
                          default:
                            - component: oh-label-card
                              config:
                                label: "=(((items[props.item].state === 'NULL') || !props.item) ? '?': dayjs(items[props.item].state).format('mm'))"
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            text-align: center
                          width: "45"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(-1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                style:
                                  --f7-button-text-color: var(--f7-text-color)
                                  font-family: u2400
                                  font-size: 150%
                                text: ▼
                      - component: f7-col
                        config:
                          width: "10"
                      - component: f7-col
                        config:
                          style:
                            text-align: center
                          width: "45"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(-1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                style:
                                  --f7-button-text-color: var(--f7-text-color)
                                  font-family: u2400
                                  font-size: 150%
                                text: ▼
          - component: f7-col
            config:
              style:
                margin: auto
              visible: =(props.timeFormat === '12h')
              width: "30"
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - padding-bottom
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            margin: auto
                        slots:
                          default:
                            - component: oh-button
                              config:
                                fill: true
                                large: true
                                style:
                                  --f7-button-bg-color: var(--f7-button-fill-bg-color,var(--f7-theme-color))
                                text: AM
                                visible: =((items[props.item].state != 'NULL') && props.item && dayjs(items[props.item].state).hour() < 12)
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(-12, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                fill: true
                                large: true
                                style:
                                  --f7-button-bg-color: var(--f7-card-bg-color)
                                text: AM
                                visible: =((items[props.item].state != 'NULL') && props.item && dayjs(items[props.item].state).hour() >= 12)
                - component: f7-row
                  config:
                    class:
                      - padding-top
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            margin: auto
                        slots:
                          default:
                            - component: oh-button
                              config:
                                fill: true
                                large: true
                                style:
                                  --f7-button-bg-color: var(--f7-button-fill-bg-color,var(--f7-theme-color))
                                text: PM
                                visible: =((items[props.item].state != 'NULL') && props.item && dayjs(items[props.item].state).hour() >= 12)
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: =(dayjs(items[props.item].state).add(12, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
                                actionItem: =(props.item)
                                fill: true
                                large: true
                                style:
                                  --f7-button-bg-color: var(--f7-card-bg-color)
                                text: PM
                                visible: =((items[props.item].state != 'NULL') && props.item && dayjs(items[props.item].state).hour() < 12)