Disable Bootstrap Datepicker on Mobile and switch to type="date" on mobile

Hi,

I have he following datepicker on a page:
https://jsfiddle.net/toolman/18xnogf9/

It works fine on desktop, but when viewing it on a mobile, the date popup takes up too much space and makes it hard for the user to select a date

I am wondering if there is a way to disable the popup on mobile and have a normal date field in place. I have noticed this plugin/script uses a type="text" rather than a type="date"

If anyone can help, that would be great!

Thanks

I have thought of one way around this…

I could have two fields and hide one on mobile and show the one with type=“date” on mobile. The problem I have is that it is a required field, so if both are required and one is hidden, it won’t work?

Hi,
If you test the screen with onload you can enable the datepicker only if it fits a minimum width:
https://jsfiddle.net/qf0obL49/2/

1 Like

Thanks for the reply, I will take a look at your example. From what I see, I think that would work perfectly :slight_smile: