CSS Only Date Picker With Calendar Dropdown

Image: CSS Only Date Picker With Calendar Dropdown GIF

Loving this sweet date picker by Shaw in pure CSS. When you click on the input field it draws out a calendar grid and on picking a day the date moves into the input field and the drop-down disappears in a smooth animation. Will work great on booking forms.

If you are having trouble with the pen, try the archived copy on GitHub

Date Picker With Calendar Dropdown Snippet

See the Pen CSS-only Calendar Conundrum 📆🤔 | @keyframers 1.11.0 by Shaw (@shshaw) on CodePen.0

scroll to top
%d bloggers like this: