10

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

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?

Community
  • 1
  • 1

1 Answers1

5

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

  • 5
    Sorry, but I think this answer goes against the question. – Gabriel R. May 30 '17 at 17:43
  • 1
    Not sure how this answer (yeah, I know it's old) "goes against the question". It answers the question (i.e. no, you can't style it), and then it offers an alternate solution to the OP's problem. If only all answers on SO were this helpful! Not sure why this has gotten downvoted. What answers did you downvoters offer? – Matt Long Jun 07 '23 at 15:49