Practical React - 10 - Date Picker

[@fuwanep]

Though it is important to learn controlled components, tutorials like these really help a lot and pretty much improves code quality in my opinion. There's no need to reinvent the wheel.

[@bluelion978]

Best teacher!!! I am a beginner and Once I hear your voice, I always know I am going to learn something new.

[@nilmendes7710]

When I was looking at the documentation at 4:47, Professor Vishwas showed, excellent tutorial, didactic. At 7:27 great tip.

[@nathansantos4197]

This tutorial has more information than the documentation itself. The official documentation is really poor. You helped me a lot. Thanks!

[@mdabdullahalmohaymenrafi7984]

Nice tutorial for beginners like me who will already have a basic info while reading the documentation.

[@babuchinnasamy3890]

Thanks, it is a very good video. this is better than another date picker. i will implement my project now

[@fmaciel2]

Thanks a lot! You saved me hours of researching.

[@fernandodiegosantillanvara1108]

Thanks bro, Your help to much. Its a master class!!!

[@alokranjan476]

Wow, you are lifesaver. Thanks a lot again.

[@ComedyReact-g00g1e]

Good job ... Audio was clear and legible to understand

[@migracionexitosa]

I love this explanation thank you very much!!

[@mr.hassaan7785]

Very deep explanation. Appreciated

[@evanbero9705]

Thank you so much for this video!!! So much simpler than the documentation!!!

[@kulsoomrahman7547]

your videos are life saving :D

[@gabrielturrillas]

thank you so much i love your videos. greetings from chile

[@ranaimranahmed2532]

bht achi videos hn apki thnx alot sir urdu hindi ma b bna dia karain plz

[@mdarefbillah4784]

Excellent video!

[@dmitrykabanov2869]

if you want to change a language of a caledar: import DatePicker, {registerLocale} from "react-datepicker"; registerLocale("ru", ru); // Russian example

[@amankori9697]

Great tutorial, really helpfull.

[@aleksandrmatyka3118]

good, but what if the user entered some letter into the input and then wants to use the datapicker, it will give undefined values, it would be nice to do something in this case

[@iLOVE800]

Thank you so much! So easy to understand and very clear. Keep going!

[@shivomsrivastava6540]

Helpful video. Thanks

[@vognercee]

@Codeevaluation thank you for the tutorial. I am experiencing a challenge with submission. A DatePicker is typically used in conjunction with another component. In my RetrieveDocs component, I am using the date picker to set a retrieveDate -- via . However, the after cruising through the SearchContainer code it exits directly to the the RetrieveDocs component. How do I pause the DatePicker until a date has been chosen?

[@karthikpuvvula]

Thank you 🙏

[@varshithgowdav9892]

is there a prop on date picker for each day so that i can pass this data to css file to set content property.

[@praj777]

Thank you for the video.I would like to know about how to add placeholder inside datepicker?

[@Amarjeetkumar-it8rj]

Sir please add date range picker also Thanks for this playlist

[@devbravo4158]

Amazing! Thank you!

[@jacksonpatrick3454]

How to select only date, in this am getting time value too

[@moupalidutta1589]

Not able to change the date format. Its taking my system date formay though changing it explicitly in the code.

[@alexanterkentros4770]

Does this supports localization :)?

[@avishekchatterjee531]

If I changed the date also it only showing me the current date not that I am selected? ANY help

[@albinsjolin649]

Thanks man!

[@deepankarthi2886]

If the datepicker popup is hidden while in left becz of overlapping how to fix it

[@Sam-kr5ix]

That's what i call a librairy

[@arlandmv4053]

thank you!

[@rauldeandrade]

I've implemented the date picker with formik, but it crashes the app when I try to reload data into it to edit or update the data in the form. Is there any workaround for this problem? I've spent hours on it and still don't have any solutions.

[@Codevolution]

I mention about that in the formik video. IT is probably due to the fact that you're trying to load a string value instead of converting it into a DATE type first.

[@rauldeandrade]

@@Codevolution Thank you so much for you kind reply. I did in-fact face this issue and I tried to fix it just now and it worked well. I guess I got confused last time when trying to convert the date from string to number that the datepicker could recognize, that I kept making mistakes. I tried the Date.parser() and couldn't make it work, but now after following your comment it worked without issues. I have only been programming js for a couple of months and your videos have been invaluable. I am forever grateful for your teachings and sharing of your knowledge in a simple and easy to understand manner. I am also loving the new React Render series. Thank you so much dear friend and I hope you and your family will always find happiness and prosperity.

[@divvagg5616]

@@Codevolution sir can we use moment.js library instead of DatePicker to do the same ? Plz reply

[@sivajyothi7287]

I am getting error, Type date is not assignable to null, I am using typescript, what can I do?

[@Bizniiz]

is there anyway i can set for example 3-4 times to be avaiable to book that day and push to api and then if the time is choosed make it non clickable for that day. great tutoriol btw!

[@sirlionellord]

did you find an solution?

[@Manideep_0240]

Is this datepicker working on all web applications such as IE and other stuff

[@twerkyfingers]

But what about the styling

[@duaaasamad]

clear button doesn't change date value. any solution?

[@JohnDoe-rj2kf]

how do I make two date pickers with start and end date of for example hotel book in? so that it wont be one day

[@Kumarmateti9]

Does this date picker support in Safari Browser?

[@Potato-h2w2s]

can u customize it? How we can style?

[@tahriguion2755]

Someday in the future. Someone had to explain me with the indian tutorial are the bests... cause that the only one that works

[@srinathpandi]

Hi, is there any was we can assign default value? Please help

[@alirezamohammadi1771]

tnk u so much

[@warriorking778]

how to render Date Picker { selectedDate } in this formate dd/MM/yy.

[@akki7949]

How to add calender icon to do the same??

[@srikanthracharla420]

If i want to add time in AM and PM mode, How to do this for this component, Can anyone help me pls

[@xardass4209]

dateFormat="MMMM d, yyyy h:mm aa" past this in datepicker instance, if you dont want in time colum but only in the input paste this also timeFormat="HH:mm".

[@wolfboy417]

thanks man

[@prajulsahu9838]

Hey, nice video, I used this DatePicker, but I have a issue, as it's transparent. I can see and even click the button which are placed just below it. How to do this? I tried z-index and opacity, they are not working.

[@diegovillafane6313]

In their documentation you have an import css line that you have to import wherever you use the datePicker otherwise that happens!

[@yinonelbaz5309]

very usefull thanks from israel

[@robertberenbaum]

I am using components, not functions. I am getting an error. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

[@saziedhassan3976]

As the error already said, hooks can only be used in functional components. I am assuming you tried using them in class components? If so, you can declare your state as an object in your constructor and set the state after binding your onChange handler. Hope this helps!

[@guptasagar694]

Bhai Hooks kon use karta he class components mein

[@elakiyabaskaran6485]

How to use this for time format

[@gamingwithnoboundaries5375]

can you help me on how to fill the date picker? like i have a date i need to fill it but its different format

[@entertainmenthub9115]

Hey man you are awesomeee! your videos help me alottt.. I have a resquest please add timepicker on this series.. It's a big favour thanks :)

[@nikhilkshirsagar186]

Thanks

[@amolmehlawat8197]

How can I add time also?

[@Amanda-qu9uw]

Positioning of the calendar is Waaaaayyyy to the far left for me. Plus, there is no information on how to fix this.

[@sologuitardeshchatterjee]

Nice tutorial but would be great if could enhance it with moment and show some operations with it.

[@HaiderAli-oi5fm]

So If I want to select two dates lets say "from date" and "to date" then should I use two DatePicker components? If Anyone knows, do reply me.

[@sirlionellord]

no you need the datepicker range

[@HaiderAli-oi5fm]

@@sirlionellord Oh Thank you. I've been waiting for reply.

[@sirlionellord]

@@HaiderAli-oi5fm try that ;)

[@princekumarsingh2440]

How to add placeholder init

[@RajveerSingh-yb6zq]

what to do for datetime bro

[@brijeshraval977]

Idk what's wrong with accent but nice and clean video though thanks

[@jsceo]

what's that color scheme?

[@apexyu164]

any tutorial of Start and End time in datepicker please ..thanks

[@RahulSharma-ke7wg]

can anyone pls tell me ,how to disable 3 future days from current date using the filter prop.

[@vikassingh1946]

how to filter the year

[@sologuitardeshchatterjee]

Also could you please upload a video on react table along with collapsible items embedded. Thanks

[@calvincrane]

Nice one! {hows} it look on mobile? I assume it also has matured nicely. Dates and times mash my little brain so any libs from big brained people I welcome :)

[@SumitRaj-jf3ro]

good

[@pavankumarvangala2548]

HI, How can I use two colour pickers in a single page

[@blockcoder8129]

Please upload a video, on sidebar menu, that can be toggled.

[@shivshankarkeshri8959]

Make some project work