Full screen on Mobile devices?

[TommySharpNZ]

Is there any way to get the date picker to show larger on a mobile device? Like take up the whole screen as I think this would work better for responsive phones and small devices...
Has anyone seen a way of achieving this?

[TareqNewazShahriar]

I was looking for this option and found this one year old issue with empty feedback!!

[mymth]

How about using inline picker with modal dialog?

[TareqNewazShahriar]

How about using inline picker with modal dialog?

Will every cell of the calendar expands to take up the whole width of the screen? Because making mobile friendly or full-screen is just not about popping up on whole screen. Another thing is - often input forms are opened as a modal on mobile devices; in that case, we have to handle modal over modal if we want to show inline calendar on a modal.

Any thought?

[mymth]

Will every cell of the calendar expands

You may want to try changing .datepicker-grid element’s width and see what happens.

we have to handle modal over modal

You are looking for a way to open a full-screen date picker that covers up the modal dialog that contains the associated input field in order to prevent the user from doing anything other than choosing date(s), aren’t you? I can’t get why it can be a concern.

Anyway, if you put a <div> with display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; inside a modal’s body and control its display property programmatically, it becomes a full-screen modal-over-modal. Since it’s in the same stacking context as the parent modal, it automatically shows up over the parent modal even without z-index. And since it covers the entire screen, you don’t have to worry much about condition check in the event handlers of parent modal.
https://codepen.io/mymth/pen/YzEaKMd
Is it difficult, complex or too much to do?

Actually, I got an idea while writing the above and tried it out.
https://codepen.io/mymth/pen/WNXzrYY
I noticed there is no way to close the picker without (re-)selecting or clearing date—except pressing the ESC key, which cannot be done on touch screen device. So you’ll need a close button somewhere.
it seems like you’ll have to do something like modal + inline picker anyway, or like this hack: https://codepen.io/mymth/pen/XWzNpVx.

[TareqNewazShahriar]

Holy moly! Did you not add full screen support to you calendar, out of those nice codepen samples!!? How difficult is it now to add full screen option to your calendar!?

Now back to the comment - once our team will come back to our calendar feature, we will try to make a demo from your codepen samples.
And sorry for the late.

[mymth]

As I said in my previous comment, I see a problem with it. I'd like users to do it at their own risk when they think, "Our users wouldn't care about it and thus, it won't be a problem in our case," or by adding their own close button matching their website/app's UI design.

To me, full-screen is a thing to avoid except when preventing users from doing anything else is reasonable. (Since it restrains users, it should provide a way to escape without making any changes.) And I have no intention of making this a one-size-fits-all library.