Date Text Field

A text field for a day: the day is typed in digits, or chosen from a calendar that a button at the box's end opens.

import com.pantrixui.components.date.datetextfield.PantrixDateTextField

• Digits alone. The field takes digits alone; as each part is whole its mark comes by itself: in Turkish 18102026 becomes 18.10.2026, in American English 10182026 becomes 10/18/2026. A phone opens its keyboard of digits. Backspace after a mark deletes the digit before it.
• A pasted day. A day written out is read as it is written: in the field's order first, and else with the year first, as in ISO 8601. In Turkish 2026-10-18 becomes 18.10.2026 too; a year of two digits is one of the hundred years around today (18.10.26, 2026). A text not read so comes in as its digits.
• Format. format gives the order of the parts and the mark between them; by default it comes from the theme's language and region: Turkish and German GG.AA.YYYY, Britain and Arabic DD/MM/YYYY, the US MM/DD/YYYY, a language not known ISO 8601 (YYYY-MM-DD). While empty the field shows the pattern; a screen reader hears it as the order of the parts ("Day, Month, Year").
• Value. onValueChange is called each time the field's day changes: a whole day the calendar takes, or null where the field holds nothing, half a day, digits that make no day or a day it does not take. A half-typed day stays on the screen while value is null; another day from outside is written into the field.
• Its own error. The field writes what is typed wrong under the box itself: a date not finished, once the field is left, a day the calendar has not (31 February), a day outside minDate and maxDate, a day isDateEnabled does not take. The app's error comes first; its message is supportingText.
• Calendar. It opens with the button, with Alt+↓ on the desktop and the web, by pressing the box of a read-only field, and with Enter or Space. presentation says what it opens in: by default a sheet in a narrow window and a popover under the box in a wider one; or in every window a popover, a sheet or a dialog; the same on every platform. Pressing a day in the calendar takes the day and closes the calendar; Escape and pressing outside close it with nothing changed. Opened with the keyboard the focus goes to the chosen day, or else to today; once it closes it is back on the field.
• Three overloads. The one with value and onValueChange; the one with state (rememberDateTextFieldState()): date is the field's day, setting it puts the day in the field, text tells a half-typed field from an empty one; the one with field binds to a form's field.
• Date type. Days are PantrixDates; to convert them to kotlinx-datetime or java.time, docs/guide/date-time/DATE_TIME_GUIDE.md.

Examples

A birthday, typed

A birthday, typed: a day after today is not taken. The calendar opens too, but typing a far year is quicker. Once the day is whole it is written below; left half typed, the field shows its error that says the pattern.

var birthday by remember { mutableStateOf<PantrixDate?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDateTextField(
        value = birthday,
        onValueChange = { birthday = it },
        label = "Birthday",
        maxDate = rememberToday(),
        showClearButton = true,
        tagKey = "birthday"
    )
    PantrixText(
        text = birthday?.let { "Birthday: ${strings.date(it.day, it.month, it.year)}" } ?: "No day yet",
        style = PantrixTheme.typography.body
    )
}

A delivery day on a weekday

A delivery day on a weekday within the next month. In the calendar the weekends are faint. A Saturday typed is not taken and the field says "This day cannot be chosen"; a day past the month says the bounds.

var delivery by remember { mutableStateOf<PantrixDate?>(null) }
val today = rememberToday()
PantrixDateTextField(
    value = delivery,
    onValueChange = { delivery = it },
    label = "Delivery day",
    supportingText = "Delivered on weekdays only",
    minDate = today.plusDays(1),
    maxDate = today.plusMonths(1),
    isDateEnabled = { it.dayOfWeek <= FRIDAY },
    tagKey = "delivery"
)

private const val FRIDAY = 5

The calendar in a sheet or a dialog

The calendar opens in a sheet: near the thumb on a phone, as wide as the screen. presentation = Dialog opens it in a dialog in the middle of the window. A day chosen closes the sheet and is written into the field.

var appointment by remember { mutableStateOf<PantrixDate?>(null) }
var presentation by remember { mutableStateOf(DatePickerPresentation.Sheet) }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(DatePickerPresentation.Popover, "Popover", tagKey = "popover"),
            SegmentOption(DatePickerPresentation.Sheet, "Sheet", tagKey = "sheet"),
            SegmentOption(DatePickerPresentation.Dialog, "Dialog", tagKey = "dialog")
        ),
        selected = presentation,
        onSelect = { presentation = it },
        fullWidth = false,
        tagKey = "presentation"
    )
    PantrixDateTextField(
        value = appointment,
        onValueChange = { appointment = it },
        label = "Appointment day",
        minDate = rememberToday(),
        presentation = presentation,
        tagKey = "appointment"
    )
}

The app's error and disabled

The app's own error comes before the field's: a day already taken is said with error and supportingText. The field under it is disabled: it takes no focus and opens no calendar.

var meeting by remember { mutableStateOf<PantrixDate?>(PantrixDate(2026, 11, 2)) }
val taken = meeting == PantrixDate(2026, 11, 2)
PantrixDateTextField(
    value = meeting,
    onValueChange = { meeting = it },
    label = "Meeting day",
    supportingText = if (taken) "This day is taken, choose another" else "A day the office is open",
    error = taken,
    tagKey = "meeting"
)
PantrixDateTextField(
    value = PantrixDate(2026, 10, 1),
    onValueChange = {},
    enabled = false,
    label = "Contract start",
    tagKey = "contract"
)

Read-only: from the calendar alone

A read-only field is not typed into: the day is chosen from the calendar alone. A press on the box, Enter or Space opens the calendar. For a place where a day must be chosen, and what is typed must not be misread.

var checkIn by remember { mutableStateOf<PantrixDate?>(null) }
PantrixDateTextField(
    value = checkIn,
    onValueChange = { checkIn = it },
    readOnly = true,
    label = "Check-in day",
    placeholder = "Choose from the calendar",
    minDate = rememberToday(),
    tagKey = "check_in"
)

Bound to a form

Bound to a form's field: with no day, "Save" shows the error and sends the focus to the field. The error shows on leaving the field too; going into the calendar is no leaving it. Digits that make no day leave the value null, and the rule catches it.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val report = LocalExampleEvents.current
val start = form.field<PantrixDate?>("start", initial = null, Rules.required("Enter the start day"))
PantrixDateTextField(
    field = start,
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Start day",
    minDate = rememberToday()
)
PantrixButton(
    text = "Save",
    onClick = { scope.launch { form.submit { report("Saved") } } },
    form = form,
    tagKey = "save_start"
)

On a state, as ISO 8601 writes a day

On a state: state.date is the field's day, state.text the digits typed. Together they tell an empty field from a half-typed one. ISO 8601 reads the same in every language. The button changes the state's day, and the field writes it in itself.

val state = rememberDateTextFieldState()
val today = rememberToday()
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDateTextField(
        state = state,
        label = "Report day",
        format = DateFieldFormat.Iso,
        tagKey = "report_day"
    )
    PantrixText(
        text = when {
            state.date != null -> "Day: ${state.date}"
            state.text.isEmpty() -> "The field is empty"
            else -> "Half typed: ${state.text}"
        },
        style = PantrixTheme.typography.body
    )
    PantrixButton(
        text = "Write today",
        onClick = { state.date = today },
        variant = ButtonVariant.Outline,
        tagKey = "write_today"
    )
}

An own format

The field's format comes from the theme's language; format says another. The formats of most languages are ready in DateFieldFormat (DayMonthYearDots, MonthDayYearSlashes, Iso, …); an own format is the order of the parts (DateFieldOrder) and a mark: the first here puts the year first, with slashes, as Japanese does. Change the format: the field's day stays the same, only the way it is written changes.

var shipping by remember { mutableStateOf<PantrixDate?>(PantrixDate(2026, 10, 18)) }
var format by remember { mutableStateOf(DateFieldFormat(DateFieldOrder.YearMonthDay, '/')) }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(DateFieldFormat(DateFieldOrder.YearMonthDay, '/'), "YYYY/MM/DD", tagKey = "year_first"),
            SegmentOption(DateFieldFormat.MonthDayYearSlashes, "MM/DD/YYYY", tagKey = "month_first"),
            SegmentOption(DateFieldFormat(DateFieldOrder.DayMonthYear, '-'), "DD-MM-YYYY", tagKey = "day_first")
        ),
        selected = format,
        onSelect = { format = it },
        fullWidth = false,
        tagKey = "format"
    )
    PantrixDateTextField(
        value = shipping,
        onValueChange = { shipping = it },
        label = "Shipping day",
        format = format,
        tagKey = "shipping"
    )
}

A sheet in a narrow window

The default presentation = DatePickerPresentation.Adaptive: in a narrow window the calendar opens in a sheet from the bottom, near the finger and as wide as the window; in a wider window in a popover under the box. Pick "Narrow" in the card's window selector and open the calendar. It is chosen as the calendar opens: it does not change while it is open, even if the window does.

var day by remember { mutableStateOf<PantrixDate?>(null) }
// The card's window is as tall as the example: the example is kept tall so that a sheet opened in a narrow window has room.
Column(Modifier.fillMaxWidth().height(460.dp)) {
    PantrixDateTextField(
        value = day,
        onValueChange = { day = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Meeting day",
        minDate = rememberToday(),
        presentation = DatePickerPresentation.Adaptive,
        tagKey = "adaptive_day"
    )
}

API

value

A text field for a day: the day is typed in digits, or chosen from a calendar that a button at the box's end opens.

state

A date field on a state its caller keeps, as PantrixDateTextField of a value is in every other way: the state's date is the field's day, setting it writes the day in, and its text tells a field that is half typed from an empty one.

field

A date field bound to a form's field: its day, its error and its name come from field.

TextFieldStyle

PantrixTextField's box: its shape, how tall and how wide it is at the least, the room around its text, its icons and its border.

TextFieldColors

What PantrixTextField is painted with, for a field that does not take the theme's: a colour that is set is used, and one that is left out stays the theme's role. A product gives the colours it changes and no others: