Pickers

A calendar for dates and ranges; the browser’s own pickers for times, colours and amounts

Date and time

On a desk the date opens a calendar and reads in the store’s format; on a phone each field is the phone’s own picker.

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

One field: the first day and the last on one calendar, or a preset range.

Dates

Show the code

<div class="w-100">
<div class="field">
<label class="label" for="pk-rg">Dates</label>
<div class="input">
<i class="ti ti-calendar">
</i>
<input id="pk-rg" readonly type="text" value="Sep 1 - Sep 30, 2026" placeholder="Choose the dates" role="combobox" aria-haspopup="dialog" aria-expanded="false" data-daterange="" data-from="2026-09-01" data-to="2026-09-30">
<input type="hidden" name="pk-rg-from" value="2026-09-01" data-dp="from">
<input type="hidden" name="pk-rg-to" value="2026-09-30" data-dp="to">
</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>