Codemo Playground
  • Getting Started
  • General UI
    • Button
    • Input
    • Radio Buttons
    • Checkboxes
    • Select Dropdown
    • Date
  • Dynamic UI
  • Browser Interactions
  • Storage & State
  • API
  • Beehive
Back to Home
General UI

Date

Practice entering and validating date values in various formats.
Single Date Selection
Click on a date in the calendar picker and confirm it is selected.

Selected: (none)

Default Date
Verify a default date is pre-selected when the page loads without interaction.

Default value: Oct 15, 2026

Disabled State
Attempt to open and interact with a disabled calendar and confirm it cannot be changed.

Selected: (none)

Date Range Selection
Select a start date and then an end date to create a date range.

Range: (none)

Unavailable Dates
Attempt to select dates marked as unavailable and confirm they cannot be selected.

Weekdays unavailable (weekends only)

Selected: (none)

Date Validation
Attempt to select dates outside allowed range (e.g., future dates only, or dates before today).

Only future dates allowed (min: today)

Selected: (none)