Hi everyone! Hope you are having an amazing time! ...
# compose
z
Hi everyone! Hope you are having an amazing time! I would appreciate some help with compose UI. I am fairly new to compose and kotlin mulitplatform in general. I was trying to have a
DateRangePicker
in my KMP android and iOS app. I found out about material3
DateRangePicker
component and been trying to use it. But I couldn't find any
DateRangePickerDialogue
component in the material3 library. So I tried to use the
DatePickerDialogue
component with
DateRangePicker
. This works perfect except in iOS. The "OK" and "Cancel" button does not seem to render in iOS no matter what I do. Here is the code I am using: I am attaching both screenshots from iOS and Android. Any help or guidance would be greatly appreciated!
🧵 4
s
Huh, this looks like a bug in Compose Material, would be a good idea to report this on YouTrack!
z
Hmm...right. I was not confident enough for that. I thought I might be doing something wrong. Sure, reporting it. Thanks!
s
As a general rule of thumb, if two platforms are showing different behavior where no difference is expected, then it's most likely a bug/parity issue. This is also a weird one: I assumed most of the UI implementations in Material are in common code, but this suggests otherwise? Or maybe it was intentional? Jetpack Compose (Android) and Compose Multiplatform repos and development cycles are separate, but most code seems to be shared and the original Android sources are KMP-ready... No clue, but opening an issue for something confusing like this never hurts! You'll either be reporting an actual bug, or get informed about whatever design decision / mistake that led to this.
And as some other people reacted (with 🧵) , it's a good idea to move the details of your message as a comment on the thread, to avoid bloating the main channel chat with huge walls of code, which is particularly annoying for mobile Slack users.
s
After you report this, please link to the reported issue in this thread, as well. That way, other people that come across this thread having the same issue will know where to look. Thanks a lot!
☝️ 3
z
(moving code out to the thread) Here is the code I am using:
Copy code
val dateRangePickerState = rememberDateRangePickerState(
        selectableDates = PastSelectableDates
    )
    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirm(
                    dateRangePickerState.selectedStartDateMillis,
                    dateRangePickerState.selectedEndDateMillis
                ) },
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp)
            ) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(
                onClick = onDismiss,
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp)
            ) {
                Text("Cancel")
            }
        },
        modifier = Modifier.wrapContentSize().padding(16.dp)
    ) {
        DateRangePicker(
            title = {
                DateRangePickerDefaults.DateRangePickerTitle(
                    displayMode = dateRangePickerState.displayMode,
                    modifier = Modifier.padding(0.dp)
                )
            },
            headline = {
                DateRangePickerDefaults.DateRangePickerHeadline(
                    dateRangePickerState.selectedStartDateMillis,
                    dateRangePickerState.selectedEndDateMillis,
                    displayMode = dateRangePickerState.displayMode,
                    DatePickerDefaults.dateFormatter(),
                    modifier = Modifier.padding(0.dp)
                )
            },
            state = dateRangePickerState,
            showModeToggle = false,
            modifier = Modifier.padding(16.dp)
        )
    }
Thank you all of the suggestions! When I tried to report this on YouTrack, I found a exact similar issue. Apparently it was fixed on 1.7.1 version but I am using 1.7.0 Here is the link to the already existing issue: https://youtrack.jetbrains.com/issue/CMP-6989/DateRangePicker-doesnt-show-confirm-button-on-iOS
🙌 2
thank you color 1