Bixby Developer Center

Guides
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 on GitHub

Here is how date-picker appears on different devices:

MobileWatchTV (Expanded View)Fridge
date-picker on Mobile, 2 columns
date-picker on Mobile, 3 columns
date-picker on Watch, 2 columns
date-picker on Watch, 3 columns
date-picker on TV, 2 columns
date-picker on TV, 3 columns
date-picker on Fridge, 2 columns
date-picker on Fridge, 3 columns
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 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:

action (InitializeDate) {
type (Search)
output (MyDate)
}
var date = require('dates');

function initializeDate() {
// return a date one week from today
var today = new ZonedDateTime.now();
return today.plusDays(7).getDateTime();
}

module.exports = {
initializeDate: InitializeDate
}

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