Tutorial: Time Picker
Form Preview

What You'll Build

Forms with time picker fields for selecting times. Time pickers provide an intuitive interface for time selection with support for constraints, step intervals, and combination with date pickers for complete scheduling solutions.

What You'll Learn

  • Adding basic time picker fields
  • Making times required with validation
  • Setting time constraints (business hours, etc.)
  • Using computed values for automatic time selection
  • Combining date and time pickers
  • Building a complete meeting scheduler
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our time-based form step by step.

Step 2: Basic Time Picker

Let's add a simple time picker for selecting a meeting time. The browser provides a native time input interface.

💡 Tip:
Use addTimepicker() to add a time field. The value is stored in 24-hour format as "HH:mm" (e.g., "14:30" for 2:30 PM).

Step 3: Required Time Field

Make a time field required to ensure users select a time before submitting the form.

💡 Tip:
Add isRequired: true to make the time mandatory. The form won't submit until a valid time is selected.

Step 4: Time Constraints

Limit selectable times using minTime and maxTime. This is perfect for business hours or delivery windows.

💡 Tip:
Use minTime and maxTime in "HH:mm" format. For example, minTime: '09:00' and maxTime: '17:00' restricts selection to 9 AM - 5 PM.

Step 5: Computed Time Values

Use computedValue to automatically set time based on other form fields. This is useful for shift schedules, preset times, or calculated values.

💡 Tip:
The computedValue function runs reactively - when referenced fields change, the time updates automatically. Combine with isReadOnly: true for display-only computed times.

Step 6: Date and Time Together

Combine date and time pickers in a single row for complete datetime selection. This is the most common pattern for scheduling.

💡 Tip:
Use column widths to place date and time pickers side by side. Access values with form.datepicker('id')?.value() and form.timepicker('id')?.value().

Step 7: Complete Meeting Scheduler

Let's build a complete meeting scheduler with start/end times and automatic duration calculation.

💡 Tip:
Calculate duration by parsing time strings into minutes. The formula: (endHours * 60 + endMinutes) - (startHours * 60 + startMinutes) gives the duration in minutes.

Try It Yourself

  • Challenge 1: Add validation that end time must be after start time (show an error message)
  • Challenge 2: Create a lunch break scheduler with two time slots (before and after lunch)
  • Challenge 3: Add a timezone dropdown and display the time in multiple timezones

Next Steps

Excellent! You've mastered time pickers and learned how to build scheduling forms. Ready to explore more advanced features?

Continue to Computed Values Tutorial

Other learning paths: