Dates & calendars
Dates & calendars patterns built with StyloftCSS and native HTML.
Calendar
An illustrative fixed-month calendar with native radio day selection. Month navigation, localization and arbitrary date arithmetic require application code.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
View HTML / PlaygroundHTML source
<table class="sl-calendar">
<caption>
October 2026 · choose a sample day
</caption>
<thead>
<tr>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thu</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
<th scope="col">Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-hidden="true"></td>
<td aria-hidden="true"></td>
<td aria-hidden="true"></td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-01"
aria-label="October 1, 2026"
/><span>1</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-02"
aria-label="October 2, 2026"
/><span>2</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-03"
aria-label="October 3, 2026"
/><span>3</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-04"
aria-label="October 4, 2026"
/><span>4</span></label
>
</td>
</tr>
<tr>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-05"
aria-label="October 5, 2026"
/><span>5</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-06"
aria-label="October 6, 2026"
/><span>6</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-07"
aria-label="October 7, 2026"
/><span>7</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-08"
aria-label="October 8, 2026"
/><span>8</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-09"
aria-label="October 9, 2026"
/><span>9</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-10"
aria-label="October 10, 2026"
/><span>10</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-11"
aria-label="October 11, 2026"
/><span>11</span></label
>
</td>
</tr>
<tr>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-12"
aria-label="October 12, 2026"
/><span>12</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-13"
aria-label="October 13, 2026"
/><span>13</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-14"
aria-label="October 14, 2026"
/><span>14</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-15"
aria-label="October 15, 2026"
/><span>15</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-16"
aria-label="October 16, 2026"
checked
/><span>16</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-17"
aria-label="October 17, 2026"
/><span>17</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-18"
aria-label="October 18, 2026"
/><span>18</span></label
>
</td>
</tr>
<tr>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-19"
aria-label="October 19, 2026"
/><span>19</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-20"
aria-label="October 20, 2026"
/><span>20</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-21"
aria-label="October 21, 2026"
/><span>21</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-22"
aria-label="October 22, 2026"
/><span>22</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-23"
aria-label="October 23, 2026"
/><span>23</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-24"
aria-label="October 24, 2026"
/><span>24</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-25"
aria-label="October 25, 2026"
/><span>25</span></label
>
</td>
</tr>
<tr>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-26"
aria-label="October 26, 2026"
/><span>26</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-27"
aria-label="October 27, 2026"
/><span>27</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-28"
aria-label="October 28, 2026"
/><span>28</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-29"
aria-label="October 29, 2026"
/><span>29</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-30"
aria-label="October 30, 2026"
/><span>30</span></label
>
</td>
<td>
<label
><input
type="radio"
name="ref-calendar-day"
value="2026-10-31"
aria-label="October 31, 2026"
/><span>31</span></label
>
</td>
<td aria-hidden="true"></td>
</tr>
</tbody>
</table>HTML source · enable JavaScript for the playground343 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
DateField
Native locale-aware date entry.
View HTML / PlaygroundHTML source
<div class="sl-field">
<label class="sl-label" for="ref-date-field">Project date</label
><input class="sl-input" type="date" id="ref-date-field" value="2026-10-16" />
</div>HTML source · enable JavaScript for the playground4 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
DatePicker
The browser provides its date picker UI.
View HTML / PlaygroundHTML source
<div class="sl-field">
<label class="sl-label" for="ref-date-picker">Choose a date</label
><input class="sl-input" type="date" id="ref-date-picker" />
</div>HTML source · enable JavaScript for the playground4 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
DateRangePicker
Native start/end date pickers. Cross-field range validation belongs to your application.
View HTML / PlaygroundHTML source
<div class="sl-date-range">
<div class="sl-field">
<label class="sl-label" for="ref-date-range-start">Start date</label
><input class="sl-input" type="date" id="ref-date-range-start" value="2026-10-16" />
</div>
<div class="sl-field">
<label class="sl-label" for="ref-date-range-end">End date</label
><input class="sl-input" type="date" id="ref-date-range-end" value="2026-10-23" />
</div>
</div>HTML source · enable JavaScript for the playground10 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
RangeCalendar
A native date-range alternative. A multi-month range calendar grid and synchronized range highlighting require application code.
View HTML / PlaygroundHTML source
<div class="sl-date-range">
<div class="sl-field">
<label class="sl-label" for="ref-range-calendar-start">Start date</label
><input
class="sl-input"
type="date"
id="ref-range-calendar-start"
value="2026-10-16"
/>
</div>
<div class="sl-field">
<label class="sl-label" for="ref-range-calendar-end">End date</label
><input
class="sl-input"
type="date"
id="ref-range-calendar-end"
value="2026-10-23"
/>
</div>
</div>HTML source · enable JavaScript for the playground20 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
TimeField
Native localized time editing.
View HTML / PlaygroundHTML source
<div class="sl-field">
<label class="sl-label" for="ref-time">Start time</label
><input class="sl-input" type="time" id="ref-time" value="09:30" />
</div>HTML source · enable JavaScript for the playground4 lines · UTF-8
ReadyCtrl/⌘ + Enter to run · Scripts blocked
Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.