I have 2 more questions about the Compose Material3 DatePicker. 1. Is there a callback or a way to d...

# compose

[Daniele B]

I have 2 more questions about the Compose Material3 DatePicker.
1. Is there a callback or a way to detect when the user changes the selected day? I can see the DatePickerState changes, but I can't find a callback that is fired on change.
2. is there a way to change the font size, and the spacing between the numbers?

[Teo Vladusic]

As far as I remember, you can use LaunchedEffect with pickerState.selectedDate as the key. (don't know if the syntax is 100% right, but I hope you get the point)

[Stylianos Gakis]

Also since that is internally backed by mutableState iirc, you can also just do

LaunchedEffect(pickerState) {
  snapshotFlow { pickerState.selectedDateMillis }.collectLatest {
    println(it) // Here you got the latest selection every time it changes
  }
}

[Daniele B]

Thanks @Teo Vladusic and @Stylianos Gakis!
I used this code:

LaunchedEffect(key1 = pickerState.selectedDateMillis) {
  onChangeDateTime(pickerState.selectedDateMillis!!)
}

Any specific reason to use snapshotFlow instead?

[Stylianos Gakis]

They both will be doing the correct thing, it’s just that with this every time there’s a new selection you are cancelling the old coroutine, launching a new one and so on.
With snapshotFlow you are just keeping that one coroutine running but every time there is a new selection you get a new value in the flow, which should be cheaper and happen immediately

[Daniele B]

@Stylianos Gakis thanks for the explanation!

[Daniele B]

Anyone got any idea how to change the font and spacing of the DatePicker? I guess it's not possible?

[Teo Vladusic]

I am looking into the material figma file, https://www.figma.com/file/tTw3JZcRJDEzBdwqxfkssX/Material-3-Design-Kit-(Community)?type=design&node-id=51954-18122&mode=design&t=zXRMGueGYt9BD9mQ-0
Maybe you can try to modify the M3/body/large style?

[Teo Vladusic]

You can do it by modifying your MaterialTheme Typography in your App Theme composable or just by wrapping the date picker in something like this:

MaterialTheme(
            typography = MaterialTheme.typography.copy(
                bodyLarge = TextStyle()
            )
        ) {
            // Date picker code
        }

[Stylianos Gakis]

If you really wanna edit things you might as well copy paste the implementation. I've done the same because I needed to do too many changes that were not possible with the existing API.

[Daniele B]

@Stylianos Gakis I was able to change the font size:

MaterialTheme(
    typography = MaterialTheme.typography.copy(
        bodyLarge = TextStyle(fontSize = 10.sp)
    )
) {
    // Date picker code
}

But it does not affect the spacing:

[Daniele B]

Any idea on how to change the spacing too?

[Stylianos Gakis]

No need to tag people who are already part of the conversation btw. We already get notifications

[Teo Vladusic]

I think you can't change the padding as M3 calendar cell has fixed size of 48px and there is no padding

[Teo Vladusic]

I have sent you a link for an m3 figma file, just go there and explore their components and values

[Daniele B]

Thanks Teo, I am not really sure how to use the data I find in Figma. For example it says that height and width of the number cell is 40 px. Does it mean I can't change that?

[Teo Vladusic]

Yes, you can only modify things that are in your Material Theme like colors, typography and shapes

[Stylianos Gakis]

You can always just go inside the composable and look at the implementation yourself. It should be evident from the code there how the items are laid out in the component

[Daniele B]

Stylianos, even if I go into the code, I guess I can't change that. Is copying/pasting the implementation the only way to make changes?

[Stylianos Gakis]

Yep

[Daniele B]

thanks

[Stylianos Gakis]

You might be interested in the discussion here https://kotlinlang.slack.com/archives/CJLTWPH7S/p1710511919353029 and the article linked with it.
In general m3 is a design system with set guidelines and expectations of how things should work. There is some level of customization that m3 allows you. but it is limited to the m3 design system specs.
If you need to adjust things outside of those guidelines then you might need to build it yourself. And copy-pasting the existing m3 implementation is a great way to jump-start this “build it yourself” process

[Daniele B]

I tried to copy DatePicker locally, but I get several warnings about components being private and internal. Any suggestion?

[Daniele B]

Screenshot 2024-03-29 at 18.51.31.png

[Stylianos Gakis]

Yep, copy those too 😂
I never said it’d be easy. But it’s the only way to be able to edit those values.

[Stefan Oltmann]

I really dislike the Material DatePicker and had the same issues with it being far too big for an iPhone Mini

[Stefan Oltmann]

This might interest you: https://kotlinlang.slack.com/archives/C01Q62JMKBP/p1705338153852249

[Stefan Oltmann]

It still would be great if Material one day gets a proper DatePicker that’s not so huge and also allows configuration.

[Stefan Oltmann]

In my case I design my apps mostly to adhere to Material Design, but it’s not obligatory. I find the iOS style DatePicker fits well and doesn’t look out of place. Your mileage may vary.

[Sean Proctor]

I had forked a material 3 style calendar before it was added to compose. My version and the original are abandoned now, but if you want a base to start, you could fork one of those. https://github.com/sproctor/composecalendar