Pickers

Name: Rence Material
Author: david abalaku

Pickers provide a simple way to select a single value from a pre-determined set. They typically appear in a dialog or menu.

Schedule your life!

Native Skinned

Browser Default

DATE PICKER

TIME PICKER

Rence Material automatically skins native inputs to match the brand identity.

Zero Config!

HTML

<!-- Native HTML5 Date Picker -->
<div class="mb-4">
  <label class="form-label text-muted small fw-bold">Select Date</label>
  <input type="date" class="form-control" value="2026-05-27">
</div>

Material Dialog Picker

Click the button above to see the interactive demo of how a picker appears.

Full Spec Mockup!

HTML

<!-- Material Design 3 Spec Picker Mockup -->
<button class="btn btn-primary d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#dateModal">
  <i class="material-icons">calendar_today</i> May 27, 2026
</button>