Bixby Developer Center

Guides
References

time-picker

optional

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

Each time range (HH and mm) are in a separate, vertically scrolling column.
You can also set the increments between the minutes.

Note

To use this component, you must have viv.time imported in your capsule.

Examples

// TimePicker2.view.bxb
// you can also specify a step size
input-view {
match: MyTime (this)
message {
template (Give me the time!)
}
render {
time-picker {
initial-value (now().time)
// allow time to be changed in 10-minute increments
step (10)
}
}
}

View on GitHub

Here is how time-picker appears on different devices:

MobileWatchTV (Expanded View)Fridge
time-picker on Mobiletime-picker on Watchtime-picker on TVtime-picker on Fridge
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Usage

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

// MyTime.model.bxb
structure (MyTime) {
role-of (time.Time)
}

A SetPickup action model will take a required MyTime model as input and output a Pickup model:

//Pickup.model.bxb
structure (Pickup) {
property (myTime) {
type (MyTime)
min (Required) max (One)
}
property (myReason) {
type (MyReason)
min (Optional) max (One)
}
}

There are two ways to set the initial-value of a time picker: by using an Expression Language function or 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 a reservation time. 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 time.

Setting initial-value with EL

The following SetPickup action model requires a MyTime structure to create a Pickup structure:

// SetPickup.model.bxb
action (SetPickup) {
type (Search)
collect {
input (time) {
type (MyTime)
min (Required) max (One)
}
}
output (Pickup)
}

The following view file generates a time picker, so that users can set a value for SetPickupTime. It includes an initial-value of the current time; as this is the default, this could be left out of the example.

// TimePicker.view.bxb
input-view {
match: MyTime (this)
message {
template (Give me the time!)
}
render {
time-picker {
initial-value (now().time)
// if "step" is included, it specifies the per-minute increment
// allowable for changes: this specifies 5-minute increments
step (5)
}
}
}

Setting initial-value with default-init

This method of setting initial-value is slightly more complicated, but it preserves state.

// TimePicker.view.bxb
input-view {
match {
MyTime (this) {
to-input: SetPickup
}
}
message {
template (Select a date)
}
render {
time-picker {
initial-value (this)
step (5)
}
}
}

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

// SetPickup.model.bxb
action (SetPickup) {
type (Search)
collect {
input (time) {
type (MyTime)
min (Required) max (One)
default-init {
intent {
goal {
InitializeTime
}
}
}
}
}
output (Pickup)
}

The InitializeTime action has a JavaScript implementation that does the actual work of initializing the time:

action (InitializeTime) {
type (Search)
output (MyTime)
}
var date = require('dates');

function initializeTime() {
// return a time one hour from now
var today = new ZonedDateTime.now();
return today.plusHours(1).getDateTime();
}

module.exports = {
initializeTime: initializeTime
}

Child Keys

initial-value
optional
The initial value to show the user in the time-picker
step
optional
Minute intervals that users can choose between
submit-button
optional
Enables you to customize the text of the submit button for certain components
type
optional
Changes the default from BaseTime to chosen type in the Time Picker Component The type must be a sub-type of BaseTime