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:

# Create a new React project
npx create-react-app mui-booking-form

# Navigate to the project directory
cd mui-booking-form

# Install MUI core
npm install @mui/material @emotion/react @emotion/styled

# Install MUI X Date Pickers and date library
npm install @mui/x-date-pickers dayjs

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:

import React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import BookingForm from './BookingForm';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// Create a theme instance
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <div className="App">
          <header className="App-header">
            <h1>Booking System</h1>
          </header>
          <main>
            <BookingForm />
          </main>
        </div>
      </LocalizationProvider>
    </ThemeProvider>
  );
}

export default App;

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):

import { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';

function ControlledDatePicker() {
  const [value, setValue] = useState(dayjs());
  
  return (
    <DatePicker
      label="Controlled date"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}

Uncontrolled mode:

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

function UncontrolledDatePicker() {
  return (
    <DatePicker
      label="Uncontrolled date"
      defaultValue={dayjs()}
    />
  );
}

Customization Options

The DatePicker can be customized in several ways:

1. Styling with the sx prop:

<DatePicker
  label="Custom styled date picker"
  sx={{
    '& .MuiInputBase-root': {
      borderRadius: 2,
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'primary.main',
    },
  }}
/>

2. Theme customization:

const theme = createTheme({
  components: {
    MuiDatePicker: {
      styleOverrides: {
        root: {
          backgroundColor: '#f5f5f5',
        },
      },
    },
  },
});

3. Custom day rendering:

<DatePicker
  label="Custom day rendering"
  slots={{
    day: (props) => {
      const isSelected = 
        !props.outsideCurrentMonth && 
        props.day.toString() === props.selectedDay?.toString();
      
      return (
        <div
          {...props}
          style={{
            ...props.style,
            backgroundColor: isSelected ? 'lightblue' : 'transparent',
            borderRadius: '50%',
          }}
        >
          {props.day.getDate()}
        </div>
      );
    },
  }}
/>

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:

<DatePicker
  label="Appointment Date"
  aria-label="Choose your appointment date"
  slotProps={{
    textField: {
      helperText: 'MM/DD/YYYY format',
      InputProps: {
        'aria-describedby': 'date-picker-helper-text',
      },
    },
  }}
/>

TimePicker Component

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

Essential Props

Usage Example

import { useState } from 'react';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import dayjs from 'dayjs';

function TimePickerExample() {
  const [value, setValue] = useState(dayjs().hour(9).minute(0));
  
  return (
    <TimePicker
      label="Appointment Time"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      ampm={true}
      minutesStep={15}
    />
  );
}

Customizing Time Constraints

You can limit available times using various props:

// Only allow business hours (9 AM - 5 PM)
<TimePicker
  label="Business Hours Only"
  value={value}
  onChange={handleChange}
  minTime={dayjs().hour(9).minute(0)}
  maxTime={dayjs().hour(17).minute(0)}
/>

Or disable specific times:

// Disable lunch hour (12-1 PM)
<TimePicker
  label="Excluding Lunch Hour"
  value={value}
  onChange={handleChange}
  shouldDisableTime={(timeValue, view) => {
    if (view === 'hours' && timeValue.hour() === 12) {
      return true;
    }
    return false;
  }}
/>

DateTimePicker Component

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

import { useState } from 'react';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import dayjs from 'dayjs';

function DateTimePickerExample() {
  const [value, setValue] = useState(dayjs());
  
  return (
    <DateTimePicker
      label="Appointment Date & Time"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      disablePast
      minutesStep={15}
    />
  );
}

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:

import { useState } from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import dayjs from 'dayjs';

function DateRangePickerExample() {
  const [value, setValue] = useState([dayjs(), dayjs().add(7, 'day')]);
  
  return (
    <DateRangePicker
      label="Date Range"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      disablePast
    />
  );
}

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:

import React, { useState } from 'react';
import {
  Box,
  Paper,
  Typography,
  TextField,
  Button,
  Grid,
  MenuItem,
  Snackbar,
  Alert,
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import dayjs from 'dayjs';

const BookingForm = () => {
  // Form state
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    service: '',
    date: dayjs(),
    time: dayjs().hour(9).minute(0),
    notes: '',
  });
  
  // Form submission state
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);
  const [submitError, setSubmitError] = useState(false);
  
  // Handle input changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };
  
  // Handle date change
  const handleDateChange = (newDate) => {
    setFormData({
      ...formData,
      date: newDate,
    });
  };
  
  // Handle time change
  const handleTimeChange = (newTime) => {
    setFormData({
      ...formData,
      time: newTime,
    });
  };
  
  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate API call
    setTimeout(() => {
      console.log('Form submitted:', formData);
      setIsSubmitting(false);
      setSubmitSuccess(true);
      // Reset form after successful submission
      setFormData({
        name: '',
        email: '',
        phone: '',
        service: '',
        date: dayjs(),
        time: dayjs().hour(9).minute(0),
        notes: '',
      });
    }, 1500);
  };
  
  // Available services
  const services = [
    'Consultation',
    'Haircut',
    'Massage',
    'Dental Checkup',
    'Fitness Training',
  ];
  
  return (
    <Box sx={{ maxWidth: 800, mx: 'auto', p: 2 }}>
      <Paper elevation={3} sx={{ p: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Book Your Appointment
        </Typography>
        <Typography variant="body1" sx={{ mb: 4 }}>
          Fill out the form below to schedule your appointment.
        </Typography>
        
        <form onSubmit={handleSubmit}>
          <Grid container spacing={3}>
            {/* Form fields will go here */}
          </Grid>
        </form>
      </Paper>
      
      {/* Success/Error messages */}
      <Snackbar 
        open={submitSuccess} 
        autoHideDuration={6000} 
        onClose={() => setSubmitSuccess(false)}
      >
        <Alert severity="success">Appointment booked successfully!</Alert>
      </Snackbar>
      
      <Snackbar 
        open={submitError} 
        autoHideDuration={6000} 
        onClose={() => setSubmitError(false)}
      >
        <Alert severity="error">There was an error booking your appointment. Please try again.</Alert>
      </Snackbar>
    </Box>
  );
};

export default BookingForm;

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:

{/* Personal Information */}
<Grid item xs={12}>
  <Typography variant="h6" sx={{ mb: 2 }}>
    Personal Information
  </Typography>
</Grid>

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    required
    id="name"
    name="name"
    label="Full Name"
    value={formData.name}
    onChange={handleChange}
    variant="outlined"
  />
</Grid>

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    required
    id="email"
    name="email"
    label="Email Address"
    type="email"
    value={formData.email}
    onChange={handleChange}
    variant="outlined"
  />
</Grid>

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    id="phone"
    name="phone"
    label="Phone Number"
    value={formData.phone}
    onChange={handleChange}
    variant="outlined"
  />
</Grid>

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    required
    id="service"
    name="service"
    select
    label="Service"
    value={formData.service}
    onChange={handleChange}
    variant="outlined"
  >
    {services.map((service) => (
      <MenuItem key={service} value={service}>
        {service}
      </MenuItem>
    ))}
  </TextField>
</Grid>

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:

{/* Date and Time Selection */}
<Grid item xs={12}>
  <Typography variant="h6" sx={{ mt: 2, mb: 2 }}>
    Date and Time
  </Typography>
</Grid>

<Grid item xs={12} sm={6}>
  <DatePicker
    label="Appointment Date"
    value={formData.date}
    onChange={handleDateChange}
    disablePast
    sx={{ width: '100%' }}
    slotProps={{
      textField: {
        required: true,
        fullWidth: true,
      },
    }}
  />
</Grid>

<Grid item xs={12} sm={6}>
  <TimePicker
    label="Appointment Time"
    value={formData.time}
    onChange={handleTimeChange}
    minutesStep={15}
    sx={{ width: '100%' }}
    slotProps={{
      textField: {
        required: true,
        fullWidth: true,
      },
    }}
  />
</Grid>

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:

{/* Additional Notes */}
<Grid item xs={12}>
  <TextField
    fullWidth
    id="notes"
    name="notes"
    label="Additional Notes"
    multiline
    rows={4}
    value={formData.notes}
    onChange={handleChange}
    variant="outlined"
  />
</Grid>

{/* Submit Button */}
<Grid item xs={12}>
  <Button
    type="submit"
    variant="contained"
    size="large"
    disabled={isSubmitting}
    sx={{ mt: 2 }}
  >
    {isSubmitting ? 'Booking...' : 'Book Appointment'}
  </Button>
</Grid>

Step 5: Add Validation and Business Rules

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

import React, { useState, useEffect } from 'react';
// ... other imports

const BookingForm = () => {
  // ... existing state
  
  // Add validation state
  const [errors, setErrors] = useState({});
  
  // Business hours
  const businessHours = {
    start: 9, // 9 AM
    end: 17,  // 5 PM
  };
  
  // Validate time is within business hours
  const validateTime = (time) => {
    const hour = time.hour();
    return hour >= businessHours.start && hour < businessHours.end;
  };
  
  // Validate form on change
  useEffect(() => {
    const newErrors = {};
    
    // Email validation
    if (formData.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(formData.email)) {
      newErrors.email = 'Invalid email address';
    }
    
    // Phone validation (optional field)
    if (formData.phone && !/^[0-9]{10}$/.test(formData.phone.replace(/[^0-9]/g, ''))) {
      newErrors.phone = 'Phone should be 10 digits';
    }
    
    // Time validation
    if (formData.time && !validateTime(formData.time)) {
      newErrors.time = `Appointments are only available between ${businessHours.start}AM and ${businessHours.end}PM`;
    }
    
    setErrors(newErrors);
  }, [formData]);
  
  // Check if form is valid
  const isFormValid = () => {
    // Required fields
    if (!formData.name || !formData.email || !formData.service || !formData.date || !formData.time) {
      return false;
    }
    
    // No validation errors
    return Object.keys(errors).length === 0;
  };
  
  // Updated handleSubmit
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!isFormValid()) {
      setSubmitError(true);
      return;
    }
    
    setIsSubmitting(true);
    
    // Simulate API call
    setTimeout(() => {
      console.log('Form submitted:', formData);
      setIsSubmitting(false);
      setSubmitSuccess(true);
      // Reset form after successful submission
      setFormData({
        name: '',
        email: '',
        phone: '',
        service: '',
        date: dayjs(),
        time: dayjs().hour(9).minute(0),
        notes: '',
      });
    }, 1500);
  };
  
  // ... rest of the component
}

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

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    required
    id="email"
    name="email"
    label="Email Address"
    type="email"
    value={formData.email}
    onChange={handleChange}
    variant="outlined"
    error={!!errors.email}
    helperText={errors.email}
  />
</Grid>

<Grid item xs={12} sm={6}>
  <TextField
    fullWidth
    id="phone"
    name="phone"
    label="Phone Number"
    value={formData.phone}
    onChange={handleChange}
    variant="outlined"
    error={!!errors.phone}
    helperText={errors.phone}
  />
</Grid>

{/* ... */}

<Grid item xs={12} sm={6}>
  <TimePicker
    label="Appointment Time"
    value={formData.time}
    onChange={handleTimeChange}
    minutesStep={15}
    sx={{ width: '100%' }}
    slotProps={{
      textField: {
        required: true,
        fullWidth: true,
        error: !!errors.time,
        helperText: errors.time,
      },
    }}
    shouldDisableTime={(timeValue, view) => {
      if (view === 'hours' && (timeValue.hour() < businessHours.start || timeValue.hour() >= businessHours.end)) {
        return true;
      }
      return false;
    }}
  />
</Grid>

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:

// Disable weekends and holidays
const isWeekend = (date) => {
  const day = date.day();
  return day === 0 || day === 6; // 0 is Sunday, 6 is Saturday
};

// Example holidays (you would typically get these from a database or API)
const holidays = [
  dayjs('2023-12-25'), // Christmas
  dayjs('2023-12-31'), // New Year's Eve
  dayjs('2024-01-01'), // New Year's Day
];

const isHoliday = (date) => {
  return holidays.some(holiday => 
    holiday.format('YYYY-MM-DD') === date.format('YYYY-MM-DD')
  );
};

// Check if a date should be disabled
const shouldDisableDate = (date) => {
  return isWeekend(date) || isHoliday(date);
};

Now, update the DatePicker:

<DatePicker
  label="Appointment Date"
  value={formData.date}
  onChange={handleDateChange}
  disablePast
  shouldDisableDate={shouldDisableDate}
  sx={{ width: '100%' }}
  slotProps={{
    textField: {
      required: true,
      fullWidth: true,
    },
  }}
/>

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:

// Simulated booked slots (in a real app, this would come from your backend)
const bookedSlots = [
  { date: '2023-11-15', time: '10:00' },
  { date: '2023-11-15', time: '11:00' },
  { date: '2023-11-16', time: '14:00' },
  { date: '2023-11-17', time: '09:00' },
];

// Check if a time slot is available
const isTimeSlotAvailable = (date, time) => {
  const dateStr = date.format('YYYY-MM-DD');
  const timeStr = time.format('HH:mm');
  
  return !bookedSlots.some(
    slot => slot.date === dateStr && slot.time === timeStr
  );
};

// Add a function to show available slots
const getAvailableTimeSlots = (date) => {
  const slots = [];
  const dateStr = date.format('YYYY-MM-DD');
  
  // Generate all possible slots
  for (let hour = businessHours.start; hour < businessHours.end; hour++) {
    for (let minute = 0; minute < 60; minute += 15) {
      const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      
      // Check if slot is available
      const isAvailable = !bookedSlots.some(
        slot => slot.date === dateStr && slot.time === timeStr
      );
      
      if (isAvailable) {
        slots.push({
          hour,
          minute,
          label: dayjs().hour(hour).minute(minute).format('h:mm A')
        });
      }
    }
  }
  
  return slots;
};

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

// Add state for available time slots
const [availableTimeSlots, setAvailableTimeSlots] = useState([]);

// Update available time slots when date changes
useEffect(() => {
  if (formData.date) {
    setAvailableTimeSlots(getAvailableTimeSlots(formData.date));
  }
}, [formData.date]);

// In the render function, replace the TimePicker with:
<Grid item xs={12} sm={6}>
  <TextField
    select
    fullWidth
    required
    id="timeSlot"
    name="timeSlot"
    label="Available Time Slots"
    value={formData.time ? formData.time.format('HH:mm') : ''}
    onChange={(e) => {
      const [hour, minute] = e.target.value.split(':').map(Number);
      setFormData({
        ...formData,
        time: dayjs().hour(hour).minute(minute)
      });
    }}
    variant="outlined"
    error={!!errors.time}
    helperText={errors.time || 'Select an available time slot'}
  >
    {availableTimeSlots.length > 0 ? (
      availableTimeSlots.map((slot) => (
        <MenuItem 
          key={`${slot.hour}:${slot.minute}`} 
          value={`${slot.hour.toString().padStart(2, '0')}:${slot.minute.toString().padStart(2, '0')}`}
        >
          {slot.label}
        </MenuItem>
      ))
    ) : (
      <MenuItem disabled value="">
        No available slots for this date
      </MenuItem>
    )}
  </TextField>
</Grid>

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:

// Add to state
const [isMultiDay, setIsMultiDay] = useState(false);
const [dateRange, setDateRange] = useState([dayjs(), dayjs().add(1, 'day')]);

// Add UI for toggling multi-day booking
<Grid item xs={12}>
  <FormControlLabel
    control={
      <Switch
        checked={isMultiDay}
        onChange={(e) => setIsMultiDay(e.target.checked)}
        name="multiDay"
        color="primary"
      />
    }
    label="Multi-day booking"
  />
</Grid>

{/* Conditional rendering based on booking type */}
{isMultiDay ? (
  <Grid item xs={12}>
    <DateRangePicker
      startText="Check-in"
      endText="Check-out"
      value={dateRange}
      onChange={(newValue) => {
        setDateRange(newValue);
      }}
      disablePast
      shouldDisableDate={shouldDisableDate}
      sx={{ width: '100%' }}
    />
  </Grid>
) : (
  <Grid item xs={12} sm={6}>
    <DatePicker
      label="Appointment Date"
      value={formData.date}
      onChange={handleDateChange}
      disablePast
      shouldDisableDate={shouldDisableDate}
      sx={{ width: '100%' }}
      slotProps={{
        textField: {
          required: true,
          fullWidth: true,
        },
      }}
    />
  </Grid>
)}

Note: Make sure to import the necessary components:

import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { FormControlLabel, Switch } from '@mui/material';

Step 9: Add Visual Feedback and Summary

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

// Add state for showing summary
const [showSummary, setShowSummary] = useState(false);

// Add to the form, before the submit button
<Grid item xs={12}>
  <Paper 
    elevation={1} 
    sx={{ 
      p: 2, 
      mt: 2, 
      mb: 2, 
      bgcolor: 'primary.light', 
      color: 'primary.contrastText',
      display: showSummary ? 'block' : 'none'
    }}
  >
    <Typography variant="h6" gutterBottom>
      Booking Summary
    </Typography>
    <Typography variant="body1">
      <strong>Name:</strong> {formData.name}
    </Typography>
    <Typography variant="body1">
      <strong>Service:</strong> {formData.service}
    </Typography>
    <Typography variant="body1">
      <strong>Date:</strong> {formData.date.format('dddd, MMMM D, YYYY')}
    </Typography>
    <Typography variant="body1">
      <strong>Time:</strong> {formData.time.format('h:mm A')}
    </Typography>
  </Paper>
</Grid>

{/* Update the submit button section */}
<Grid item xs={12} container spacing={2} justifyContent="space-between">
  <Grid item>
    <Button
      variant="outlined"
      onClick={() => setShowSummary(!showSummary)}
    >
      {showSummary ? 'Hide Summary' : 'Preview Booking'}
    </Button>
  </Grid>
  <Grid item>
    <Button
      type="submit"
      variant="contained"
      size="large"
      disabled={isSubmitting || !isFormValid()}
      sx={{ mt: 2 }}
    >
      {isSubmitting ? 'Booking...' : 'Book Appointment'}
    </Button>
  </Grid>
</Grid>

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:

<DatePicker
  label="Custom Format Date"
  value={formData.date}
  onChange={handleDateChange}
  format="MMMM D, YYYY" // Shows as "November 15, 2023"
  sx={{ width: '100%' }}
  slotProps={{
    textField: {
      fullWidth: true,
    },
  }}
/>

Custom Styling with Theme Overrides

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

const theme = createTheme({
  components: {
    MuiPickersDay: {
      styleOverrides: {
        root: {
          fontSize: '0.9rem',
          '&.Mui-selected': {
            backgroundColor: '#2e7d32',
            '&:hover': {
              backgroundColor: '#1b5e20',
            },
          },
        },
        today: {
          border: '1px solid #2e7d32',
        },
      },
    },
    MuiClock: {
      styleOverrides: {
        pin: {
          backgroundColor: '#2e7d32',
        },
        clock: {
          backgroundColor: '#f1f8e9',
        },
      },
    },
  },
});

Inline Calendar Display

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

import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

// In your component
<Grid item xs={12}>
  <Paper elevation={1} sx={{ p: 2 }}>
    <Typography variant="h6" gutterBottom>
      Select Date
    </Typography>
    <StaticDatePicker
      displayStaticWrapperAs="desktop"
      value={formData.date}
      onChange={handleDateChange}
      disablePast
      shouldDisableDate={shouldDisableDate}
      renderInput={(params) => <TextField {...params} />}
    />
  </Paper>
</Grid>

Custom Day Rendering

You can customize how days are rendered in the calendar:

<DatePicker
  label="Appointment Date"
  value={formData.date}
  onChange={handleDateChange}
  disablePast
  shouldDisableDate={shouldDisableDate}
  slots={{
    day: (props) => {
      // Add price or availability information to specific dates
      const date = props.day;
      const dateStr = date.format('YYYY-MM-DD');
      
      // Example: Add pricing information to dates
      const prices = {
        '2023-11-20': '$50',
        '2023-11-21': '$45',
        '2023-11-22': '$60',
      };
      
      const price = prices[dateStr];
      
      return (
        <div
          {...props}
          style={{
            ...props.style,
            position: 'relative',
            height: '40px',
          }}
        >
          <span>{date.date()}</span>
          {price && (
            <span style={{
              position: 'absolute',
              bottom: 2,
              left: 0,
              right: 0,
              fontSize: '0.6rem',
              textAlign: 'center',
              color: 'green',
            }}>
              {price}
            </span>
          )}
        </div>
      );
    },
  }}
  sx={{ width: '100%' }}
  slotProps={{
    textField: {
      required: true,
      fullWidth: true,
    },
  }}
/>

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:

import { useFormik } from 'formik';
import * as Yup from 'yup';

// Validation schema
const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
  service: Yup.string().required('Service is required'),
  date: Yup.date().required('Date is required'),
  time: Yup.date().required('Time is required'),
});

// In your component
const formik = useFormik({
  initialValues: {
    name: '',
    email: '',
    phone: '',
    service: '',
    date: dayjs(),
    time: dayjs().hour(9).minute(0),
    notes: '',
  },
  validationSchema,
  onSubmit: (values) => {
    console.log('Form submitted:', values);
    // Handle form submission
  },
});

// In your JSX
<form onSubmit={formik.handleSubmit}>
  {/* ... other fields ... */}
  
  <Grid item xs={12} sm={6}>
    <DatePicker
      label="Appointment Date"
      value={formik.values.date}
      onChange={(newValue) => {
        formik.setFieldValue('date', newValue);
      }}
      disablePast
      shouldDisableDate={shouldDisableDate}
      sx={{ width: '100%' }}
      slotProps={{
        textField: {
          required: true,
          fullWidth: true,
          error: formik.touched.date && Boolean(formik.errors.date),
          helperText: formik.touched.date && formik.errors.date,
        },
      }}
    />
  </Grid>
  
  {/* ... other fields ... */}
</form>

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:

<DatePicker
  label="Appointment Date"
  slotProps={{
    textField: {
      helperText: "Select a weekday for your appointment",
    },
  }}
  // other props
/>

2. Handle timezones appropriately

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

// Store timezone information with the date
const handleSubmit = (e) => {
  e.preventDefault();
  
  // Get user's timezone
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  
  // Include timezone in submission data
  const submissionData = {
    ...formData,
    timezone,
    // Convert to ISO string for backend storage
    dateTimeISO: dayjs(formData.date)
      .hour(formData.time.hour())
      .minute(formData.time.minute())
      .toISOString(),
  };
  
  // Submit data
  console.log('Submitting with timezone info:', submissionData);
};

3. Provide reasonable defaults

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

// Set default to next business day at 9 AM
const getNextBusinessDay = () => {
  let date = dayjs().add(1, 'day');
  
  // Skip to Monday if it's Friday or weekend
  const day = date.day();
  if (day === 5) { // Friday
    date = date.add(3, 'day');
  } else if (day === 6) { // Saturday
    date = date.add(2, 'day');
  } else if (day === 0) { // Sunday
    date = date.add(1, 'day');
  }
  
  return date;
};

// Use in initial state
const [formData, setFormData] = useState({
  // other fields...
  date: getNextBusinessDay(),
  time: dayjs().hour(9).minute(0),
});

4. Optimize for mobile

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

<DatePicker
  label="Appointment Date"
  value={formData.date}
  onChange={handleDateChange}
  disablePast
  // Optimize for mobile
  desktopModeMediaQuery="@media (min-width: 768px)"
  // other props
/>

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:

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/fr'; // Import the locale you need

// In your App.js or component
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
  {/* Your components */}
</LocalizationProvider>

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:

<TimePicker
  label="Appointment Time"
  value={formData.time}
  onChange={handleTimeChange}
  ampm={true} // Use 12-hour format with AM/PM
  // other props
/>

3. Date validation errors

Problem: Users can still select invalid dates despite validation.

Solution: Combine built-in validation with custom validation:

// Combine multiple validation rules
const shouldDisableDate = (date) => {
  // Check if weekend
  if (isWeekend(date)) return true;
  
  // Check if holiday
  if (isHoliday(date)) return true;
  
  // Check if fully booked
  if (isFullyBooked(date)) return true;
  
  return false;
};

// Use in DatePicker
<DatePicker
  shouldDisableDate={shouldDisableDate}
  // other props
/>

4. Performance issues with many disabled dates

Problem: Calculating many disabled dates can cause performance issues.

Solution: Optimize your validation functions:

// Use memoization for expensive calculations
import { useMemo } from 'react';

// In your component
const bookedDates = useMemo(() => {
  // This calculation only runs when dependencies change
  return calculateBookedDates(availabilityData);
}, [availabilityData]);

// Use a more efficient check
const shouldDisableDate = useCallback((date) => {
  const dateStr = date.format('YYYY-MM-DD');
  return bookedDates.has(dateStr); // Using a Set for O(1) lookup
}, [bookedDates]);

5. Form submission with incorrect date/time format

Problem: Dates are submitted in an unexpected format.

Solution: Format dates consistently before submission:

const handleSubmit = (e) => {
  e.preventDefault();
  
  // Create a consistent date-time object
  const appointmentDateTime = dayjs(formData.date)
    .hour(formData.time.hour())
    .minute(formData.time.minute())
    .second(0);
  
  const formattedData = {
    ...formData,
    // Format for display
    formattedDateTime: appointmentDateTime.format('YYYY-MM-DD HH:mm'),
    // ISO string for API
    isoDateTime: appointmentDateTime.toISOString(),
  };
  
  console.log('Submitting:', formattedData);
  // Submit to API
};

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.