Stylish Date Picker Field
A date-input field that opens a Material 3 DatePickerDialog when tapped, displaying the selected date as formatted text in an OutlinedTextField.
The text field itself is read-only but keeps its enabled appearance; all interaction goes through the date-picker dialog. Set enabled to false to grey the field out and block the dialog. When value is null the field shows the placeholder text. The dialog's confirm button commits the selected date via onValueChange; the dismiss button closes the dialog without changing the value. Date formatting avoids java.time so the component works across all Kotlin Multiplatform targets.
The dialog is the Material 3 DatePickerDialog, which applies platform window insets (system bars, IME) itself; this component does not add any additional inset handling.
Parameters
The currently selected date, or null if no date has been chosen.
Callback invoked with the newly selected LocalDate when the user confirms a date in the dialog. Receives null-safe: only called when a date is actually selected. If the user confirms without selecting a date, the dialog closes silently and onValueChange is not called.
The label text displayed on the outlined text field. Ignored when labelContent is provided.
The text for the dialog's confirm button. Ignored when confirmLabelContent is provided.
The text for the dialog's dismiss button. Ignored when dismissLabelContent is provided.
The placeholder text shown when value is null. Ignored when placeholderContent is provided.
A function that converts a LocalDate to its display string. Defaults to defaultDateFormatter, a locale-neutral yyyy/MM/dd format (zero-padded Gregorian numbers with ASCII digits, independent of the device locale). Supply a custom formatter when a locale-aware format is required.
Whether the field is interactive. When false, taps do not open the date-picker dialog and the field renders in a disabled state. Defaults to true.
When true, the field renders its error visual state (error-colored outline). Defaults to false.
An optional text displayed below the field, in the error color when isError is true. When null, no supporting text is shown.
The range of years selectable in the picker, forwarded to the Material 3 rememberDatePickerState. Defaults to DatePickerDefaults.YearRange.
The display mode (calendar picker or text input) the dialog opens with, forwarded to the Material 3 rememberDatePickerState. Defaults to DisplayMode.Picker.
Whether the picker shows its picker/input mode toggle button, forwarded to the Material 3 DatePicker. Defaults to false.
A policy deciding which dates may be selected, forwarded to the Material 3 rememberDatePickerState. Defaults to DatePickerDefaults.AllDates.
An optional custom composable for the text field placeholder. When null, a Text composable with placeholder is used.
An optional custom composable for the dialog's confirm button content. When null, a Text composable with confirmLabel is used.
An optional custom composable for the dialog's dismiss button content. When null, a Text composable with dismissLabel is used.
An optional composable rendered at the start of the field, typically an androidx.compose.material3.Icon. When null, no leading icon is shown.
An optional composable rendered at the end of the field, typically an androidx.compose.material3.Icon. When null, no trailing icon is shown.