CSS Showcase · Live Demo

One date picker. Many patterns per device.

Desktop gets an anchored popover, a two-month range picker, and an inline calendar; mobile switches to a bottom sheet or quick-chip shortcuts.

Featured demo

mobile · sheet

Booking date

mobile design patterns

datepicker-sheet.css
/* Mobile field + bottom sheet */
.date-sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
  animation: sheet-up .22s ease-out;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.date-backdrop { position: absolute; inset: 0; z-index: 20;
  background: color-mix(in oklab, var(--foreground) 45%, transparent); }

CSS features used

  • • Container queries
  • • 7-column CSS Grid
  • • aspect-ratio day cells
  • • color-mix() range band
  • • Logical border radii
  • • Keyframe sheet / popover