DateInput

Date Input

About

Masked, validated date entry that returns a standardized string in YYYY-MM-DD format.

Properties

Property	Type	Required	Description
onSubmit	function	No	Called with parsed date string YYYY-MM-DD
className	string	No	Additional classes

Usage notes

• Provide onSubmit to enable submission; component is disabled otherwise.

• Send the selected date using conversationHandler.sendSlots({ slotName: date }).

• Define the corresponding Slot in NLX ahead of time; DateInput should typically fill a Slot, not send a choice.

Example

This component is commonly triggered in a User Choice Node in the NLX Platform with a modality named DateInputExample (schema can be a simple string or object; the component does not require data).

DateInput Example Component

const DateInputExample = ({ data, conversationHandler }) => {
  return html`
    <DateInput
      onSubmit=${(date) =>
        conversationHandler.sendSlots({ TouchpointDateInputResult: date })}
    />
  `;
};

// Register component when creating touchpoint
const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  customModalities: {
    DateInputModality: DateInputExample,
  },
});

Related

• Conversation Control

• Theming