countdown

The countdown component functionality counts down from a date, date/time, and time. When the time expires, you can configure an outcome, for example, open a different jig, or perform an action. The countdown starts as soon as the jig containing the component.countdown opens

Countdown

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
expiresAt	Add a date, date/time or time when the countdown must expire/stop, either using: datasource, e.g. [email protected] expression, e.g. =$fromMillis($toMillis($now()) + 50000) string, e.g. "2025-09-20 18:00", or "2025-07-25T17:30:00+02:00"

Other options
align	center, left, right, and stretch, with center as the default if the property is not specified in the YAML.
labels	isVisible - true or false with true as the default. Setting false will hide the countdown component. position - The countdown labels of Days : Hours : Minutes: Seconds are shown at the bottom or top of the countdown.
size	Choose from extra-large, large, medium, small, with large being the default if the property is not specified in the YAML.

Actions
onPress	Choose from the provided list of available actions, for example, use the go-to action to open a different jig.
onFinish	Choose from the provided list of available actions. For example, go-back action.

Considerations

• This component's function is to countdown to a predefined date/time. It is not recommended to use the component as a timer.

• The component.countdown can only be used in a jig.default.

• The countdown's separator is by default shown as a colon :.

• The countdown starts when you navigate to the jig containing the component.countdown.

• Use any inputs for the countdown configuration, for example, different types of datasources, states and inputs.

• Use the set-state and reset-state actions to set and reset the countdown.

Examples and code snippets

Countdown with inputs (static, dynamic, expression, & datasource)

Countdown with inputs

This example shows the expiresAt property value set using a static value, an expression, a static datasource, and a dynamic datasource.

Example: See the full example in GitHub.

countdown-input.jigx

children:
  - type: component.section
    options:
      title: COUNTDOWN WITH STATIC VALUE
      children:
      - type: component.countdown
        options:
          expiresAt: "2025-10-06 22:00"

  - type: component.section
    options:
      title: COUNTDOWN WITH COUNT FROM NOW
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (STATIC)
      children:
      - type: component.countdown
        options:
          expiresAt: [email protected][1].date

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (DYNAMIC)
      children:
      - type: component.countdown
        options:
          expiresAt: [email protected][2].StartDate

event-dd.jigx

static-data

Countdown with alignment

You can choose to align the component.countdown to the left, right, center and stretch it across the screen.

Example: See the full example in GitHub.

Countdown with alignment

countdown-align.jigx

children:
  - type: component.section
    options:
      title: COUNTDOWN ALIGN - LEFT
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: left

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - CENTER
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: center

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - RIGHT
      children:
      - type: component.countdown
        options: 
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: right

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - STRETCH
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: stretch

Countdown with different sizes

Countdown sizes

Use the size property in the component.countdown to change the size from extra-large to small.

Example: See the full example in GitHub.

count-down-sizes.jigx

children:
  - type: component.section
    options:
      title: COUNTDOWN SIZE - EXTRA-LARGE
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: extra-large
            
  - type: component.section
    options:
      title: COUNTDOWN SIZE - LARGE (Default)
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: large
          
  - type: component.section
    options:
      title: COUNTDOWN SIZE - MEDIUM
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: medium

  - type: component.section
    options:
      title: COUNTDOWN SIZE - SMALL
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: small

Countdown onPress

Action when pressed

This example shows two scenarios, the first opens a different jig when the component is pressed and the second opens a URL when pressed. Use the onPress property to set up an action when pressing on the component.

Example: See the full example in GitHub.

countdown-OnPress.jigx

children:
  - type: component.section
    options:
      title: COUNTDOWN - G0-T0 JIG WHEN PRESSED
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)
            onPress: 
              type: action.go-to
              options:
                linkTo: countdown-sizes

  - type: component.section
    options:  
      title: COUNTDOWN - OPEN URL WHEN PRESSED
      
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)     
            onPress: 
              type: action.open-url
              options:
               url: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350
        - type: component.web-view
          options: 
            uri: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350          

countdown-sizes.jigx

Countdown onFinish

In this example the onFinish property is used to show a modal when the component.countdown expiresAt property reaches zero.

Example: See the full example in GitHub.

Modal when countdown expires

count-down-onFinish.jigx

 children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 3600)
            onFinish: 
              type: action.info-modal
              options:
                modal:
                  title: 🏖️ Holiday time!
                  buttonText: Enjoy!

Countdown started from another jig

Countdown from jig input

Add inputs from another jig to set the expiresAl property for the countdown to start.

Example: See the full example in GitHub.

Supporting example in GitHub.

count-down-jig-input.jigx

title: [email protected]
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1675989167596-915a77b361e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGhvbGlkYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60
        

children:                                
  - type: component.countdown
    options:
      size: extra-large  
      expiresAt: [email protected]
      
actions:
  - children:
      - type: action.info-modal
        options:
          title: [email protected] & " - BUY"
          modal:
            title: Let the countdown begin!
            buttonText: Close
            element: 
              type: image
              resizeMode: contain
              uri: https://plus.unsplash.com/premium_photo-1680466283263-91b51ab91832?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8YmVhY2glMjB1bWJyZWxsYXxlbnwwfHwwfHx8MA%3D%3D

start-countdown-support.jigx