[DateRangePicker] ToolbarComponent prop documented but not implemented

[FinnLawrence]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

DateRangePicker does not render a custom ToolbarComponent when it's supplied via props.

Expected Behavior 🤔

Expect DateRangePicker to support this as DatePicker does.

Steps to Reproduce 🕹

Code Sandbox Demo
https://codesandbox.io/s/blissful-cdn-zus0r?file=/src/Demo.tsx

Steps:

1. Supply a custom ToolbarComponent to a DateRangePicker.
2. Observe that this is not rendered, and the component shows the default toolbar.

Context 🔦

Attempting to customise the appearance of the toolbar for a DateRangePicker on a mobile device.

Your Environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 11.5.2
    CPU: (4) x64 Intel(R) Core(TM) m5-6Y54 CPU @ 1.10GHz
    Memory: 20.18 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
    Watchman: 2021.08.02.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.7.5 - /Users/finn/.rvm/rubies/ruby-2.4.1/bin/pod
    Homebrew: 3.2.6 - /usr/local/bin/brew
    Maven: 3.3.9 - /usr/local/bin/mvn
    pip3: 21.1.3 - /usr/local/bin/pip3
    RubyGems: 3.1.4 - /Users/finn/.rvm/rubies/ruby-2.4.1/bin/gem
  Utilities:
    CMake: 3.15.5 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.30.1 - /usr/bin/git
    Clang: 12.0.5 - /usr/bin/clang
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.2 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 25
      Build Tools: 25.0.3
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Atom: 1.54.0
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 1.8.0_131 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.24 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.6 - /usr/local/bin/python3
    Ruby: 2.4.1 - /Users/finn/.rvm/rubies/ruby-2.4.1/bin/ruby
  Databases:
    PostgreSQL: 13.2 - /usr/local/bin/postgres
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 93.0.4577.63
    Safari: 14.1.2

[Renaud009]

I really need this feature to work too for customizing the DateRangePickera bit too.

I there another way at the moment to add a custom component to the DateRangePicker? My custom component would essentially be a list with pre-selected range values (last week, last month, last 3 months, last year) like we use to see with other date range widgets.

[mackmcquen]

I am also experiencing this issue. Here is a sandbox with the latest Beta @material-ui core and Alpha @mui packages (as of 12/27/2021): https://codesandbox.io/s/material-ui-daterangepicker-toolbarcomponent-bug-sandbox-z573p?file=/src/App.js

Material UI Packages:

• @material-ui/core (5.0.0-beta.5)
• @mui/lab (5.0.0-alpha.62)
• @mui/material (5.2.6)

https://mui.zendesk.com/agent/tickets/1927

[flaviendelangle]

Thanks for the detailed example !

Here is an updated reproduction case with the new packages: https://codesandbox.io/s/date-and-time-pickers-forked-jzxwtt

In #4466, I will add the toolbar to the props.components, remove props.showToolbar and make sure that every component correctly has it.