Bixby Developer Center

References

date-picker

optional

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.

Note

In order to use this component, you must have viv.time imported in your capsule.

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
}

Child Keys

restrictions
required
Restricts the selectable values in the input-view
initial-value
optional
The initial value to show the user in the date-picker
submit-button
optional
Enables you to customize the text of the submit button for certain components
type
optional
Changes the default from BaseDate to chosen type in the Date Picker Component