❌ Missing dateTextFormat in WheelDatePickerComponent.WheelDatePicker

[shfqtm2]

import network.chaintech.kmp_date_time_picker.ui.datepicker.WheelDatePickerComponent

WheelDatePickerComponent.WheelDatePicker does not support the dateTextFormat parameter while WheelDateRangePickerView does.

This makes it impossible to customize how the date is displayed (e.g., 22 Aug 2025 instead of 22 August 2025).

Example (fails):

WheelDatePickerComponent.WheelDatePicker(
    startDate = selectedDate,
    dateTextFormat = { date -> "${date.dayOfMonth} ${date.month.name.take(3)} ${date.year}" }
)

Error:

No parameter with name 'dateTextFormat' found

👉 Request: Please add dateTextFormat support to WheelDatePickerComponent.WheelDatePicker for consistency with AllPickers.WheelDatePicker.

[0xshadowglitch]

I worked around the missing dateTextFormat in WheelDatePickerComponent.WheelDatePicker by creating my own CustomWheelDatePicker, built on top of this repo’s components. It supports flexible formatting and ordering (dd-mm-yyyy, mm-yyyy, etc.).

Here’s the full snippet:

private val monthList = (1..12).map { monthIndex -> 
    network.chaintech.kmp_date_time_picker.utils.Month(
        text = Month(monthIndex).name.lowercase().replaceFirstChar { it.uppercase() },
        value = monthIndex,
        index = monthIndex - 1
    )
}

@OptIn(ExperimentalTime::class)
@Composable
fun CustomWheelDatePicker(
    modifier: Modifier = Modifier,
    startDate: LocalDate = LocalDate.now(),
    minDate: LocalDate = LocalDate.MIN(),
    maxDate: LocalDate = LocalDate.MAX(),
    height: Dp = 128.dp,
    rowCount: Int = 3,
    dateFormat: String = "dd-mm-yyyy", // controls visible wheels + order
    selectedDateTextStyle: TextStyle = MaterialTheme.typography.titleMedium.copy(
        color = LocalContentColor.current,
        fontSize = 20.sp
    ),
    defaultDateTextStyle: TextStyle = MaterialTheme.typography.titleSmall.copy(
        color = Color.Black,
        fontSize = 18.sp
    ),
    selectorProperties: SelectorProperties = WheelPickerDefaults.selectorProperties(),
    onDateChanged: (snappedDate: LocalDate) -> Unit
) {
    val currentYear = remember {
        Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()).year
    }
    val years = remember {
        val range = (currentYear - 50)..(currentYear + 50)
        range.mapIndexed { index, value ->
            Year(text = value.toString(), value = value, index = index)
        }
    }

    // split state
    var yearState by remember { mutableStateOf(startDate.year) }
    var monthState by remember { mutableStateOf(startDate.monthNumber) }
    var dayState by remember { mutableStateOf(startDate.dayOfMonth) }

    val dayOfMonths = remember(monthState, yearState) {
        calculateDayOfMonths(monthState, yearState)
    }

    // Parse format string → order of wheels (case-insensitive)
    val components = remember(dateFormat) {
        val normalized = dateFormat.lowercase()
        val tokens = Regex("(dd|mm|yyyy)")
            .findAll(normalized)
            .map { it.value }
            .toList()

        tokens.ifEmpty {
            Log.w(TAG, "⚠️ CustomWheelDatePicker: dateFormat '$dateFormat' not recognized, falling back to dd-mm-yyyy")
            listOf("dd", "mm", "yyyy")
        }
    }

    // emit combined date
    LaunchedEffect(yearState, monthState, dayState) {
        val validDay = min(dayState, dayOfMonths.last().value)
        val newDate = LocalDate(yearState, monthState, validDay)
        if (newDate in minDate..maxDate) {
            onDateChanged(newDate)
        }
    }

    Box(modifier = modifier, contentAlignment = Alignment.Center) {
        if (selectorProperties.enabled().value) {
            HorizontalDivider(
                modifier = Modifier.padding(bottom = (height / rowCount)),
                thickness = 0.5.dp,
                color = selectorProperties.borderColor().value
            )
            HorizontalDivider(
                modifier = Modifier.padding(top = (height / rowCount)),
                thickness = 0.5.dp,
                color = selectorProperties.borderColor().value
            )
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            components.forEach { comp ->
                when (comp) {
                    "mm" -> {
                        WheelTextPicker(
                            modifier = Modifier.width(120.dp),
                            startIndex = monthList.find { it.value == startDate.monthNumber }?.index ?: 0,
                            height = height,
                            texts = monthList.map { it.text },
                            rowCount = rowCount,
                            selectedDateTextStyle = selectedDateTextStyle,
                            defaultDateTextStyle = defaultDateTextStyle,
                        ) { snappedIndex ->
                            monthList.find { it.index == snappedIndex }?.value?.let { monthState = it }
                            monthList.find { it.value == monthState }?.index
                        }
                    }

                    "dd" -> {
                        WheelTextPicker(
                            modifier = Modifier.width(50.dp),
                            startIndex = dayOfMonths.find { it.value == startDate.dayOfMonth }?.index ?: 0,
                            height = height,
                            texts = dayOfMonths.map { it.text },
                            rowCount = rowCount,
                            defaultDateTextStyle = defaultDateTextStyle,
                            selectedDateTextStyle = selectedDateTextStyle
                        ) { snappedIndex ->
                            dayOfMonths.find { it.index == snappedIndex }?.value?.let { dayState = it }
                            dayOfMonths.find { it.value == dayState }?.index
                        }
                    }

                    "yyyy" -> {
                        WheelTextPicker(
                            modifier = Modifier.width(80.dp),
                            startIndex = years.find { it.value == startDate.year }?.index ?: 0,
                            height = height,
                            texts = years.map { it.text },
                            rowCount = rowCount,
                            defaultDateTextStyle = defaultDateTextStyle,
                            selectedDateTextStyle = selectedDateTextStyle,
                        ) { snappedIndex ->
                            years.find { it.index == snappedIndex }?.value?.let { yearState = it }
                            years.find { it.value == yearState }?.index
                        }
                    }
                }
            }
        }
    }
}

Demo usage

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppDatePickerBottomSheet(
    sheetState: SheetState,
    initialDate: LocalDate,
    onDismiss: () -> Unit,
    onSave: (LocalDate) -> Unit
) {
    var selectedDate by remember { mutableStateOf(initialDate) }

    ModalBottomSheet(
        onDismissRequest = onDismiss,
        sheetState = sheetState,
        containerColor = MaterialTheme.colorScheme.background,
        dragHandle = { /* custom handle if needed */ },
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            CustomWheelDatePicker(
                startDate = selectedDate,
                dateFormat = "dd-mm-yyyy", // try "mm-yyyy" or "yyyy-mm-dd"
                onDateChanged = { date -> selectedDate = date }
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Button(onClick = onDismiss) { Text("Cancel") }
                Button(onClick = { onSave(selectedDate) }) { Text("Save") }
            }
        }
    }
}

👉 Still, it would be much better if WheelDatePickerComponent.WheelDatePicker directly supported dateTextFormat like WheelDateRangePickerView.

---