Bixby Developer Center

Generates a full-screen view of an interactive component that lets users select a date.

Each date range (MM, DD, and YYYY) are in their own vertically scrolling column.

Examples

input-view {

  match: MyDate (this)

  message {
    template (Give me a date!)
  }

  render {
    date-picker {
      // if you wanted to specify a different sub-type of "viv.core.BaseDate" other than the MyDate that was matched on, you specify that in "type"
      // type (MyOtherDate)
      initial-value (now().date)
      restrictions {
        // allow selection of days from two days before today
        min-allowed ("subtractDuration(now().date, 'P2D')")
        // to two days after
        max-allowed ("addDuration(now().date, 'P2D')")
      }
    }
  }
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Usage

This is an example of a date structure you might use in your capsule. It explicitly uses role-of, so it is compatible with date-picker.

// MyDate.model.bxb
structure (MyDate) {
  role-of (time.Date)
}

A FindEvents action will take a required MyDate model as input and output an Event model:

// Event.model.bxb
structure (Event) {
  property (title) {
    type (MyTitle)
    min (Required) max (One)
  }
  property (duration) {
    type (MyDateTimeInterval)
    min (Required) max (One)
  }
}

There are two ways to set the initial-value of a date picker: Expression Language and by initializing a secondary concept with default-init.

• If you set initial-value with Expression Language, the value will always be set to the initial-value from the EL function. If the user sets a different value, navigates away from the picker, and then returns to it during the same conversation, the value will be reset to its initial-value.
• If you set initial-value using default-init, you can use any JavaScript code, including REST API calls, to set the value. This is necessary for editing existing values, such as reservation dates. Also, with default-init, state will be preserved. If the user sets a different value, navigates away from the picker, and then returns to it during the same conversation, the picker will retain the value the user had previously set.
• If you do not set initial-value, it will default to the current date.

Setting initial-value with EL

The following FindEvents action model requires a MyDate structure to create an Event structure:

// FindEvents.model.bxb
action (FindEvents) {
  type (Search)
  collect {
    input (date) {
      type (MyDate)
      min (Required) max (One)
    }
  }
  output (Event)
}

This view with a date picker sets an initial-value as well as a range of allowable values with Expression Language:

// DatePicker.view.bxb
input-view {

  match: MyDate (this)

  message {
      template (Select a date)
  }

  render {
    date-picker {
      initial-value (now().date)  // uses the `now()` DateTime EL function
      restrictions {
          // allow selection of days from two days before
          min-allowed ("subtractDuration(now().date, 'P2D')")
          // to two days after
          max-allowed ("addDuration(now().date, 'P2D')")
      }
    }
  }
}

In this example, the initial-value is not necessary; you could just set restrictions with min-allowed and max-allowed.

Setting initial-value with default-init

This method of setting initial-value is slightly more complicated, but it allows you to set the initial value using JavaScript rather than EL, and preserves its state across moments in the same conversation. If the user sets it to a new value and returns to it during the same interaction with Bixby, the picker will be at the value the user has set, because that value has been stored in a concept. Also, if the user is editing an existing value such as a reservation date, this allows the date picker's initial-value to be set correctly.

// DatePicker.view.bxb
input-view {
  match {
    MyDate (this) {
      to-input: FindEvents
    }
  }
  message {
    template (Select a date)
  }
  render {
    date-picker {
      initial-value (this)
    }
  }
}

The FindEvents action is similar to the previous one, but adds a default-init with an InitializeDate goal:

// FindEvents.model.bxb
action (FindEvents) {
  type (Search)
  collect {
    input (date) {
      type (MyDate)
      min (Required) max (One)
      default-init {
        intent {
          goal {
            InitializeDate
          }
        }
      }
    }
  }
  output (Event)
}

The InitializeDate action has a JavaScript implementation that does the actual work of initializing the date:

// InitializeDate.model.bxb
action (InitializeDate) {
  type (Search)
  output (MyDate)
}

// endpoints.bxb
endpoints {
  action-endpoints {
    action-endpoint (InitializeDate) {
      local-endpoint (InitializeDate.js)
    }
  }
}

// InitializeDate.js

export default function () {
  // return a date one week from today
  var result = new Date()
  result.setDate(result.getDate() + 7)
  return result
}