Component | Date Input

Render a date input box.

Node.js

ui.dateInput("date-input-key", { 
    label: "Enter your birthday",
    onEnter: (value) => console.log(value)
})

Python

ui.date_input(
    "date-input-key",
    label="Enter your birthday",
    on_enter=lambda value: print(value)
)

Learn more about working with inputs.

API reference

Function signature

Node.js

/**
 * One of the following:
 * - A JS Date object in UTC
 * - A human readable object with year, month (1-12), and day (1-31)
 * - `null` to ignore the parameter and use the default value
 */
type DateInput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
    }
    | Date // Assumes UTC for the given date
    | null

/**
 * An object with human readable values for year, month (1-12), and day (1-31)
 * and a JS Date object in UTC for the selected date.
 */
type DateOutput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
        jsDate: Date; // UTC midnight of the selected date
    }
    | null // Passes `null` if no date was selected

ui.dateInput(
    id: string,
    properties: Partial<{
        label: string,
        description: string,
        required: boolean,
        min: DateInput,
        max: DateInput,
        initialValue: DateInput,
        validate: (value: DateOutput | null) => string | void,
        onEnter: (value: DateOutput | null) => void,
        style: Style | null
    }>
)

Python

DateInputType = datetime.date | datetime.datetime | None
DateOutputType = datetime.date | None

ui.date_input(
    id: str,
    *,
    label: str = None,
    description: str = None,
    required: bool = True,
    min: DateInputType | None = None,
    max: DateInputType | None = None,
    initial_value: DateInputType | None = None,
    validate: Callable[[DateOutputType | None], str | None] = None,
    on_enter: Callable[[DateOutputType | None], None] = None,
    style: Style | None = None
)

Parameters

Node.js

id

required string

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

Python

id

required str

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

---

Node.js

properties.label

optional string

The label to display above the date input. If not provided, the label will be inferred from the id.

Python

label

optional str

The label to display above the date input. If not provided, the label will be inferred from the id.

---

Node.js

properties.description

optional string

A description to display between the label and date input box.

Python

description

optional str

A description to display between the label and date input box.

---

Node.js

properties.required

optional boolean

Validate that the date input is not empty before submitting the form it's part of or calling it's onEnter hook. Defaults to true.

Python

required

optional bool

Validate that the date input is not empty before submitting the form it's part of or calling it's on_enter hook. Defaults to True.

---

Node.js

properties.min Optional DateInput | null

Python

min Optional DateInputType | None

The earliest date that can be selected. If not provided, there is no minimum date.

Node.js

The parameter expects either a JS Date in UTC or a human readable object with year, month (1-12), and day (1-31).

type DateInput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
    }
    | Date // Assumes UTC for the given date
    | null // Use default value (i.e. no minimum date)

Python

The parameter expects either a datetime.date or datetime.datetime object or None to ignore the parameter and use the default value.

DateInputType = datetime.date | datetime.datetime | None

---

Node.js

properties.max Optional DateInput | null

Python

max Optional DateInputType | None

The latest date that can be selected. If not provided, there is no maximum date.

Node.js

The parameter expects either a JS Date in UTC or a human readable object with year, month (1-12), and day (1-31).

type DateInput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
    }
    | Date // Assumes UTC for the given date
    | null // Use default value (i.e. no maximum date)

Python

The parameter expects either a datetime.date or datetime.datetime object or None to ignore the parameter and use the default value.

DateInputType = datetime.date | datetime.datetime | None

---

Node.js

properties.initialValue Optional DateInput | null

Python

initial_value Optional DateInputType | None

The initial value to set for the date input. If not provided, the date input will be empty initially.

Node.js

The parameter expects either a JS Date in UTC or a human readable object with year, month (1-12), and day (1-31).

type DateInput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
    }
    | Date // Assumes UTC for the given date
    | null // Use default value (i.e. no initial value)

Python

The parameter expects either a datetime.date or datetime.datetime object or None to ignore the parameter and use the default value.

DateInputType = datetime.date | datetime.datetime | None

---

Node.js

properties.validate Optional (value: DateOutput) => string | void

Python

validate Optional Callable[[DateOutputType], str | None]

Supply a custom function to validate the date input.

Node.js

The validator will be passed an object with the following properties:

type DateOutput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
        jsDate: Date; // UTC midnight of the selected date
    }
    | null // Passes `null` if no date was selected

Python

The validator will be passed a datetime.date variable with the selected date or None if no date was selected.

DateOutputType = datetime.date | None

---

Node.js

properties.onEnter Optional (value: DateOutput) => void

Python

on_enter Optional Callable[[DateOutputType], None]

Supply a callback function that is called when the user presses enter while the date input is focused.

Node.js

The callback will be passed an object with the following properties:

type DateOutput = 
    | {
        year: number;
        month: number; // 1-12
        day: number; // 1-31
        jsDate: Date; // UTC midnight of the selected date
    }
    | null // Passes `null` if no date was selected

Python

The callback will be passed a datetime.date variable with the selected date or None if no date was selected.

DateOutputType = datetime.date | None

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---