Material Design–style date picker spinner UI component offering scrollable day, month, year wheels with customizable colors, typography, localization support and extensible date formatting.
The missing DatePickerSpinner from Material Design
| Light | Dark |
|---|---|
 |  |
For Compose Multiplatform projects, add the dependency in your commonMain source set:
commonMain.dependencies {
implementation("com.commit451:datepickerspinner:latest.release.here")
}
For Android-only projects:
dependencies {
implementation("com.commit451:datepickerspinner-android:latest.release.here")
}
For JVM-only projects:
dependencies {
implementation("com.commit451:datepickerspinner-jvm:latest.release.here")
}
Web (Wasm and JS) and iOS have no standalone artifacts — both come through a Compose
Multiplatform module. Use the commonMain dependency from the Multiplatform section above;
Gradle resolves the correct variant for each target your project declares.
val state = rememberDatePickerSpinnerState()
DatePickerSpinner(
state = state,
modifier = Modifier.fillMaxWidth(),
)
// The selection is observable from composition at any time:
val selected: LocalDate = state.selectedDate
By default the picker opens on today's date with a 1900..2100 year range. Pass initialDate
and yearRange to rememberDatePickerSpinnerState to change that. With no width modifier the
picker is compact; give it Modifier.fillMaxWidth() (or any fixed width) and the wheels stretch
to share it.
Colors are overridable per-instance via colors:
DatePickerSpinner(
state = rememberDatePickerSpinnerState(),
colors = DatePickerSpinnerDefaults.colors(
dividerColor = MaterialTheme.colorScheme.primary,
),
)
Text styling follows MaterialTheme.typography.bodyLarge, like Material 3's DatePicker. To
restyle it, override that role in the theme — app-wide, or scoped around the picker:
MaterialTheme(
typography = MaterialTheme.typography.copy(
bodyLarge = MaterialTheme.typography.bodyLarge.copy(fontSize = 20.sp),
),
) {
DatePickerSpinner(state = rememberDatePickerSpinnerState())
}
The library bundles no strings. Localize it by supplying a dateFormatter with your own month
labels and, if needed, a wheel order matching the locale's date order:
DatePickerSpinner(
state = rememberDatePickerSpinnerState(),
dateFormatter = DatePickerSpinnerDefaults.dateFormatter(
monthNames = localizedMonthNames, // any 12-element list, January-first
fieldOrder = listOf(DateField.Day, DateField.Month, DateField.Year),
),
)
For full control — localized numerals, era suffixes, day-of-week, etc. — implement
DatePickerSpinnerFormatter directly.
DatePickerSpinner is available under the MIT license. See the LICENSE file for more info.
\ ゜o゜)ノ
Surfaced from shared tags and platforms — no rankings paid for.