Flows
UI steps
Input.datepicker

Date picker input

A date and time picker field with calendar UI.

ctx.ui.inputs.datePicker("name", config);

Config

name*
string

The name of the input. This will be the key in the result object.

label
string

The label of the input. If this is not provided, the name will be used as the label.

helpText
string

The help text of the input.

optional
boolean

Whether the input is optional. Inputs are required by default.

disabled
boolean

Whether the input is disabled.

defaultValue
string

The default value of the input as an ISO 8601 date string.

mode
"date" | "dateTime"

The picker mode. "date" shows only a date picker, "dateTime" includes time selection. Default is "dateTime".

min
string

The minimum selectable date as an ISO 8601 date string.

max
string

The maximum selectable date as an ISO 8601 date string.

Usage

Elements are rendered by adding them to a page. A page that contains input elements will return an object with keys matching the name of each input.

const result = await ctx.ui.page({
  title: "Date picker inputs",
  content: [
    ctx.ui.inputs.datePicker("startDate"),
    ctx.ui.inputs.datePicker("deliveryDate", {
      label: "Delivery date",
      mode: "date",
      min: new Date().toISOString(),
    }),
  ],
});
 
console.log(result.startDate);
console.log(result.deliveryDate);

Example: Delivery date selection

A common use case is collecting a preferred delivery date from the user when scheduling an order for dispatch.

import { ScheduleDelivery, models } from "@teamkeel/sdk";
 
export default ScheduleDelivery(async (ctx) => {
  // Get the order
  const order = await models.order.findOne({
    id: ctx.inputs.orderId,
  });
 
  // Calculate earliest possible delivery (tomorrow)
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow.setHours(0, 0, 0, 0);
 
  // Calculate latest delivery (14 days from now)
  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 14);
 
  const result = await ctx.ui.page({
    title: "Schedule delivery",
    content: [
      ctx.ui.display.keyValue({
        data: [
          { key: "Order", value: order.reference },
          { key: "Customer", value: order.customerName },
        ],
      }),
      ctx.ui.inputs.datePicker("deliveryDate", {
        label: "Preferred delivery date",
        helpText: "Select a date within the next 14 days",
        mode: "date",
        min: tomorrow.toISOString(),
        max: maxDate.toISOString(),
        defaultValue: tomorrow.toISOString(),
      }),
    ],
  });
 
  // Update the order with the selected delivery date
  await models.order.update(
    { id: order.id },
    { scheduledDeliveryDate: new Date(result.deliveryDate) }
  );
 
  await ctx.ui.complete({
    title: "Delivery scheduled",
    content: [
      ctx.ui.display.banner({
        mode: "success",
        title: "Delivery scheduled",
        description: `Order ${order.reference} scheduled for delivery on ${new Date(result.deliveryDate).toLocaleDateString()}`,
      }),
    ],
  });
});
Input.datagridInput.number