React Material UI Tutorial - 41 - Date Range Picker

📘 Courses - learn.codevolu...
💖 Support - www.paypal.me/...
💾 Github - github.com/gop...
⚡️ Checkout Retool! retool.com/
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
React Material UI Tutorial
Date Range Picker in Material UI

[@patrickdezenzio4988]

Very interesting. I need to take a closer look at Material UI because the Date Range Picker I have been using to demo comes from the MUI X package which is not free. I didn't even think of using 2 Date Pickers from the UI package, which is free. Thanks for this example!

[@ouardioussama8124]

The DateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro` now you must have the licen key to have it 🥲

[@kingchuks04]

Great tutorial!
Very clear screen with an even clearer sound. Loving the series!

[@avishetty8]

My ever Date related issue comes to an end today with a solution. Thanks a lot. Hope you would like to take a suggestion here... The @mui/lab is now moved to @mui/x-date-pickers(-pro) ... Could an update to this series, so newer participants can follow with ease? secondly.. Can you have a separate series on react to explain how to handles date and time with features like finding differences between time in particular without using MUI or other UI providers? please...

[@xandruhuergo6328]

I have the following error: export 'DateRange' (imported as 'DateRange') was not found in '@mui/lab' Anyone knows how to fix it?

[@keyjeyelpi]

It's because it's been moved to @mui/x, a subscription service.

[@namratadas5569]

Anyone getting similar error for newValue, startProps and endProps
Parameter 'endProps' implicitly has an 'any' type. ?

[@khuvarajan2843]

can i get example of selected dates array not range of dates and apply css on selected dates.

[@bijendernagar15]

Thank you so much sir you are the best Teacher

[@barisonury]

I have a question how to get date value from another script ?

[@manojnadar2284]

I'm getting this error
Parameter 'newValue' implicitly has an 'any' type, but a better type may be inferred from usage.
The same message is shown at startProps, endProps

[@DantesSagan]

{
setValue(newValue);
}}
renderInput={(
startProps: JSX.IntrinsicAttributes & TextFieldProps,
endProps: JSX.IntrinsicAttributes & TextFieldProps
) => {


to

;
}}
/>
But anyway DateRangePicker for now in ProPaln :(
The range-picker components: DateRangePicker, DateRangePickerDay, DesktopDateRangePicker, MobileDateRangePicker and StaticDateRangePicker were marked as "intended for MUI X Pro" in our documentation and are now part of MUI X Pro.

[@KrishanKumar-zr7pu]

@@DantesSagan still not working

[@amitbhattacharya356]

@@KrishanKumar-zr7pu Issue is with version i think.

[@vishalpawarrr]

Please cover few more concepts on React router dom v6.
Requested 🙏

[@veerabhadra9703]

Thank you Vish

[@sambeetsahu3045]

Now it showing it move to x date picker pro .. can u please tell me how to resolve

[@divyanshusrivastava6917]

i think dateRangePicker is moved to pro version of mui/x....please tell me the version of libraries you are using

[@imissmymom]

yeah it's in pro ersion

[@mrrishiraj88]

Good day greetings

[@PlayGameToday]

Share to codesandbox