AppReactDatepicker

This guide covers how to use react-datepicker, a flexible and customizable date-picker library, in conjunction with Material-UI's styling in a Next.js application. For more information on React-Datepicker, see the official documentation.

Overview

React-Datepicker is a versatile and highly configurable date-picker library for React. It provides a range of options and styles to create a date-picker that suits various UI requirements. To align it with Material-UI themes, we have wrapped it in a custom component.

Styling React-Datepicker

We have styled React-Datepicker using Material-UI's capabilities. The AppReactDatepicker component is a styled Material-UI Box that contains the React-Datepicker, applying specific styles to integrate it seamlessly into Material-UI themed interfaces.

Styled Component: AppReactDatepicker

AppReactDatepicker wraps the React-Datepicker component, providing a consistent look with the Material-UI theme. This styling covers various elements of the date-picker, including the header, navigation, and days grid.

Example: Defining AppReactDatepicker

// React Imports
import type { ComponentProps } from 'react'

// MUI Imports
import Box from '@mui/material/Box'
import { styled } from '@mui/material/styles'

// Third-Party Imports
import ReactDatePickerComponent from 'react-datepicker'

// Styles
import 'react-datepicker/dist/react-datepicker.css'

type Props = ComponentProps<typeof ReactDatePickerComponent> & {
  boxProps?: BoxProps
}

// Styled Components
const StyledReactDatePicker = styled(Box)<BoxProps>(({ theme }) => ({
  // Custom styles for React-Datepicker...
})) as typeof Box

// Component to render the date-picker
const AppReactDatepicker = (props: Props) => {
  const { boxProps, ...rest } = props

  return (
    <StyledReactDatePicker {...boxProps}>
      <ReactDatePickerComponent {...rest} />
    </StyledReactDatePicker>
  )
}

export default AppReactDatepicker

This code sets up AppReactDatepicker to provide a Material-UI themed appearance to React-Datepicker.

Implementing the Styled React-Datepicker

Using AppReactDatepicker, integrating a styled date-picker into your application is straightforward.

Example: Basic Date Picker Implementation

// React Imports
import { useState } from 'react'

// MUI Imports
import TextField from '@mui/material/TextField'

// Third-Party Imports
import AppReactDatepicker from '@/libs/styles/AppReactDatepicker'

const PickersBasic = () => {
  const [date, setDate] = useState<Date | null>(new Date())

  return (
    <AppReactDatepicker
      selected={date}
      onChange={(date: Date | null) => setDate(date)}
      placeholderText='Click to select a date'
      customInput={<TextField label='Basic' />}
    />
  )
}

export default PickersBasic

In this example, PickersBasic is a functional component that uses AppReactDatepicker to render a date-picker. It showcases how to use custom inputs and handle date changes.