New :date: Date Picker components are now availabl...

# feed

[Alex Styl]

New 📅 Date Picker components are now available on Composables UI

Use these Compose Multiplatform Date Picker components to let your users select a date or date range.

Live demo at: https://composablesui.com/components/components/datepickers

[Stefan Oltmann]

It’s quite large like the Material picker. 👀

I prefer the one from https://github.com/alexzhirkevich/compose-cupertino, which I use in Ashampoo Photo Organizer because it fits well on small screens - even iPhone 12 Mini zoomed.

Is there an option to make it more compact?

[Alex Styl]

@Stefan Oltmann I agree with you that they are quite large. There are plans to make them fully responsive (the only real issue is phones on landscape).

Currently constrainted by the lack of nice responsive APIs for compose, so I am working on some responsive APIs

As soon as those are ready, I'll be able to provide fully responsive pickers

[Alex Styl]

was considering of providing a scrolling version but decided against it and do it properly when the API is done

[Stefan Oltmann]

Ok, yes, for phones in landscape you need to scroll.

But your picker seems to be too big for iPhone 12 Mini in zoom mode.
Compare it to the Compose Cupertino Date Picker.
That one fits well into portrait without the need for scrolling.

[Stefan Oltmann]

I don’t really understand what you mean by responsive APIs.

Ashampoo Photo Organizer adapts to the screen size and all I use is BoxWithConstraints 👀

[Alex Styl]

I am talking about changing components on part of the screen or the entire screen depending on the configuration of the screen.

BoxWithConstraints is okay if u want to change the sizing of components but anything like more complicated than that makes code too verbose

[Alex Styl]

what I have in mind is how css' media queries work or material compose's window classes

[Stefan Oltmann]

For reference, this is how my app Ashampoo Photo Organizer looks like in iPhone 12 Mini with display zoom - the smallest screen you need to plan for.

[Stefan Oltmann]

The original Material date picker is a monster, it doesn't fit in.

[Stefan Oltmann]

Okay, actually the iPhone SE is a bit smaller. You need to plan for that.

The iPhone 12 Mini in zoom mode has dimensions of 320.dp x 621.dp
The iPhone SE in zoom mode has 320.dp x 548.dp

The last thing is the screen size I used to test my app with.

And yes, having so little space is sometimes really challenging.

[Alex Styl]

thanks for sharing those. soon 👍

[Marko Novaković]

nit-picky suggestions:
1. idk. if this is just the preview, make selection work backwards, not only from past to future dates but from future to past
2. when range start and end is single date (range.size == 1), make all square corners round to signalise that it’s both start and end

[Alex Styl]

@Marko Novaković thanks for letting me know. no2 is now fixed.

regarding 1, that is the reason why you get full source code so that you can modify it the components as much as you like

[Stefan Oltmann]

So you think that number 1 is a special needs thing?
I kinda disagree.

[Stefan Oltmann]

Date range pickers in general support both directions. The special thing here is that it's with two clicks whereas most others use dragging.

Is dragging for ranges planned?

[Stefan Oltmann]

Ok, I can see that dragging doesn't work well if it spans multiple months. 🤔

And with backward selection there is no real way to reset the range.
The more I think about that the more I realize that request no 1 has some difficulties in UX.

[Alex Styl]

@Stefan Oltmann it all goes down to simplicity of the code I can provide with all the component examples, so that people can see how they can build components and/or modify to their needs. This is why you get the source code and this is not a dependency you are to your project.

For this specific component, the main issue is building the calendar component. Anything else should be rather easy to do in terms of Compose imho

[Stefan Oltmann]

I understand. You can't build in every feature to keep it simple.

[Marko Novaković]

@Alex Styl you’re welcome

[hafiz]

Hi can you make it can select date and time year and month without slide left and right. if my birthday was 1992 then i have slide how many times?

[Alex Styl]

@hafiz it's in the todo 🙂 need to sort out something before I can ship that

[Alex Styl]

hey @Stefan Oltmann thanks for pinging me about BoxWithConstraints. Had a go at it and turns out it is much more straightforward to work with than I remembered

[Stefan Oltmann]

Yes, it is pretty straightforward. 🙂