A calendar-based date selection input component.
Select date
March 14, 2026
March 2026
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dp-wrap"> <div class="dp-label">Select date</div> <div class="dp-input"> <span>Select a date...</span> <span class="material-icons-round">calendar_today</span> </div> <!-- dp-popup shown on click --> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
API Reference
Classes
| Class | Description |
|---|---|
dp-wrap | Container column |
dp-label | Field label |
dp-input | Trigger input display |
dp-popup | Floating calendar panel |