Problem Statement: Weekday date range picker component Create a date range picker component in React and TypeScript that allows users to select weekdays (Monday through Friday) and prevents them from selecting weekends (Saturday and Sunday). The component should include the following features: ● The component should allow users to select a date range defined by a start date and an end date. Remember that a start date and an end date must be a weekday and should not be a weekend. ● The selected date range should highlight only weekdays and weekends should not be highlighted. ● The user should be able to change the year displayed in the date picker. ● The user should be able to change the month displayed in the date picker. ● The component should include a change handler that returns the selected date range and any weekend dates within that range. As an example, if the range selected is December 1st, 2022, to December 15th, 2022, the returned values should be an array containing the date range as the first element (e.g. [2022-12-01, 2022-12-15]) and an array of weekend dates within that range as the second element (e.g. [2022-12-03, 2022-12-04, 2022-12-10, 2022-12-11]). ● The component should include a prop that allows the user to input predefined ranges, such as the last 7 days or last 30 days. These predefined ranges should be displayed below the calendars. Please refer to the date range picker linked below as an example: rsuitejs.com/components/date-range-picker/#predefined-date-ranges The use of date picker libraries (e.g. react-datepicker) or date libraries (e.g. date-fns, Moment.js, Day.js) is strictly prohibited. sir please solve this problem and make a tutorial video ,,
I don't think it takes much effort to host. Just push all your files in a repo and go to settings and go to pages. Then enable the pages and you are done with it.
thank you sir that was a great video it refreshed my react skills, taught me some new lessons, and my collection got another project. Consider your HW to be done by my side.
@@CppGod-kn3fy I am viewers mujhe Jo samjh aaiga boloonga TM code likh rahe ho code likho zyda wakeel Mt bno ok.... tumko samajh aa rha h ok Nhi Aaya ok hai
@@jazibbashar3332 tum logo k kaaran hi youtubers easy content banate hai aur easy content ko tum hi log promote karte ho. Easy seekhna h toh freecodecamp par jaa. Idhar timepass mat kar. Level badha aur wapas aa.
I have an idea to build up the floor planner web app using react and drf but I don't know how to execute it. First user can edit floor plane in 2D environment and then have a visualisation in 3D after he done editing and something like that. Here I need drag n drop to put objects in floor plane with canvas and user can draw walls in canvas
Awesome video as always. These kind of real world project examples really help. There was a video where when a person is searched and clicked then the name will be added to the text field and the cursor will move. Had a similar requirement but different UI, but the concept really helped to work on it.
What is the difference between your course and your RUclips playlist? You have all the topics in the RUclips playlist also.... Can you give some information about your course contents?
This has 4 new JS topics, react topic wise questions, lot of new machine coding questions and performance optimisation questions. All these are not on my YT channel Few topics of JS are common between the course and my channel, The reason for including them in this is so that this becomes one stop for Frontend Interview preparation. You check the detailed curriculum in the website. I have mentioned it in this video as well - ruclips.net/video/8SgWqKosMIM/видео.html PS. You get the access to our premium discord community
@@RoadsideCoder Bro drag and drop logic was not explained in detail. By slow explanation means explaining it in depth as well as the reason of applying some logic. Why mouse event? Why that particular mouse event?
I think using those mouse event was self explanatiory, I would recommend making more HTML,CSS and JS project to improve basics then u will be able to form these logic better. More questions here - roadsidecoder.com/course-details
Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)
This way of accessing also works, as note-Refs is an array type.
note-Ref = note-Refs[id].current;
Your videos becoming calculation-heavy 💀day by day which proves that FE is not limited to only HTML
True!
Problem Statement: Weekday date range picker component
Create a date range picker component in React and TypeScript that allows users to select
weekdays (Monday through Friday) and prevents them from selecting weekends (Saturday and
Sunday). The component should include the following features:
● The component should allow users to select a date range defined by a start date and an
end date. Remember that a start date and an end date must be a weekday and should
not be a weekend.
● The selected date range should highlight only weekdays and weekends should not be
highlighted.
● The user should be able to change the year displayed in the date picker.
● The user should be able to change the month displayed in the date picker.
● The component should include a change handler that returns the selected date range
and any weekend dates within that range. As an example, if the range selected is
December 1st, 2022, to December 15th, 2022, the returned values should be an array
containing the date range as the first element (e.g. [2022-12-01, 2022-12-15]) and an
array of weekend dates within that range as the second element (e.g. [2022-12-03,
2022-12-04, 2022-12-10, 2022-12-11]).
● The component should include a prop that allows the user to input predefined ranges,
such as the last 7 days or last 30 days. These predefined ranges should be displayed
below the calendars.
Please refer to the date range picker linked below as an example:
rsuitejs.com/components/date-range-picker/#predefined-date-ranges
The use of date picker libraries (e.g. react-datepicker) or date libraries (e.g. date-fns,
Moment.js, Day.js) is strictly prohibited.
sir please solve this problem and make a tutorial video ,,
Thanks, I will
Could you create a video on how to host your portfolio website in github pages?
Sure
Hi
@@RoadsideCoder Thanks a lot brother
I don't think it takes much effort to host. Just push all your files in a repo and go to settings and go to pages. Then enable the pages and you are done with it.
thank you sir that was a great video it refreshed my react skills, taught me some new lessons, and my collection got another project.
Consider your HW to be done by my side.
One of the best explanation video i have even seen, thanks brother💖
You're welcome bro!
Thanks for sharing this knowledge-packed video on React machine coding! 🚀 Learned a lot and would love to see more content like this 😇
Thanks! You can find more questions here - roadsidecoder.com/course-details
Bhai agr aap code ko explain krte chalo then it's good for people like me who is new to react
Khud samjhle bhai ya fir apna level badha aur fir yeh video
@@CppGod-kn3fy yeh aap kisko bol rhe ho samjh nhi ayaa
@@CppGod-kn3fy I am viewers mujhe Jo samjh aaiga boloonga TM code likh rahe ho code likho zyda wakeel Mt bno ok.... tumko samajh aa rha h ok Nhi Aaya ok hai
@@jazibbashar3332 tum logo k kaaran hi youtubers easy content banate hai aur easy content ko tum hi log promote karte ho. Easy seekhna h toh freecodecamp par jaa. Idhar timepass mat kar. Level badha aur wapas aa.
Hi Piyush, this is really good, thanks for sharing
Is it possible to attach events without making use addeventlister and outside the onmousedown function?
Such machine coding questions asked for experienced ones or freshers?
SDE 2 and above
I have an idea to build up the floor planner web app using react and drf but I don't know how to execute it. First user can edit floor plane in 2D environment and then have a visualisation in 3D after he done editing and something like that. Here I need drag n drop to put objects in floor plane with canvas and user can draw walls in canvas
People asking Piyush to explain things in 'detail' should first get their basics right and then watch this video
Awesome video as always.
These kind of real world project examples really help.
There was a video where when a person is searched and clicked then the name will be added to the text field and the cursor will move.
Had a similar requirement but different UI, but the concept really helped to work on it.
Hey Piyush, loving your videos keep it up brother❤
Thank you, I will
thank you, it is very interesting task
Glad it was helpful!
Great content 👏
Thank you 🙌
Great content bro....
Thanks!
In my recent interview,I have been asked to create a Kanban Board in react JS
full stack or frontend?
What is the difference between your course and your RUclips playlist? You have all the topics in the RUclips playlist also....
Can you give some information about your course contents?
This has 4 new JS topics, react topic wise questions, lot of new machine coding questions and performance optimisation questions. All these are not on my YT channel
Few topics of JS are common between the course and my channel, The reason for including them in this is so that this becomes one stop for Frontend Interview preparation. You check the detailed curriculum in the website.
I have mentioned it in this video as well - ruclips.net/video/8SgWqKosMIM/видео.html
PS. You get the access to our premium discord community
Hi Peeyush, Which monitor & keyboard/ mouse do you use with Mac?
I use windows
❤
Can someone tell which vs code theme he is using😊
peacock
Copied most of the logic from stack over flow😂.
Don't blindly use this in production. There are lots of performance problems with this code.
This is an interview question, obviously no one is going to use it in production 😂
can you upload long videos with slow explaination it was fast ! Drag n Drop logic
you can switch the video speed to 0.75 or 0.50, will be helpful
@@RoadsideCoder Bro drag and drop logic was not explained in detail. By slow explanation means explaining it in depth as well as the reason of applying some logic.
Why mouse event?
Why that particular mouse event?
I think using those mouse event was self explanatiory, I would recommend making more HTML,CSS and JS project to improve basics then u will be able to form these logic better.
More questions here - roadsidecoder.com/course-details
bhai app sirf react per video banate ho please angular per bhi banao
bro react is asked much more than angular
15:05
emojis in linux ?
This worked for me Installed :emojisense: extension press Ctrl + i for opening the extension search bar
RIP for those who watching after react 19
haha, react 19 is not out yet. its just beta
Basics don't change bro
This is not an interview question
Hey we can make it only in javascript??
how do u wanna make it?
Too fast and no explanation. So its difficult to catch as a beginner.
You can start with basics first, so start with this playlist from beginning - ruclips.net/p/PLKhlp2qtUcSZiWKJTi5-5r6IRdHhxP9ZU
tere ko ye sab smajh kaise aa rha hai :)
i want to learn all this things
I have covered all the basics to advance here - roadsidecoder.com/course-details