Date & Time Picker

Booking a hotel, scheduling a food delivery, setting an alarm, filtering bank transactions by month: they all need a date or a time. The control you use to choose it is a date pickerDate pickerA control for choosing a date, usually as a calendar grid or scrolling wheels.Open in glossary → (or time picker), and it is one of the most bug-prone components in any app.

Why? Because dates look simple but aren’t. Months have 28 to 31 days. Some years have a February 29th. Half the world writes 03/04 for the 3rd of April, the other half for March 4th. Clocks jump forward and back once a year. And a server in one time zoneTime zoneThe local time of a region. Bugs appear when apps mix up the user's time zone with the server's.Open in glossary → talks to phones in all the others. Each of those facts has caused real bugs in real products. Let’s learn how to find them.

What is a date picker?

A date picker is any control that lets the user choose a calendar date, and a time picker lets them choose a time of day. Many apps combine the two. They come in a few shapes:

• Calendar grid: a month view where you tap a day. The most common shape on every platform.
• Wheels: spinning columns for month, day and year (or hour and minute). The classic iOS look.
• Clock dial: tap the hour on a clock face, then the minutes (Android).
• Typed input: a text fieldText fieldAn input where the user types text, like a name, email, password or search query.Open in glossary → with a format such as DD/MM/YYYY, often with a calendar button next to it.
• Range picker: one calendar for a start and end date, such as check-in and check-out on a hotel site.

Anatomy

Here is a Material 3 modal date picker, because it has every part. Other designs leave some out.

How it differs from similar input methods

There are many ways to ask for a date, and choosing the wrong one is a real usability finding.

Input method	Best for	Weak at	Example
Calendar grid	Dates close to today, where the weekday matters	Dates far away (birth dates)	Delivery date, appointment
Range picker	A start and an end that belong together	Single dates	Hotel stay, car rental, report period
Wheel picker	Times; dates when the exact weekday doesn’t matter	Seeing the month as a whole; speed	Alarm time, reminder
Typed field	Dates users know by heart; power users	Ambiguous formats, typos	Card expiry, date of birth
Three separate fields	Memorable dates (birth, passport issue)	Picking relative to today	Date of birth in a government form
Dropdowns	A short list of fixed options	Anything with 31 options per field	“Next 7 days” delivery slots

Dev note

Apple calls it a date picker (UIDatePicker / SwiftUI DatePicker) with styles compact, inline (graphical) and wheels. Google’s Material 3 has date pickers (docked, modal, modal input) and time pickers (dial and input). On the web there is the native <input type="date"> and countless custom calendar libraries.

Designs & variants

Every platform does it differently, and each design has its own weak spots. All eight demos below are live.

Every picker below works. Tap, scroll the wheels, type into the fields, and try the keyboard (Tab, then arrow keys inside a calendar). The simulated "today" is Monday, October 12, 2026.

October 2026

SunMonTueWedThuFriSat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Time9:41 AM

Table reservation

DateOct 16, 20267:30 PM

January

February

March

April

May

June

July

August

September

October

November

December

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

2020

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

Thursday, February 26, 2026

Departure date

MM/DD/YYYY

October 2026

SMTWTFS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Select date

Tue, Oct 20

October 2026

SMTWTFS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

CancelOK

Select time

09:41

AMPM

121234567891011

9:41 AM

Pickup datePickup time

value sent: date=2026-10-12 time=19:30

Check-in

Fri, Oct 23

Check-out

Mon, Oct 26

October 2026

SMTWTFS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

3 nights · Oct 23 – Oct 26

When to use it

A calendar or wheel picker is a good choice when:

• The date is close to today (next week’s delivery, a table reservation this weekend).
• The weekday matters: users want to see that the 23rd is a Friday.
• Some dates are unavailable and should be visibly blocked (sold-out nights, past dates, closed days).
• You need a range where the user wants to see both ends together.
• For times: the choice is one of a limited set (every 15 minutes) or a familiar clock face helps.

Good and bad uses

Common bugs

Date and time bugs are so common that many teams keep a dedicated checklist for them. These are the classics:

#	Bug	What you see	Typical severity
1	Impossible range	Check-out before check-in, or an end date before the start date, is accepted	High
2	Off-by-one count	“2 nights” for a one-night stay; a 7-day report includes 8 days	High (wrong price)
3	Impossible dates accepted	Typed 31/04 or 29/02/2027 is accepted, or silently becomes 1 May / 1 March	Medium–High
4	Day shifts by one	The saved date is one day earlier or later than chosen, often only for users east or west of UTC, or around midnight	High
5	Wrong format for the locale	A UK user sees 03/04/2026 meaning March 4th; dates are typed one way and parsed another	High
6	Wrong first day of week	The week starts on Sunday for European users, or weekday labels don’t line up with the dates	Medium
7	Month navigation skips	From January 31st, “next” jumps to March because “February 31st” doesn’t exist	Medium
8	Past or blocked dates selectable	Sold-out or past days look disabled but can still be tapped or typed	High
9	DST problems	A 02:30 alarm on the day clocks spring forward never rings, or a 01:30 reminder fires twice in autumn	Medium–High
10	12h / 24h mix-ups	“12:30 AM” stored as midday, or the device’s 24-hour setting is ignored	Medium
11	Leap year bugs	February 29th missing in 2028, or yearly renewals of Feb 29 crash in 2029	Medium
12	Cancel doesn’t cancel	In a modal picker, the date changes even after tapping Cancel	Medium

Stress-test it: locales and time zones

Most date bugs live in three places: formats, time zones and boundary dates. A little theory first, then the playground.

The same date, written four ways

The 4th of March 2026 in the short date format of four localesLocaleRegional settings that control language and formats for dates, numbers and currency.Open in glossary → (exact punctuation can vary slightly between browsers):

Locale	Short date	Long date	9:30 in the evening
en-US (United States)	3/4/26	Wednesday, March 4, 2026	9:30 PM
en-GB (United Kingdom)	04/03/2026	Wednesday, 4 March 2026	21:30
de-DE (Germany)	04.03.26	Mittwoch, 4. März 2026	21:30
sr-Latn (Serbia)	4. 3. 2026.	sreda, 4. mart 2026.	21:30

Notice that en-US and en-GB use the same digits in a different order. “03/04” is March 4th in one and April 3rd in the other. A date that is typed in one format and parsed in another is a classic, high-severity localizationLocalizationAdapting an app to a language and region, including translations, dates, currency and layout.Open in glossary → bug, because it doesn’t crash: it books the wrong day.

First day of the week

The US calendar starts on Sunday. Most of Europe, including the UK, Germany and Serbia, starts on Monday (the ISO 8601 standard). Some countries in the Middle East start on Saturday. A calendar that ignores this isn’t broken, but it feels wrong to users and causes mis-taps. A calendar where the labels and the dates don’t line up is broken.

12-hour vs 24-hour clock

The locale picks a default, but users can override it (iOS: Settings › General › Date & Time › 24-Hour Time, Android: Use 24-hour format). Test both. Watch out for 12:00 AM (midnight) and 12:00 PM (noon): they are easy to get backwards.

Time zones and daylight saving time

A time is only meaningful together with a time zone. “23:30 in Belgrade” is already the next day in Tokyo and still the same afternoon in New York. On top of that, many zones use daylight saving time (DST):

• In spring the clocks jump forward (in the EU on the last Sunday of March, in the US on the second Sunday of March). One hour, such as 02:00–02:59, doesn’t exist that night.
• In autumn they go back (EU: last Sunday of October, US: first Sunday of November). One hour happens twice.
• Some zones have no DST (Tokyo, Kolkata), some are offset by half an hour (Kolkata is UTC+5:30), and in the southern hemisphere (Auckland) the seasons, and so the changes, are reversed.

Now play. Switch between en-US and en-GB and watch the short date. Set 23:30 and move the device time zone around the world. Jump to a DST day and pick the hour that doesn’t exist.

Find the bug

Time to practice. This hotel booking screen has six bugs. The simulated “today” is Monday, 12 October 2026, so the results are always the same. Explore it like a tester:

• Pick dates in different orders, and count the nights yourself.
• Type dates into the fields, including impossible ones.
• Move between months, starting from different check-in dates.
• Change the Region and Time zone in the device settings, and compare the calendar with the summary.

🐞 Bug hunt: Hotel booking

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Hotel Adria

Split · 4.6 · €120/night

Check-inCheck-out

October 2026

MTWTFSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Pick your check-in date.

Reserve

Device settings

Restart app

RegionUnited StatesUnited KingdomSrbijaTime zoneBelgradeLondonNew YorkTokyo

Simulated today: Monday, 12 October 2026

Network log

• Tap Reserve to see the request…

1. 1

   Hint: Tap a later date first, then an earlier one.

   Check-out can be before check-in

   Tap 20 Oct, then 15 Oct: the app saves check-out before check-in and shows a negative night count and price. Expected: tapping a date before check-in starts a new selection (or makes it the new check-in), and an impossible range can never be booked.

   Reveal answer✓ I found this
2. 2

   Hint: Book a single night and read the summary.

   Night count is one too high

   Check-in 20 Oct, check-out 21 Oct is one night, but the app says 2 nights and charges €240. It counts calendar days (diff + 1) instead of nights (diff). This is a classic off-by-one bug with real money attached.

   Reveal answer✓ I found this
3. 3

   Hint: Type 31/04/2027 or 29/02/2027 into Check-in.

   Impossible typed dates silently roll over

   April has 30 days and 2027 is not a leap year, but the field accepts both and quietly turns them into 01/05/2027 and 01/03/2027. Validation only checks day ≤ 31. Expected: an error message such as "April has only 30 days".

   Reveal answer✓ I found this
4. 4

   Hint: Pick 31 October as check-in, then press the next-month arrow.

   Next month skips a month from the 31st

   The calendar jumps from October straight to December. The code adds one to the month of the check-in date and keeps the day: "31 November" does not exist, so it becomes 1 December. Expected: navigation moves exactly one month, whatever date is selected.

   Reveal answer✓ I found this
5. 5

   Hint: Select a stay, then change the device time zone to New York (or London).

   Dates move one day back when the time zone changes

   Both dates jump one day earlier, and the booking request sends the wrong dates. The app stores each date as midnight in the device time zone and converts it back with the new zone. Expected: a calendar date stays the same date everywhere. Store it as a plain date (2026-10-20), not a timestamp.

   Reveal answer✓ I found this
6. 6

   Hint: Compare the weekday letters in the calendar with the weekday in the summary. Then try Region: United States.

   Weekday labels don’t match the dates

   For UK and Serbia the header correctly starts on Monday, but the days are still laid out Sunday-first, so every date sits under the wrong weekday (12 October, a Monday, appears under "T"). With the US region it looks fine, which is why this slips through when only one locale is tested.

   Reveal answer✓ I found this

How to test it

Checklist

Date & time picker test checklist

0 of 14 checked

Copy

• The picker opens on a sensible month (today, or the selected date), and today is marked
• Past, blocked and sold-out dates look disabled and cannot be picked by tap, keyboard or typing
• Typed dates are validated: 31 April, 29 February in a non-leap year and 13 as a month are rejected with a clear message
• The date format matches the locale, and the expected format is shown next to the field
• Ranges: the end can never be before the start; the night or day count is correct
• Month and year navigation moves exactly one step, also from the 29th, 30th and 31st
• The first day of the week matches the locale, and weekday labels line up with the dates
• Boundary dates work: month ends, Feb 29 (leap year), Dec 31 to Jan 1, ranges crossing a month or year
• Selected dates do not shift after changing the device time zone, or when used around midnight
• Times on DST change days behave sensibly (skipped and repeated hours)
• 12-hour and 24-hour device settings are respected; 12:00 AM and 12:00 PM are not swapped
• Cancel in a modal picker keeps the old value; OK saves the new one
• The value sent to the server matches what the user picked (check the network request)
• Screen readers announce the full date (weekday, day, month, year) and the selected state

Example test cases

Accessibility

Calendars are hard to use without sight or a mouse. Check these:

• Every day has a full name. A screen readerScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → should say “Tuesday, 20 October 2026”, not just “20”. Today and the selected state must be announced too (“today”, “selected”).
• Keyboard (web): a calendar grid should support the arrow keys (day and week), Home/End (start and end of the week) and Page Up/Page Down (month). Try it in the gallery and playground above.
• Typing must always be possible. Some users can’t operate wheels or tiny day cells. WCAG 2.2 asks for a single-pointer alternative to dragging movements (2.5.7), and a text input is the easiest alternative of all. Don’t make a text field read-only just because there is a calendar button.
• Show the format in a visible label or hint (DD/MM/YYYY), not only as a placeholderPlaceholderHint text shown inside an empty input field that disappears when the user starts typing.Open in glossary → that disappears while typing.
• Errors in words: “April has only 30 days” beats a red border alone (don’t rely on color).
• Disabled days must look disabled for more than color (for example a strikethrough) and be announced as unavailable.
• Modal pickers must move focus into the dialog, keep it there (focus trapFocus trapKeeping keyboard focus inside an open modal so users can't tab into the hidden page behind it.Open in glossary →), and return it to the field when closed.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: day cells on small phones are often below 44×44 pt (iOS) / 48×48 dp (Android). Check them.
• Autofill: browsers and password managers should be able to fill birth date fields.
  Dev note

  Birth date fields should use autocomplete="bday" (or bday-day, bday-month, bday-year).

Mobile vs web

iOSAndroidWeb

• Three styles: compact (grey pills that open a popover), inline (full calendar) and wheels.
  Dev note

  UIDatePicker / SwiftUI DatePicker.
• Modes: date, time, or date and time. Follows the device’s region, calendar and 24-hour setting automatically.
• Wheels don’t stop you from scrolling to February 30th; they snap back. Check the app reacts to the final value, not the one in between.
• Test with Settings › General › Language & Region (region, first day of week, calendar) and Date & Time (24-hour, time zone off “Set Automatically”).

• Material 3: docked, modal and modal input date pickers, a date range picker (usually full screen), and a time picker with dial and keyboard input modes.
• Modal pickers have Cancel/OK. Test that Cancel really cancels and that rotating the device keeps the draft selection.
• Respects Use 24-hour format and the system language, but custom pickers in apps often forget to.
• On an emulatorEmulatorSoftware that imitates a real device's hardware and OS on your computer, like the Android Emulator.Open in glossary → you can change the time zone and date in Settings to jump straight to DST days or a leap day.

• Native date and time fields use the browser’s own picker. The display follows the browser language, but the value is always YYYY-MM-DD / HH:mm.
  Dev note

  <input type="date"> and <input type="time">.
• Native date-and-time fields have no time zone. Check what the backend assumes.
  Dev note

  <input type="datetime-local">.
• Custom calendar libraries are everywhere: check keyboard support, ARIA roles and focus handling in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary →.
• Check the request in the Network tab: is the date sent as 2026-10-20 or as a timestamp like 2026-10-19T22:00:00Z? The second one is a time zone bug waiting to happen.
• In Chrome DevTools, Sensors › Location lets you override the time zone and locale to test other regions without traveling.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.Which input is the best fit for a date of birth?

   AA calendar grid that opens on todayBThree labeled fields (day, month, year) or a typed field with a format hintCA wheel with every day since 1900DA dropdown with all dates

2. 2.A UK user types 03/04/2026. The app saves March 4th. What kind of bug is this?

   AA time zone bugBA locale / date format bugCA leap year bugDNot a bug

3. 3.Check-in 20 Oct, check-out 21 Oct. How many nights should a hotel app show?

   A0B1C2DIt depends on the time zone

4. 4.You pick 20 Oct in Belgrade, switch the device time zone to New York, and the app now shows 19 Oct. What is the most likely cause?

   AThe calendar has the wrong first day of the weekBThe date was stored as a timestamp (local midnight) instead of a plain calendar dateCThe server is downDDST started

5. 5.Which pair of dates is the strongest boundary test for typed date validation?

   A15 Mar and 16 MarB29 Feb 2027 and 29 Feb 2028C1 Jan and 2 JanD10 Oct and 20 Oct

Key takeaways

• Date pickers come as calendars, wheels, dials, typed fields and range pickers. Each fits a different job, and a calendar for a birth date is overkill.
• The same digits mean different dates in different locales (03/04). Always show the format and test at least en-US and one European locale.
• A calendar date is not a timestamp. Change the device time zone and use times near midnight to catch dates that shift by a day.
• Always test the boundaries: month ends, Feb 29 in leap and non-leap years, Dec 31 → Jan 1, DST change days, 12:00 AM/PM.
• For ranges, check order (end after start) and counts (nights = difference, not difference + 1).
• Test both typing and picking, and check the value that actually reaches the server.