Content
- Name the event in the label: Start irrigation.
- Say what clashes and what to do: North Pump is already running then. Choose another start.
Date time picker
A date and a time chosen together, on the site’s clock, built for scheduling rather than for filtering.
Try it
Pick a day, then type or pick a time.
Start irrigationNorth Pump
datetime
NZDT
In the site’s time. Runs for 2 hours.
Means 2026-09-28T05:30+13:00
Clock
Size
Min / max
Zone label
Error
Disabled
<WildDateTimePicker
v-model:date="start.date"
v-model:time="start.time"
label="Start irrigation"
hint="North Pump"
help="In the site’s time. Runs for 2 hours."
time-zone="Pacific/Auckland"
size="sm"
required
/>When to use
- Use it to schedule a day and time, such as an irrigation run.
- Use it when the time follows the site’s clock through daylight saving.
Don’t use it
- For a day with no time. Use Date picker.
- For a span between two dates. Use Date range selector.
Anatomy
Two fields, one label, one message.
Start irrigationNorth Pump
datetime
NZDT
In the site’s time.
closed
September 2026
Mo
Tu
We
Th
Fr
Sa
Su
date, open
00:00
00:15
00:30
00:45
01:00
01:15
01:30
01:45
02:00
02:15
02:30
02:45
03:00
03:15
03:30
03:45
04:00
04:15
04:30
04:45
05:00
05:15
05:30
05:45
06:00
06:15
06:30
06:45
07:00
07:15
07:30
07:45
08:00
08:15
08:30
08:45
09:00
09:15
09:30
09:45
10:00
10:15
10:30
10:45
11:00
11:15
11:30
11:45
12:00
12:15
12:30
12:45
13:00
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
15:30
15:45
16:00
16:15
16:30
16:45
17:00
17:15
17:30
17:45
18:00
18:15
18:30
18:45
19:00
19:15
19:30
19:45
20:00
20:15
20:30
20:45
21:00
21:15
21:30
21:45
22:00
22:15
22:30
22:45
23:00
23:15
23:30
23:45
time, open
Typed times
How typed times are read.
| Typed | 24-hour | 12-hour |
|---|---|---|
| 530 | 05:30 | 5:30 am |
| 5:30 | 05:30 | 5:30 am |
| 5.30pm | 17:30 | 5:30 pm |
| 17 | 17:00 | 5:00 pm |
| 12.15 p.m. | 12:15 | 12:15 pm |
| 25:00 | Not a time | Not a time |
Unreadable text stays in the field, with a prompt for a time like 05:30.
Time zones
The zone label is the site’s, for the day and time chosen.
Start irrigation
datetime
NZST
means 2026-09-26T05:30+12:00
Start irrigation
datetime
NZDT
means 2026-09-28T05:30+13:00
Start irrigation
datetime
NZDT
02:30 is skipped on Sun 27 Sep 2026: the clocks go from 02:00 straight to 03:00.
typed 02:30 on 27 Sep
00:00
00:15
00:30
00:45
01:00
01:15
01:30
01:45
02:00Skipped
02:15Skipped
02:30Skipped
02:45Skipped
03:00
03:15
03:30
03:45
04:00
04:15
04:30
04:45
05:00
05:15
05:30
05:45
06:00
06:15
06:30
06:45
07:00
07:15
07:30
07:45
08:00
08:15
08:30
08:45
09:00
09:15
09:30
09:45
10:00
10:15
10:30
10:45
11:00
11:15
11:30
11:45
12:00
12:15
12:30
12:45
13:00
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
15:30
15:45
16:00
16:15
16:30
16:45
17:00
17:15
17:30
17:45
18:00
18:15
18:30
18:45
19:00
19:15
19:30
19:45
20:00
20:15
20:30
20:45
21:00
21:15
21:30
21:45
22:00
22:15
22:30
22:45
23:00
23:15
23:30
23:45
the list that day
States
Shared field states and the two heights.
Start irrigation
datetime
NZDT
Choose when the run starts.
empty
Start irrigation
datetime
NZDT
In the site’s time.
filled
Start irrigation
datetime
NZST
Choose Mon 28 Sep 2026 or later.
day out of range
Start irrigation
datetime
NZDT
On Mon 28 Sep 2026 the earliest time is 05:00.
time out of range
Start irrigation
datetime
NZDT
North Pump is already running then.
error from outside
Start irrigation
datetime
NZDT
Set by the schedule.
disabled
Start irrigation
datetime
NZDT
sm · 36 · 24-hour
Start irrigation
datetime
NZDT
lg · 44 · 12-hour
In context
Scheduling a manual run, with its finish time.
Accessibility
A screen reader hears “Start irrigation date” and “Start irrigation time”, then the message.
| Key | What it does |
|---|---|
| Enter / Space / ↓ / ↑ | Date field: opens the calendar. |
| Backspace / Delete | Date field: clears, unless required. |
| ← → ↑ ↓ | Calendar: moves a day or a week. |
| Home / End | Calendar: start or end of the week. |
| Page Up / Page Down | Calendar: a month, or a year with Shift. Time list: an hour. |
| Enter / Space | Calendar: chooses the day. |
| ↓ / ↑ | Time list: moves, skipping times that can’t be chosen. |
| Enter / Tab | Time field: keeps what the field says. |
| Esc | Closes the panel. Twice restores the saved time. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model:date | string | '' | The day, YYYY-MM-DD. |
| v-model:time | string | '' | The time, HH:mm, 24-hour. |
| label | string | — | Shared by both halves. |
| hint | string | — | Context, right of the label. |
| help | string | — | Guidance under the fields. |
| error | boolean | string | false | Reddens both halves; a string also shows. |
| required | boolean | false | Marks the label; removes Clear. |
| disabled | boolean | false | Both halves. |
| size | 'sm' | 'lg' | 'sm' | 36px or 44px tall. |
| hour-cycle | 12 | 24 | 24 | How times show. |
| step | number | 15 | Minutes between listed times. |
| min / max | string | — | A date, or a date and time. |
| time-zone | string | 'Pacific/Auckland' | The site’s IANA zone. |
| zone-label | string | false | worked out | Overrides the label; false hides it. |
| week-starts-on | 0 | 1 | 1 | 1 is Monday, 0 Sunday. |
| today | string | site’s today | Pins today, YYYY-MM-DD. |
| width | number | string | — | Control width. |
| name | string | — | Posts YYYY-MM-DDTHH:mm, no offset. |
| aria-label | string | — | Names the pair when there’s no label. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --radius-lg | 8px | Both fields. |
| --global-blue-1000 | #1877F2 | Focus edge, open field, chosen day. |
| --global-blue-100 | #EBFAFF | Today’s tint. |
| --global-blue-1100 | #0C296A | Today’s number; chosen day on hover. |
| --color-text-secondary | #4F4D55 | Weekdays, hint, help, zone. |
| --color-error | #E12121 | Error edge and message. |
| --shadow-dropdown | 0 4px 12px rgba(0,0,0,.08), … | Both panels. |