Date Picker

Work with date input fields

What you will learn

Interact via explicit dates (YYYY-MM-DD) — not by clicking grid cells, which breaks under i18n
Test timezone boundaries: a date selected in UTC-5 is a different day in UTC+8
Cover min, max, disabled dates, and holidays — edge cases live here, not at the centre

Date Input

Standard date picker

Select a date:

Selected: None

DateTime Input

Combined date and time picker

Select date and time:

Selected: None

Time Input

Time-only picker

Select a time:

Selected: None

Month Input

Month and year picker

Select a month:

Selected: None

Week Input

Week number picker

Select a week:

Selected: None

Date with Constraints

Date picker with min/max validation

Select a date (min: today, max: +30 days):

Range: 2026-10-10 to 2026-11-09

Testing Tips

Automation hints

✓ Use #date-input, #datetime-input, #time-input, #month-input, #week-input for each type
✓ Set date values in YYYY-MM-DD format, datetime in YYYY-MM-DDTHH:mm format
✓ Verify value displays in #date-value, #datetime-value, #time-value spans
✓ Test #date-constrained rejects dates outside min/max range
✓ Check week input format: YYYY-Www (e.g., 2024-W01)

Related Challenges

Date Picker

Work with date input fields

What you will learn

Interact via explicit dates (YYYY-MM-DD) — not by clicking grid cells, which breaks under i18n
Test timezone boundaries: a date selected in UTC-5 is a different day in UTC+8
Cover min, max, disabled dates, and holidays — edge cases live here, not at the centre

Date Input

Standard date picker

Select a date:

Selected: None

DateTime Input

Combined date and time picker

Select date and time:

Selected: None

Time Input

Time-only picker

Select a time:

Selected: None

Month Input

Month and year picker

Select a month:

Selected: None

Week Input

Week number picker

Select a week:

Selected: None

Date with Constraints

Date picker with min/max validation

Select a date (min: today, max: +30 days):

Range: 2026-10-10 to 2026-11-09

Testing Tips

Automation hints

✓ Use #date-input, #datetime-input, #time-input, #month-input, #week-input for each type
✓ Set date values in YYYY-MM-DD format, datetime in YYYY-MM-DDTHH:mm format
✓ Verify value displays in #date-value, #datetime-value, #time-value spans
✓ Test #date-constrained rejects dates outside min/max range
✓ Check week input format: YYYY-Www (e.g., 2024-W01)

Related Challenges

File Upload

Medium

File Download

Medium

Multi-Select

Medium

Date Picker

What you will learn

Date Input

DateTime Input

Time Input

Month Input

Week Input

Date with Constraints

Testing Tips

Timer

Need Help?

Related Challenges

File Upload

File Download

Multi-Select

Date Picker

What you will learn

Date Input

DateTime Input

Time Input

Month Input

Week Input

Date with Constraints

Testing Tips

Timer

Need Help?

Related Challenges

File Upload

File Download

Multi-Select