How to Use React MUI Date and Time Pickers to Build a Custom Booking Form

Building a booking form is a common requirement in many web applications, from appointment schedulers to event registration systems. Material UI (MUI) offers powerful date and time picker components that can simplify this process significantly. In this article, I'll walk you through creating a comprehensive booking form using MUI's date and time pickers.

What You'll Learn

By the end of this tutorial, you'll be able to:

• Implement MUI date and time pickers in a React application
• Create a fully functional booking form with validation
• Customize the appearance and behavior of the pickers
• Handle form state and submission
• Implement advanced features like date range selection and time constraints
• Troubleshoot common issues that arise when working with date/time components

Understanding MUI Date and Time Pickers

Before diving into implementation, let's understand what MUI offers for date and time selection. MUI's date and time pickers are part of the MUI X package, which provides advanced components beyond the core MUI library. These components offer a rich set of features for selecting dates and times with a polished UI that follows Material Design principles.

The date and time pickers in MUI X come in several variants, including basic date pickers, time pickers, date-time pickers, and date range pickers. They support both mobile and desktop interfaces, various formatting options, and can be easily integrated with form libraries like Formik or React Hook Form.

Key Components Overview

MUI X provides several picker components that we'll use in our booking form:

1. DatePicker - For selecting a single date
2. TimePicker - For selecting a time
3. DateTimePicker - For selecting both date and time together
4. DateRangePicker - For selecting a range of dates
5. StaticDatePicker - For embedding a calendar directly in the UI

Each of these components is highly customizable and can be configured to meet specific requirements.

Setting Up Your Project

Let's start by setting up a React project with MUI and the necessary date picker components.

Installation

First, we need to create a React application and install the required dependencies:

I'm using dayjs as the date library here, but MUI X Date Pickers also supports other libraries like moment, luxon, or date-fns. Choose the one you're most comfortable with.

Configuring Date Providers

Before we can use the date picker components, we need to set up the date provider. This provider makes the date library available to all the picker components in your application.

Let's modify our App.js file to include the necessary providers:

In this setup, we've:

1. Wrapped our application with ThemeProvider to apply consistent styling
2. Added LocalizationProvider with the DayJS adapter
3. Included a placeholder for our BookingForm component that we'll create next

Deep Dive into MUI Date and Time Picker Components

Before building our booking form, let's explore the MUI Date and Time Picker components in detail to understand what they offer.

DatePicker Component

The DatePicker component allows users to select a date from a calendar interface. Here's a comprehensive look at its capabilities:

Essential Props

Controlled vs Uncontrolled Usage

The DatePicker can be used in either controlled or uncontrolled mode:

Controlled mode (recommended):

Uncontrolled mode:

Customization Options

The DatePicker can be customized in several ways:

1. Styling with the sx prop:

2. Theme customization:

3. Custom day rendering:

Accessibility Features

The DatePicker component comes with built-in accessibility features:

• Keyboard navigation (arrow keys to navigate dates)
• Screen reader support
• ARIA attributes
• Focus management

To enhance accessibility further, you can add:

TimePicker Component

The TimePicker component allows users to select a time. Here's a detailed look:

Essential Props

Usage Example

Customizing Time Constraints

You can limit available times using various props:

Or disable specific times:

DateTimePicker Component

The DateTimePicker combines both date and time selection in one component:

This component inherits props from both DatePicker and TimePicker, giving you comprehensive control over both date and time selection.

DateRangePicker Component

For selecting a range of dates, MUI X provides the DateRangePicker:

Note: The DateRangePicker is part of the Pro package of MUI X, which requires a license for commercial use.

Building the Booking Form Step by Step

Now that we understand the components, let's build our booking form. We'll create a form that allows users to book appointments with date, time, and additional details.

Step 1: Create the Basic Form Structure

First, let's create a new file called BookingForm.js with the basic structure:

This sets up our basic form structure with state management for the form fields and submission status. We've also included a simulated API call to demonstrate how you would handle form submission.

Step 2: Add Personal Information Fields

Let's add the personal information fields to our form:

These fields collect the user's basic information and the service they're interested in booking.

Step 3: Implement Date and Time Selection

Now, let's add the date and time pickers to our form:

Here, we've added:

1. A DatePicker that only allows future dates
2. A TimePicker with 15-minute intervals for easier scheduling

Step 4: Add Notes and Submit Button

Let's complete our form with a notes field and submit button:

Step 5: Add Validation and Business Rules

Let's enhance our form with validation and business rules to ensure we collect valid data:

Now, let's update our form fields to display validation errors:

Step 6: Implement Business Rules for Date Selection

Let's add more sophisticated business rules for date selection, such as disabling weekends or specific dates:

Now, update the DatePicker:

Step 7: Add Date and Time Availability Checking

In a real booking system, you'd want to check if a specific date and time slot is available. Let's simulate this:

Now, let's modify our form to show available time slots based on the selected date:

Step 8: Add a Date Range Option for Multi-Day Bookings

For services that might span multiple days, let's add a date range option:

Note: Make sure to import the necessary components:

Step 9: Add Visual Feedback and Summary

Let's enhance our form with visual feedback and a booking summary:

Advanced Capabilities and Customizations

Now that we have a functional booking form, let's explore some advanced capabilities and customizations for MUI date and time pickers.

Custom Date Formats

You can customize the date format displayed in the input field:

Custom Styling with Theme Overrides

You can customize the appearance of the date picker using theme overrides:

Inline Calendar Display

For a more user-friendly experience, you can display the calendar inline:

Custom Day Rendering

You can customize how days are rendered in the calendar:

Integration with Form Libraries

MUI date pickers can be easily integrated with form libraries like Formik or React Hook Form. Here's an example with Formik:

Best Practices and Common Issues

When working with MUI date and time pickers in a booking form, here are some best practices and common issues to be aware of:

Best Practices

1. Always provide clear labels and helper text

Ensure your date and time pickers have clear labels and, when necessary, helper text to guide users:

2. Handle timezones appropriately

When working with dates and times, always consider timezone issues:

3. Provide reasonable defaults

Always set reasonable default values for your date and time pickers:

4. Optimize for mobile

Ensure your date and time pickers work well on mobile devices:

Common Issues and Fixes

1. Date formatting inconsistencies

Problem: Different locales display dates differently, causing confusion.

Solution: Explicitly set the format and use the LocalizationProvider with the appropriate locale:

2. Time picker showing 24-hour format when 12-hour is expected

Problem: Time format doesn't match user expectations.

Solution: Explicitly set the time format:

3. Date validation errors

Problem: Users can still select invalid dates despite validation.

Solution: Combine built-in validation with custom validation:

4. Performance issues with many disabled dates

Problem: Calculating many disabled dates can cause performance issues.

Solution: Optimize your validation functions:

5. Form submission with incorrect date/time format

Problem: Dates are submitted in an unexpected format.

Solution: Format dates consistently before submission:

Wrapping Up

In this comprehensive guide, we've explored how to build a fully functional booking form using MUI's date and time picker components. We've covered everything from basic setup to advanced customizations, validation, and integration with form libraries.

The MUI date and time pickers offer powerful functionality out of the box while remaining highly customizable. By following the patterns and practices outlined in this article, you can create user-friendly booking experiences that handle complex business rules and validation requirements.

Remember to always consider the user experience when implementing date and time selection interfaces. Clear labels, helpful guidance, and intuitive defaults go a long way toward creating a smooth booking process. Additionally, proper validation and error handling ensure that users can't submit invalid bookings, saving time and frustration for both users and administrators.