css - Styling the calendar for html5 native datepicker

Question

Is it possible to change the styling for the calendar popover for the default html5 datepicker?

I want to move the navigation buttons for the month to below the calendar, and change the font-style, size, colors, etc. I'm aware you can change the input box from this stackoverflow thread (Are there any style options for the HTML5 Date picker?), but I want to change the styling of the calendar itself. Is there a easy way of doing this?

Answer 1

I don't think there's any cross-browser way of styling it since every browser implements their own calendar differently. The easiest way (if you can use external libraries) is to just use jQuery UI Datepicker, which without styling will just give you a basic calendar popover that you can then customize the styling/positioning with CSS. Let me know if you need help with that.

You can then use the native html5 datepicker/calendar as a fallback for browsers that have javascript disabled