Pickers

Dates, times, colours and amounts with the browser’s own pickers

Date and time

The pickers the phone and the desk already know.

Delivery date

Arrives by

Count starts

Month

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="pk-d">Delivery date</label>
<div class="input">
<input id="pk-d" name="pk-d" type="date" value="2026-10-05">
</div>
</div>
<div class="field">
<label class="label" for="pk-t">Arrives by</label>
<div class="input">
<input id="pk-t" name="pk-t" type="time" value="07:00">
</div>
</div>
<div class="field">
<label class="label" for="pk-dt">Count starts</label>
<div class="input">
<input id="pk-dt" name="pk-dt" type="datetime-local" value="2026-10-09T07:00">
</div>
</div>
<div class="field">
<label class="label" for="pk-m">Month</label>
<div class="input">
<input id="pk-m" name="pk-m" type="month" value="2026-10">
</div>
</div>
</div>

A range of dates

From and to, for a report.

From

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="pk-f">From</label>
<div class="input">
<input id="pk-f" name="pk-f" type="date" value="2026-09-01">
</div>
</div>
<div class="field">
<label class="label" for="pk-to">To</label>
<div class="input">
<input id="pk-to" name="pk-to" type="date" value="2026-09-30">
</div>
</div>
</div>

Colour and amount

A colour for a tile; a slider that shows its value.

Tile colour

Blue

Tip suggestion

18%

Show the code

<div class="stack w-100">
<div class="field">
<label class="label" for="pk-c">Tile colour</label>
<div class="input">
<input type="color" id="pk-c" value="#0864e8">
<span class="muted fs-sm">Blue</span>
</div>
</div>
<div class="field">
<label class="label" for="pk-r">Tip suggestion</label>
<div class="range-row">
<input class="range" type="range" id="pk-r" min="0" max="30" step="1" value="18" data-out="pk-r-out" data-unit="%">
<output id="pk-r-out" for="pk-r">18%</output>
</div>
</div>
</div>