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


I have he following datepicker on a page:

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!


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?

If you test the screen with onload you can enable the datepicker only if it fits a minimum width:

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: