This version of the Speechly documentation is no longer actively maintained. For up-to-date documentation, see the latest version.

Voice Date Picker

Voice Date Picker is a voice-enabled date picker component. It changes the date if the specified entity type with a Speechly Date as the entity value is found in the SpeechSegment.

Preview

Voice Date Picker

Voice Date Picker dressed in capsule and mui themes. See styling the components for more information.

Usage

You’ll need a Speechly React app and a Speechly configuration that tags entities in phrases to use this component.

Ensure you have added the @speechly/react-voice-forms dependency:

npm i @speechly/react-voice-forms

Import the component, a css theme and component styling:

import { VoiceDatePicker } from '@speechly/react-voice-forms'
import '@speechly/react-voice-forms/css/components/VoiceDatePicker.css'
import '@speechly/react-voice-forms/css/theme/mui.css'

Place the form component somewhere inside your SpeechProvider block:

<SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
  <VoiceDatePicker
    label="Departure"
    changeOnEntityType="depart"
  />
</SpeechProvider>

Properties

NameTypeDescription
labelstringThe label displayed on the component. For speech use, the label should match the keywords in the phrase used to control the widget: e.g. component with label “Passengers” should be configured to react to phrases like “3 passegers”
changeOnEntityTypestringSpecifies how this component reacts to entity types in SpeechSegments. Undefined value reacts to any entity type. Array of strings (entity types), one for each option, enables changing this widget’s value to the option matching entity type.
value?DateThe current value. Specifying the value controls the components’s state so it makes sense to provide an onChange handler.
defaultValue?DateInitially selected option. Has no effect if value is specified.
changeOnIntent?stringSpecifies how this component reacts to intents in SpeechSegments. Undefined value reacts to any intent. String value (intent name) reacts to the single specified intent, e.g. “book”
onChange?(value: Date) => void

Last updated by Mathias Lindholm on January 26, 2022 at 11:48 +0200

Found an error on our documentation? Please file an issue or make a pull request