Get a date input from the user using a native date picker. This component
renders an <input type="date"> in the Orb Web SDK, providing a
browser-native calendar picker.

- type: meya.date.component.input
  label: Date of birth
  required: true

The date input component is also an interactive component which allows you
to set quick replies,
configure the input composer
and set context data.

Configuration

min / max: Restrict selectable dates (ISO format YYYY-MM-DD).
default: Pre-populate with an ISO date string.

Input validation

If required is true, an error is shown when the user submits without
selecting a date. Dates outside the min/max range are also rejected.

The selected date is stored in (@ flow.result ) as an ISO format
string (YYYY-MM-DD).

Pages support

This date input component is also a widget component that can be displayed
as a field in a page.

- page:
  - type: meya.date.component.input
    label: Appointment date
    required: true

Check the Widgets & Pages
guide for more info on creating advanced form wizards for collecting user
input.

Element details

type: meya.date.component.input
class: DateInputComponent
path: /meya/date/component/input/input.py
signature: -

Fields

field	description	required	signature	default	type
spec	Override the original spec for this element.	○	○	null	Spec
context	Send context data with this component's event.	○	○	{}	dict
sensitive	Mark this component's event as sensitive. This will encrypt the event if the Sensitive Data integration has been enabled.	○	○	false	bool
triggers	Activate these dynamic triggers when the component runs. Check the component triggers guide for more info.	○	○	[]	list
quick_replies	List of buttons that the user can select for replies.	○	○	[]	list
composer	The composer spec that allows you to control the Orb's input composer. Check the Composer guide for more info.	○	○	focus: blur placeholder: collapse_placeholder: visibility: character_limit:	ComposerElementSpec
header	Override the header for this component.	○	○	buttons: title: progress: milestones: extra_buttons:	HeaderElementSpec
markdown	Override the bot Markdown mode for this component. Check the Markdown guide for more info.	○	○	null	list bool NoneType
required		○	○	false	bool
label		○	○	null	str
disabled		○	○	false	bool
icon	The icon spec or URL to use for the input field. See the Icons guide for more info.	○	○	null	IconElementSpec str NoneType
default	The input's default value in ISO format (YYYY-MM-DD).	○	○	null	str
min	The earliest selectable date in ISO format (YYYY-MM-DD).	○	○	null	str
max	The latest selectable date in ISO format (YYYY-MM-DD).	○	○	null	str
error_message		○	○	"Please select a valid date."	str

Usage reference

Basic

triggers:
  - keyword: meya.date.component.input
steps:
  - type: meya.date.component.input

Full

triggers:
  - keyword: meya.date.component.input
steps:
  - type: meya.date.component.input
    spec:
      type: STRING
      data:
        STRING: ANY
      timeout: 123
      trigger_when: ANY
    context:
      STRING: ANY
    sensitive: false
    triggers:
      - type: STRING
        data:
          STRING: ANY
        timeout: 123
        trigger_when: ANY
    quick_replies:
      - url: STRING
        javascript: STRING
        button_id: STRING
        context:
          STRING: ANY
        default: false
        disabled: false
        divider: false
        icon:
          url: STRING
          color: STRING
          path: STRING
        action: COMPONENT
        value: ANY
        result: ANY
        data:
          STRING: ANY
        magic: false
        type: text|url|static|menu|divider|action|flow_next|component_next
        menu:
          - BUTTONELEMENTSPEC
        text: STRING
    composer:
      focus: file|image|text|blur
      placeholder: STRING
      collapse_placeholder: STRING
      visibility: collapse|hide|show
      character_limit:
        length: 123
        error_text: STRING
    header:
      buttons:
        - url: STRING
          javascript: STRING
          button_id: STRING
          context:
            STRING: ANY
          default: false
          disabled: false
          divider: false
          icon:
            url: STRING
            color: STRING
            path: STRING
          action: COMPONENT
          value: ANY
          result: ANY
          data:
            STRING: ANY
          magic: false
          type: text|url|static|menu|divider|action|flow_next|component_next
          menu:
            - BUTTONELEMENTSPEC
          text: STRING
      title:
        text: STRING
        icon:
          url: STRING
          color: STRING
          path: STRING
      progress:
        value: 123
        show_percent: false
      milestones:
        - text: STRING
          current: false
      extra_buttons:
        - url: STRING
          javascript: STRING
          button_id: STRING
          context:
            STRING: ANY
          default: false
          disabled: false
          divider: false
          icon:
            url: STRING
            color: STRING
            path: STRING
          action: COMPONENT
          value: ANY
          result: ANY
          data:
            STRING: ANY
          magic: false
          type: text|url|static|menu|divider|action|flow_next|component_next
          menu:
            - BUTTONELEMENTSPEC
          text: STRING
    markdown:
      - format|linkify|breaks|typographer
    required: false
    label: STRING
    disabled: false
    icon:
      url: STRING
      color: STRING
      path: STRING
    default: STRING
    min: STRING
    max: STRING
    error_message: STRING