Watch me work: React Date Picker Feature Review

hello hello hello what is up everyone how are you all doing today luciano good to see you naji my friend thanks for joining yes i am the prism guy that is what i am most known for right prism library i think last time i counted we uh had over 16 million downloads of prism which is pretty amazing if you think about it now just says i have followed the courses about principal pluralsight past weekend it was amazing thank you very much for the kind words naji i am glad you enjoyed them so today is going to be an interesting day uh i was supposed to stream this morning but i had back to back to back to back meetings uh all morning long and they started at like 7 30 a.m and then didn't end until lunch and then i had to have lunch and so i'm starting a little late today so my normal crowd probably isn't going to be here today but i appreciate everyone who has joined me so far but what i have to do today is i have to review uh feature work that has been done on a react date picker component so if you're not familiar with uh what i do i work for a company called infogistics uh you can see the little little bar at the bottom there which says infrasticks and uh you know we provide a number of ui components for developers to use in their client-side applications and uh we're having a big release come up pretty soon so i have to do like a blog post and you know like a what's new blog post and i have to test all the features out give feedback find bugs and make sure the component works like a developer would expect it to work you know does the api make sense does the control behave properly and then essentially while i do that i'm taking screenshots that i'm gonna use for a blog post that i'm writing as well and i just have a lot of work to do so i figured you know what you guys could just watch me work i'm just gonna do my thing and you can see all the glory that comes with being you know in that devrel product owner manager support client sales person role marketing person so i i wear a i wear a lot of hats at infrastics and i kind of do a little bit of everything so right now i just i just have so much work to do i'm like you know what if if people can watch other people's stream studying in a library for six hours straight why not watch me like you know evaluate apis and make sure components are working and do some code reviews and things like that right uh luciano uh not streaming on twitch anymore no i am not streaming on twitch anymore uh mainly because my audience is just not on twitch they're just not there that's not where they're at you know uh i've actually had much more you know success here on youtube and this is only like my fourth youtube stream and i i already like the community you know the community is great here uh i know when i was thinking i was asking my friends you know hey should i should i switch to youtube i really think i should switch to youtube because that that's kind of where my audience is at uh i don't really have many followers on twitch maybe 1200 or so uh you know but i'm approaching 9 000 on youtube i'm like no maybe i should switch and all my friends like oh no no no you youtube streamers they don't get any any participation no one chats no one watches no one likes your videos no one subscribes to you during your your streams like oh no you won't get any you know interaction from your community there yeah that has not been the case that has not been the case at all the youtube community is amazing so i'm gonna stick with youtube for the uh foreseeable future you know uh because this is where this is where my peeps are at this is where my peeps are at i gotta go where my peeps are at right so uh i guess without further ado uh let's let's let's get working let's work who wants to work anyone want to work okay so the first thing is i have already downloaded this date picker sample that was sent to me uh by my uh engineer and so let me see what they've given me uh okay it looks like a pretty basic sample react let me just minimize that there and we have just the date picker that we're looking at so today our goal is to evaluate this date picker component with a number of new features that have been added and just see how they work and we'll take notes and feedback or any bugs that we find and send them off to the developers so they can fix them before we release all right and so since this is a react whoops i thought i could have sort of hit that let me go ahead and npm install everything just to make sure everything is installed because if i try to run this and it's not installed i'll get a big fat error right but yeah today was a crazy day i mean when i say i had meetings back to back to back i had meetings straight from 7 30 8 a.m until 12 30. i just finished eating lunch and i was little awards like crap what am i gonna have for lunch and uh luckily my wife stopped and got everyone some me and my kids some food for lunch i'm like yes perfect timing perfect timing okay so i didn't starve so now we're gonna go ahead and run npm start and let me whoops i'm gonna raise this up just a little bit here so you can see my scripts that i run if if any and you know what i better turn off close my email okay i'm gonna close that otherwise you'll just never you'll always hear that okay so all right so here's the date picker our day pricker component it just drops down the calendar and we can can we type into it oh we can't type into it perfect what happens if i type blah blah okay so if i type blah blah it goes to the first of the month does that make sense to you just that alone see my first test here i'm open up notepad so this is what i do i uh i check these features out i test them i try to break them and i provide feedback so what would you expect if you're a developer and you're using this date picker in your component and your end user typed just some blah blah blah stuff in here oh i can't even get it in there now oh we broke it interesting it's okay let me try this okay now i could put ah see we even we found a bug so if i put junk in here and hit enter it goes to the 4-1 right so what would you expect to happen there i would expect if you're gonna choose a date it should probably be today's date right so if invalid characters right use current date or or not or no date at all right knoll maybe i mean what's what's your what's your feeling on that right now it looks like you put some junk in here hit enter and it goes to 4-1 which is the first of the month but today's the eighth so think about that think about that for a second how you would want that to behave if you're an end user put in an invalid date uh actually so that behavior looks so if i choose four nine put in a date it goes back to the original date which i agree with that but if you have invalid characters with no date set right that's the scenario there's no date set invalid invalid characters use current date or no date at all that's a question i'll have to answer i'm not sure have the the answer to that let me just refresh this so by default it looks like we can edit that's good so if i put like i don't know 5 12 19 what's it give me okay that's good opens up okay that works fine john says today's date seems better for invalid characters it's kind of what i'm thinking it's kind of what i'm thinking so we'll put a vote i'ma put a vote right here a vote of one for for use current date and if anyone has a comment about what you think uh then i'll add your vote here as well right now it's one to zero hendrick great content on pluralsight really like your way of teaching i appreciate that my friend thank you for the kind words thank you very much okay so one thing i've already noticed when i click in the edit i don't know i kind of expect the drop down to drop down you know what i'm saying like i click in here and the drop down should probably open drop down should open when a text field gets focused right because right now we're kind of we're forcing them to click the calendar icon oh actually what okay let's go to code so we should have a property on this something like allow text input so if i don't allow text input let's save that let's see what happens this is going to refresh real quick i hope it yeah there it goes uh so now we can't type in it but when i click here yeah the drop down should definitely open if i click in on this and it is not opening so that is definitely okay so when allow text input equals false definitely do this uh when it equals true we should have a property slash option to control at the drop down shadow because i can kind of see scenarios where maybe you don't want the drop down to open right and they they don't want it to open uh so when you put the the text editor focused you don't want that to open you're just going to type it in so let's go ahead and set that back to true let that compile yeah luciano some people prefer to write the date by themselves so let's play with that some more right so i write the date myself and yeah that works fine i can click the calendar but i think the option should be there right the option should be there uh because some people might anytime you click on this just have it open now something else i'm curious about uh what if i put in thurs the eighth i don't know uh wait no what if i no let's do this april can i type i can't type apparently april 8th 2021 wait a minute hold on let's double check that january 5th of 2012. okay that's cool that's kind of cool i like that i like that uh can i do i guess so anything would work huh what if i type it all out december you know 25th comma 2021 nice okay so that that works pretty well no no comments there okay let's let's play around some more so what i'm running off of is i hate finding my my shortcut here uh at the same time i'm writing a blog post that will go over these features so let me find that blog post our blog engine really blows by the way like really bad so i'm gonna open that a new window and i'm gonna edit this so this is the blog post i'm working on right now all right this is the what's new and 20.1 uh ignite ui for react this is the release that we're about to push out uh this month actually and you know i'm gonna have this cool little intro and i'm talking about the features that we're releasing in the react grid and i've already tested these features so these are good right uh enter behavior all the cool stuff you can do with your grid again edit with key press i really love that feature really love that one selection improvements and then here we are uh date the date picker right so i've kind of i've kind of highlighted uh the the features i need to check out so these are the new features right so text input that's what i'm testing right now that's the feedback we're working on and then i need to insert a you know a gif of actually typing in characters and like it working right so let's actually do that uh i use for to create gifs what's the name of that thing oh camtasia i use camtasia and so i will grab my little recorder here see and i can i can resize this recorder to whatever size i want oops and then i'm going to type some text so i'm going to write i'm going to record like this this i'm going to do it i'm going to start recording and i'm going to come in here april 7th 2021 enter right or 8 12 2020 enter i'm going to stop it what's going to happen now is it's probably gonna open up on another screen uh you'll see this little camtasia chances are it's gonna open up on the screen to the left if it is i'll drag it over so you can see what i do next yep there it is uh so now what i'm gonna do i'm just gonna come i'm gonna trim this down just a tad right so let's split that delete that oh you can't even see because my bar my bar is blocking the edit hold on where's my bar bottom bar boop okay now you can see right now you can see that so let's go ahead i'm gonna play this oh actually i could trim that some more probably about right there delete right so basically i use this app to uh record my screen edit okay so should i stop it there or should i show changing the date as well i think i'll show both but i don't believe that much so i'm gonna split it there and i'm split split it here delete that see so all i'm doing is i'm really editing this down so we'll say april 7 2021 enter highlight 8 12 20 20 enter stop split that okay so now i've created this uh this little edit right and now i'm gonna create a gif out of it so i'm gonna do a custom production the animated file uh i'm gonna call this i'm gonna call this date picker text input uh finish and then here's my gif and it's playing so i will use this gif uh in the blog post itself right actually let's do it right now let's do it right now so i'm gonna minimize this actually let me open that back up because i'm going to delete just case i use that again no i'm screwing it i'm just going to close it okay so let's go back to the blog post i'm gonna scroll down to where we're talking about the date picker ah text input insert gif insert isn't working fun is it just so fun blog date picker text input uh oh what is the size of this i gotta set the size right let's look at the properties here uh 348 right so 348 delete that okay save draft okay oh i got to put my bottom bar back because i'm just kind of floating in space now there we go put that back okay i just wanted you to see that how i was editing that all right so now we can refresh this and there's our gif so yeah you can now use the keyboard to enter dates into the react date picker component without selecting a date from the drop down oh you know what i should i should add to that i should add you can enter uh how do i want to put this you can enter your date value as a numeric or alpha numeric representation of the date spell check does that make sense you can enter your your your date value or you can enter the date value as a numeric or an alphanumeric representation of the date perfect all right so now let's oh you know what let's skip format because i want to spend some time with formatting uh supposedly we have a today button i don't see it here so let's go into our code and i'm going to assume i'm gonna bring this down the line i'm assuming we have like a today button ah show today button okay so let's save that we're gonna say show today button true we'll wait for this to refresh and now i'm gonna click this and there's our today button so what's the today button do uh what does it do okay i got this weird flashy thing going up here that looks like a bug to me okay let me pick a date now let's sit today okay so we we definitely have something going on here we definitely have a bug if i select a date we hit today the today button doesn't seem to set the date to today but it takes the calendar to today's date right however we have this artifact where this is being highlighted for some strange reason even though that's not the date so if i close this open it back up the highlight's gone but now we're on the wrong okay so we have two bugs here we have two bugs that we found uh pick a date here we have a highlight okay all right so first off uh when setting a date and a uh yeah when setting a date if you click the today button if you click the today button man i can't type you would think i know how to type by now if you click the today button the the cal i'm gonna say the calendar month changes to the correct month and the current day is correctly outlined however the first of the month is highlighted for some reason okay so that's a bug another thing we have is uh when setting a date and using the today button if you do not change the date but close the calendar then reopen the calendar the calendar does not update to the correctly to the correct selected are set yeah set date right uh is the current day not always marked with the border uh no the the current day is always marked with the border however the problem comes me clear that out okay so for example if i go back and i say february 2nd and then i open this up you see it says february 2nd and it's that blue highlight right but now let's go hit today well boom first off we get this weird like color on the first right and then of course today is is outlined properly now if i close this and open it back up i actually expect to see this calendar represent february 2nd 2021 not april 2021 with no selected date and the today outlined right so that's that's the problem maybe i need to think about how i worded that that bug i found but that that's my expectation uh ali good to see you my friend good to see you it's not a bug it's a feature maybe alexander that's definitely a bug that's definitely a bug okay so we found a couple bugs there okay so but today so i need an image of the today button to put right there so let's at least take that picture so we can do that i'm not sure if i should take should i take the whole snippet or just of the today button oh what should this look like i could do that then i could open up paint crop should i like i can highlight it but i don't want people to think that's like part of the uh no i can't do that let's just save it as that because i was thinking of maybe trimming it but i want you to see the calendar too should the calendar have a date yeah yeah hold on let's redo this let's redo this oh wait i don't want that in there there we go i didn't want the blink in there yeah that's gonna that's gonna be a better a better picture there all right save as jpeg and we're gonna put it in the blog folder date picker today button all right so let's go ahead and add that picture insert image upload and then i don't think i have to set my width on this oh my god i do that's bad that is bad right there uh 319. there we go wait a minute that's not the today button insert [Music] this is the today button which is yeah 319. there we go all right so we have that now let's let's read this to make sure okay so we have added a today button to the calendar drop down that will allow you to not select the current date uh that will bring the current date into focus within the calendar drop down i don't like the sentence it's kind of long we have added a button to the dollar to the calendar drop down right [Music] this yeah this button this today will bring the current date into focus within the calendar drop down no matter what month or year you have navigated to within the calendar you can hide the today button from the calendar drop down by setting the show today button property to false yes uh ooh no it's not on by default it's not on by default so you can show the today button for the calendar i'm saying to true save draft right was it that it yeah we had to actually show it i'm pretty sure i don't remember oh i don't remember i think so okay we'll go with it i think so i'm pretty sure i'm pretty sure okay so we'll double check this refresh the blog and there's our pretty picture and i really hate that little bot all right so the next feature we have to review you can now define the first day of the week for your loc for your locale by setting the first day of week property i this exam okay i misspelled that and okay i changed that too all right so let's fix this in this example the first day of the week is to be set to i don't know what do you think tuesday [Laughter] who goes to work on tuesday let's try it let's go to the code so we expect to see a show no uh no first day of week first day of week first day of week equals what is there ah hold on let's let's look at the type on this day of week okay day a week dot do we say tuesday all right let's run that let's see what happens let's let that refresh there we go tuesday that's weird that is weird but let's uh let's go with it you know tuesday's kind of awkward let's do monday and i'm gonna update the blog to actually say wake up monday right because it's a it's an enumeration so control b should bold it yeah okay and we'll just pick a date here that looks better okay oh no i don't want the i don't want the blinky i don't want the cursor in there i did it again there we go take that working is so much fun i'm telling you save as date picker first day of week all right insert an image i really wish they would support wordpress on this but they don't and it's so annoying i love wordpress love it 311. whoa what happened gustav hello good to see you my friend let's try this again shall we there we go all right okay so first day of year now this is gonna be interesting i'm gonna save that refresh okay so first day of year defines from the first week of the year should start wait wait yeah that's right defines from the first week of the year should start first week of year see so i like to when when i start writing release blogs about features you know this is what i like to do i like to stub them all out write a quick sentence so i remember what the heck uh they are and then i go validate that when i get the sample to play with and take the screenshot right uh and so far besides the very beginning we have to come back and do the format but i have a feeling we're gonna play with the format a little more uh this is gonna work out nicely because these are going pretty quick we actually have we actually have a lot to cover don't we okay so first day of year so we need to set the first week of year did i miss oh it's not first day of year it's first wait is it first first week of the year i have the title messed up i have the title this first week of the year come on brian let's go back to our code so i'm gonna get rid of this you know what i'll just default it to sunday first week of year equals first week nope that's not it let's go to the definition here yeah it is first week first week dot but i don't have a hold on hold on maybe i gotta import that yeah yeah first week okay maybe not there import first week ignite ui inputs slashed first week right maybe there we go okay so we have first day first four day week and first full week so let me check that against my uh my blog that i wrote first day first full week okay all right that's good that defines when the first uh okay this i like this description you can set no no no you can uh oh what i'm gonna say what i'm gonna say hello joseph good to see you my friend thanks for joining you have to watch me work isn't that fun we get to review an api for a react date picker and uh write the blog post for the release at the same time first week of year so i'm gonna go to january 2021 wait did i save that oh it didn't hold on let me save that compile okay all right so here we go go to the january we need the first first full week of the year [Music] what's that mean [Music] let's change the value what's up theresa hello from morocco well hello that's uh it's pretty far from me how about first day let's see what happens i i want to see what this actually controls because i really didn't see a difference didn't see a difference let's go back to january uh i'm not seeing any thing am i supposed to see something is it me or are we supposed to see something you know what hold on i you know what i bet i know what this has to do with i bet this has to do i bet this has to do with uh weak numbers [Music] i bet it has to do with weak numbers so we'll let that restart is that done compiling yeah okay so we're showing weak numbers i i guarantee you that's what it is okay so right now the first day ah that is it so the first week of the year is right here the first full week because that's what we said right we said the first full week that's the first week of the year okay now let's change it so those those work hand in hand the first day [Music] so i might have to think about how we talk about this in the blog yep now the first week of the year is the first day here see uh january 1st falls on a friday but because we said the first day of the week but the first of the month essentially becomes the first week so that's how that works so this depends on weak numbers so okay so let's move weak numbers up we have to promote weak numbers because i i think this has to go in order okay so we have that yeah different country count the week different exactly and that's why we wanted to make sure we added this feature uh to give developers the ability to change how this works depending on their locale right who's texted me okay don't care about that one don't care about that one don't care about that don't care about that and i'll cover about that okay perfect oh okay so let's get r i want to see the default value first show weak numbers equals true let's come back over here yeah we have to do this one first all right all right let's take a picture of that crop say there's a jpeg uh date picker week numbers [Music] insert image file upload weak numbers let me get the size of this 325 [Music] okay save uh now this relies since this controls the weak numbers uh we need to change the wording here okay when using [Music] weak numbers uh whoops when using weak numbers you can control or you can define there we go what the first week of the year uh wait when using weak numbers you can define which now what the when the first week of the year should start when did i have it right when using week numbers you could define when the first week of this year should start first uh you could define when to start the first week oh yeah i like that better when to start the first week of the year [Music] there thank you gustav i appreciate that i like that better and do we have something up here uh to do this simply set the what's the name of that show no first week of okay boom simply set the first week of your property to one of the following values bold that all right joseph it's real project of wpf prism uh this is not a prism app we're working on now uh joseph is that what you mean uh what we're doing now is so this date picker that we're playing with this is a ui control that is shipped by a company called infogistics right so if you go to uh infrastructure.com uh this is a company that builds ui components so if you go to like react this is the product ignite ui for react we have all these great controls uh that ship well we are about to release a new version of this control that has all these cool new features in it and we are going through them testing them uh giving feedback and trying to find bugs right and seeing how they work and i have to at the same time write the uh the documentation not the document write the blog post for the release so we're kind of doing this all all at once and you know what i'm but um i don't know if i should leave that or not i guess i'll leave it more information is better than less okay so in in this example we have set the first week of your property two what have we set it to first day wait what's the fault hold on let's uh let's remove this again i want to know what the default value is just for fun okay come on refresh did i save that let me just refresh that okay let's go to january oh so it's first day is by default okay so let's change that we don't want first day then we want first week first full week that's what we want right there there we go yep now you can see the uh the week number boom save as jpeg first week of year not if here dang it oh well it doesn't matter doesn't matter really upload just res right there and i forgot to get the size 311 okay we set the first week of the year to first week of year dot first full week notice that the week number one now falls uh what's that gustav what what's happened with your uh tech question series no time you still planning to do oh yeah well i haven't had a ton of take questions honestly [Laughter] so that's the real reason i haven't really had a lot of tech questions but uh if i get a good question i'll still do one but uh yeah i just haven't had any it kind of goes in spurts right sometimes i get a lot of questions and i'll start going through them and sometimes they just don't get any for a while okay so notice that the week number one it now falls on the date starting january third instead of january first how about that notice that the week number one pulled that now falls on the week starting starting january 3rd instead of january 1st okay i think that's good yeah so gustav if you have any uh if you have any good tech questions let me have them send them to me i do a video on them all right so that's good what do we have next date limits oh date limits are fun okay so when date limits are set via min and max dates do we have min and max dates do we really let's find out mandate uh can i do any date i want here or do i have to have do we have something up here oh look at this i don't like how they wrote this component i really don't like how they wrote this component let's try this uh what is the min and max date year month date zero interesting ah okay it's a pretty uh pretty cool little thing should i get rid of the weak numbers now i kind of have a feeling i should get rid of the weak numbers maybe i should uh for these screenshots you know what i am i'm gonna turn them off for the next screenshots let that compile then i'll take the screenshot again okay 2020. now the one thing that's interesting is the today date the today date turned into that shouldn't be right that's not right okay that's a bug when using date limits the today date is not correct it seems to be using the last available date yeah you should not just because you're using date limits doesn't mean you should change what the today date is like no like no that yeah that just doesn't work so for the screenshot purposes i'm going to select that date i'm cheating i know i know i'm cheating i'm going to hide that bug oh wait i'm showing the today date as well oh show today button false just try this again get that reset there we go boom okay gustav or maybe if you put out out of range data today should not be visible anymore oh well i mean we kind of have do you mean like not hide are you talking about like not showing these dates at all only show the dates that are in range so if i come here i see you can't select anything else but you can still see the dates so i kind of like that better instead of just hiding things right because you know the dates are still there and you can still look at the calendar and get a sense of where a date lies within the context of the rest of the month or whatever you just can't navigate anywhere else because it's outside that range okay so we did that we're gonna save this as date picker we're gonna call this date limits 308 i just noticed down here at the bottom i can see that insert the date limit 308 okay so what day limits are set via the min and max dates maxdate properties the react datepicker will not allow out of bounds dates to be picked or entered all dates that fall outside the set date limits will be disabled and grayed out there you go uh gustav says when you hide something usually you do it just for saving space right and in this case you don't have to really save any space okay that looks good next example allowed dates are what is it one whoops let me do that 115 2020 to one i think it was 30 20 20. yup okay sweet save okay labels and placeholder okay [Music] so we're almost done with this almost done this is gonna be cool let me refresh let's just start start looking pretty good now yep looking pretty good okay let's get rid of that we don't need the min date max date anymore what we need is oh wait no label it was label right label is this is a label oh wait enter date that's the label let's save it and see what happens [Music] i'm actually kind of proud of you we haven't found that many issues right if we look at our little bug list we really haven't found that many okay so here's our label oh we do have a little okay we did find a bug here i spoke too soon uh when using labels when using the label not labels but label the cursor overlaps the cursor i'll say blinking so he knows what i'm talking about uh overlaps the label above the editor right because i click in this and you you can see how the uh how that happens there right how it overlaps the cursors overlapping the e on the enter date but what we'll do first is we'll go ahead and take this screenshot okay we're actually going to need two on this so we'll call this date picker label and this is 293. we're gonna need two here i'll write the text in a minute look at the images in there first right so that's that and then we need a focused a focused version what happens when it when it's focused and when it's focused it it kind of goes to the top right that's how the label works and we'll just put that right in there save as label focused and that is a 295 width of 295. focused boom all right so we have the focus value oh you know what i'm curious about let's pick a date okay the date fit the date works i was thinking maybe i should put a date in there right that's kind of what i was thinking i don't know what would look better it might actually look better if we put a date in there ah i don't know i don't know i don't know i don't know maybe i'll just keep it the way it is because it is focused it just doesn't have a date however it might look better if it had a date dang it leave it to me to come up with these make the simplest decisions so hard right i don't know what do you all think should we uh should we put a date in there or keep it without a date all right that's without a date that's with a date i'ma leave it as it is for now i'll leave it as is it's fine that's fine it's fine it's fine okay so now i'll write the let's just write the text so i think this whole label thing is tied to like material and the material design language i think that's kind of where this comes from actually material label behavior let's see if we can uh look this up floating label well i guess it is a floating i mean it is a floating label this isn't what i'm looking for though angular material okay that's not what i'm looking for either come on you see that how that happened there yeah see that's what's supposed to happen boom that right there that's what happens that is the material uh like floating label so that's what we have oh i was able to break it oh there we go what's up dan what am i breaking now actually i'm trying to find stuff that's broken uh this is the react date picker component that we are releasing with a ton new features and so i'm going through each and every feature testing it out making sure it works and then writing the blog post about it right so we're on the label right now the label feature and like for example this has a small bug where the cursor the blinking cursor uh overlaps the actual label itself uh but i have i have my bugs that i found right here so far i'm just trying to think uh what the right about the label so i was hoping i could steal some content from somewhere but placeholder i mean it's a floating label but can you teach alan how to write blogs so we can get a shiny 2.0 release i'm sure alan knows how to write a blog accessibility troubleshooting see it's not really talking about this behavior boom it's called a floating label i'm trying to find a good write-up on it oh here we go there we go floating labels display the type of input a field requires every text field and select should have a label except for for the text fields okay which the user's input placeholder attribute instead labels are aligned with the input okay they could be or it could be resting when they filled is inactive and empty or floating okay so let's take let's take some of this content and we'll make it our own all right let's let's do this okay yeah so here's the here's the blog post so far it's kind of long but i got a lot of images in it just talking about all kinds of cool grid features edit features navigation selection all that great stuff and we're on the date picker now we've got to come back to this format input text though that should be a fun one just showing off we got the today oh i what oh i had the today button on there dang it i didn't want that on there oh well crap i had it on a lot of them oh come on brian that's all right i'll turn it off here that's fine i am not redoing those screenshots just for that today button heck no who is this man everyone must be trying to get a hold of me today [Music] uh yeah you can provide a text caption or description hahaha by or the react date picker by setting the label property here we go okay you can provide a text caption or description for the react date picker by setting the label property by setting the label property [Music] when the okay so down here when the date picker receives focus the label will then float above the edit above date picker [Music] yeah that works that works so when the date picker receives focus label will then float above the date picker and this example the label property is set to enter date good like that yeah and then when the date picker receives focus the label will then float above the date picker okay that works i mean it's simple i mean there's not much to write about that it's it's a label okay so now let's talk about placeholder right so now we have a placeholder which is different from the label this is like a hint text right so maybe uh month day year year something like that right boom like that there's our hint text that kind of like gives you that format but i don't like i don't like the capital right that's kind of how that works pretty straightforward yeah it's like a watermark exactly jochen g just like a watermark so let's take a screenshot of that i don't want the cursor in there dang it oh my gosh there we go boom go ahead and crop that that's 294 save as jpeg placeholder there we go when the value of the react date picker is null you can enter a text hint to your end users by setting the placeholder property of the component perfect that works placeholder oh what'd i say 294 yep 294. okay and then accessibility the react date picker is now accessible by screen readers and provides full full accessibility nope full and uh 503 wait what was it oh what is it what's the code 508 500 what is it someone knows someone know anybody that 508 compliance yes 508. 508 boom okay so really all we have to do left is the uh the formatting which i haven't played around much with this so i wonder how we would do that now so let's play with formatting oh wait a minute i'm not done testing this not done testing this hold on i got ahead of myself so that hint text works fine however we got to test we got to test different scenarios right when you're when you're you know testing new features you have to like just try to break it the best you can so for example i'm going to remove the label and i'm going to see what happens the expectation is i'm just going to see the placeholder [Music] we have no placeholder but when it has focus it has a placeholder bug know what that means you know what that means it's broken miley miley up here breaking my stuff that's a bug that is a bug okay uh placeholder not visible when not using a label okay perfect now let's go ahead and delete the placeholder i don't care about that anymore actually i don't care about most of these anymore what i care about now is the format is our format format string or is it date time format ah okay i don't know the difference date time format format string let's look at this first what is this date short date long date oh okay okay this is kind of cool i didn't know about this okay so let's go back to this blog oh we actually have two options to set the format all right so let me let me come down here i'm gonna come down here uh two options i'm just gonna make notes first two options to set the date format well at least i think date time format property i think there's two ways i'm not sure date short date long why would you have time short time long because you can't set the time this is only a date picker we don't support time that is okay let's try it let's try it date time format dot wait a minute did this import the wrong one what did this import oh yeah that's not the right one that's not the right one at all ui dash inputs slash date time formats there we go is there some kind of format validation for the input or is it or is validation not in the scope of the date picker you know i don't think we're doing like true validation to where you'll get an error message or something like that but i think we will try to coerce the value if it's wrong i think but i'm pretty sure we don't have any uh we don't have any actual like validation yet so let's go date long let's try this one first i want to see what this does and i'm really interested in the time because we it's not a it doesn't have time in it oh that's cool april 15th so if i type 6 15 21 oh oh that's pretty slick okay that's kind of cool i like that one i like that i like that okay that's i like that uh but what happens date short i gotta go through all these i gotta go check all these out i do like that one though okay that stayed short so that's the default now here's an interesting one date time long this does not have time in it so this one really uh confuses me but i see a time after it but you can't set the time what can you no you can't see you can't we don't we don't parse that oh wait it's not using 24 hours no see you can't set it yeah yup yup okay so that doesn't make a ton of sense honestly not at all anything to do with time so if i just put time in here doesn't make any sense whatsoever but we have it on there maybe they're thinking about the future i mean you can't change the time if i did zero what yeah there's nothing i can do here because this is not a time editor so that one's weird however i will document it because it's going to have date time formats dot date long and date short those make sense right those make sense the other ones do not okay so let's let's delete this and then we have format is this format string okay so let's uh what would be a valid format i'm trying to remember off the top of my head if that's even a valid format i don't think it is because this is work off yeah okay but what if i did is it the capital m that gives the whole month name yeah i gotta stop i'm with you my friend i'm with you that doesn't uh doesn't make sense for i'm not sure that's respecting date string format here we go here we go so that's a short day pattern long day pattern okay let's try some of these out oh i had that one i just had that that's the short that's the long okay let's try this one ah no that's i mean it doesn't have the slashes in it but that just doesn't look right for eight day month day here this is oh hold on is this a form yeah that's that's c sharp i thought there was a standard standard date time formats i want the standard ones uh leonard harris i don't know much about react native but prism forget native prism everywhere you know i haven't played with react native yet i've watched some videos on it it looks interesting uh specifically i was i was researching it because i wanted to try to come up with an architecture to where i could share my react code from my website to react native apps uh all within like the same solution and so i was kind of reading because i'm an architect that's that's my that's what i really love to do is architect systems and i wanted to look at that i didn't get very far before i got put on something else but it's definitely something i want to check out see are these standard d capital let's try these i just want some standard formats let's do capital d see what capital d gives us yeah that is not right okay what was it lowercase d maybe format string in the property we need to be working with here huh yeah that doesn't seem to do anything at all u universal let's try a u let's put a u in here see what happens i don't think this follows any type of standards maybe this format string isn't the property right the property we need there we go ww web consortium here we go what if we just put yyyy well first let me check this see that didn't do anything either let's try why do i only get a year i have a feeling that maybe this this doesn't work yeah that doesn't do anything hold on i'm gonna bring up i gotta chat with my engineer right quick let's see what he says about it i'm like hey is the format string supposed to work on the date picker [Laughter] uh let's put a full date in there like like this [Music] oh that worked okay so that kind of worked i didn't get a year by myself let's try this one so it kind of works okay that didn't work [Music] two-digit month two-digit day yeah i'm looking at this yeah he's like yeah is it not the date time format should be default yeah i'm saying that you know the date time format has a lot of time options that don't make sense however the format string isn't really working with a lot of strings with a lot of options yeah so kind of giving them some examples of what's not working so it looks like according to the web this is only what's like that that didn't work yeah so i'm chatting with him right now what about the culture well the the format string should override everything so i'm gonna change that back here just to show the year i'm gonna send him a screenshot okay so i think this one is you know what that means you know what that means that's right [Music] everything's wrecked molly's miley's all up here with her wrecking ball breaking all our stuff it's ridiculous okay so format string completely broken got that bug in there so dang i'm kind of stuck then that was our last i'm so glad i waited the last to do this one uh because this one really blows uh format string should work should work but doesn't he's he's messaging me right now i mean i could still we could still do this all right try to change the culture of the browser and test it i don't want to do that i don't want to do that because i have all these other i have other tabs like all that stuff so he's saying he hasn't seen a date picker that allowed a format that just showed the year or just just a month i can modify it i just want to know what's supported yeah also to clarify what's with the time well yeah obviously this is not a time picker uh but they're using the uh what's it called i just wrote about it date time formats yeah they're using the datetime format property which that doesn't make sense that's a great point that's a great point why use date time formats for the date picker time doesn't work with this component does it make sense that's a great point like why even have that it should just be date format [Music] unless they're thinking one day they're gonna have a date time picker that will derive from this maybe they're trying to think long term so maybe what he's i'm waiting for his response right now maybe they only support a month year combo it's easier to parse the strings uh so i don't know if you are asked the question often but have you seen avalonia cross-platform ui framework inspired wpf uh i think i have hold on he got his reply he programmed to support different combinations of day month year so month month day day year year day day month month year year okay that's so man so year year month month day day will that work here yep four yeah that worked what is hold on let's try this he's telling me what uh what would go in there oh my gosh okay interesting interesting okay yeah so bandy bandy sc is asking if uh i've heard of avalonia you know i've heard about i don't have any experience with it though avalonia i think this is the one you're talking about right yeah yeah i don't have any experience with this whatsoever [Music] i've heard of it i've never used it though yes i'm saying okay we'll need to document this pretty well all right so he's basically saying uh here actually i'm going to screenshot what he said oh whoops and then we'll we'll cover together so this is what he's saying he's saying i programmed it to support the different combinations of day month here so dmy for example mmd d d m n y y y y y y y y y y for day d double d triple d for month m double m triple m quadruple m for every year okay so that's that's where we're limited any combination of dm okay save that so let's try this then what is what does quadruple d give me what does quadruple d give me eight thursday band esc yep it's really nice replacement for wpf lately there was a jet brains webinar about that one switch from wpf because i need a cross-platform solution now i'm even using your prism with it sweet noise that's awesome and if no one knows the reference to that noise let me just give you a key and peel noise this is a hilarious video called noise oh sorry two o's two o's noise i drive my my uh ten-year-old crazy when i do that she hates it when i do that she hates it okay so what's double d then day uh and what's this what's this give me see i was kind of hoping the format string would work with any kind of like long see the problem is eight april so mmm gives me the what about what about four m's does that spell it out for me this is gonna require some documentation for sure that spells it out what if i space like this can i just use spaces or do i have to have a separator we're definitely going to document this okay okay that's not bad uh what if what about this put 10 m's is that really a thing is 10 m is really a thing oh okay so if i put a common there i can say thursday april 8 2021. right okay no it didn't like my comma it did not like my comma at all can i put a comma here because with the date time format i could get a comma in it does not like commas you know what let's do this date time format date long what's this look like oh no they're parsing it somewhere i was hoping it'd be a string so i could uh get the date long string from it can i put dashes yeah i just message them no commas allowed dashes work dashes will work month tuesday month month month wait a minute gives me april but i only wanted something weird is going on that's giving me april 8th even though i just said mmm see how it says mmm that shouldn't get that's just give me the month the days over here [Music] see this is not working as i expect this is not working as i expect yeah okay this one's troublesome i'm delighting i'm trying to replicate the long date format using a format string but it's not working okay date time format equals [Music] datetimeformats.datelong yeah it looks like this is definitely a buggy here uh format string oh wait format string it's not completely broken maybe complicated or limited no comma support okay see this is what i was trying to do but it doesn't support comma all right so i think we've done enough of the research here to know to know that we're limited on the format string also actually i'ma respond uh to what i'm saying also why do we have time options in the date time formats when we only support dates shouldn't we only have a date format yeah basically i'm asking them about uh this one you know why do we have date time formats it should just be a date format right it doesn't make any sense no sense whatsoever only works with combinations of uh ear ear here you're you're you're you're you're okay only dashes dash slash space period that's the only thing that's supported no comma support okay all right so i think we have enough information to uh let's do something simple let me remove this i'm gonna put our format string back on there oh the reason the date time formats was used because it was pulled from the date time column at another engineer suggestion ensuring the format was already doing those so basically i'm saying you know well if the component does the support time now we're exposing an api that gives the impression we do and it will even display the time but cannot be modified or chosen from the component okay so let's use this as an example i'm gonna take a screenshot that to show what you could do oh wait no no i don't want to do that i don't want to do that i don't want to do that because i'll put this back cut that out let's put this back in there yeah he's always saying he can remove those from the enum without causing an issue because i have my own copy of the enum okay actually yeah let's chat about this tomorrow i am in a live stream now okay so the name i might change i just said uh you know we might change the name of this uh from date time format to just to date format right at the date formats and remove all the time stuff uh then we can actually we can actually add more enums for other other commonly used uh types uh our formats right so i'm going to pick this i'm going to take a screenshot right okay all right we're making progress now we're back so we'll call this date time picker uh what date format okay because we have two different ways to do this and you know what i'm gonna call this date format i'm gonna insert image date format i didn't get the size of it because i went paying attention 300. okay so this is set to long and then the format string let's do a format string what should we do for the format string how about we we flip it around we do like format string equals like year year year year slash month slash day right or no no let's do like a dash day i don't know we could try to make it weird let's make it weird ah that didn't work you can't interm intermix you can't intermix the dashes you can they have to match what yeah that's weird that's okay we'll go with that that little stuff we can work on i'm aware of it so i can uh i can fix those bugs and if you don't want to call them a bug we can say we can add the feature to make the uh the parsing more flexible right isn't that what we want to say all right so this is gonna be date date picker format string and this is 297 so i'll add this in here format string whoops nope 297 and this is actually year year year year slash month month slash day day okay okay that works that will work all right so let's let's look at our text uh now that the input yeah now that the text input has no oh yeah now that text input is allowed in the react date picker it's important that you can format the date that is displayed in the area of the date picker for your locale for your locale i like that better to set the format of the date you have two options right yep two options the date format property oh no undo undo what did i do okay there we go thought i messed it all up okay so the date format property which is an enumeration containing common date formats and in this example we are using the date formats.long oh what i do what i do that long option all right the format string property which allows you to use any combination of d d d d d d d d d d or oh my god this might be hard this actually might be hard to like format m m m m m or your year year year year year year year separated by yeah so maybe oh that's kind of oh i know let's put it in quotes let's i hope i put spaces there this might help like separate it a little bit right separated by either a slash space no no no space slash i think and make more sense than question or quite what you lost me they lost me on that one my friend gustav uh dash uh what else did he say hold on i wrote it down in my notes here dash slash space or period or or period haha i'll put a spin on that i don't need to do that i don't need to do that okay the following example is using the yyyy mmm dd format string okay these these uh index what should i call them indicators these can be used in any combination such as he said day month year month day year or your month date you know what i need to put that i don't need to put that that's fine i think that's fine okay oh i didn't i like to bold my property names i'm gonna wrap that okay all right i think we have something here i think we i think we got through all of it uh you know what column summaries i'm not 100 sure those are gonna those are gonna make it so i'm gonna remove that for now column summaries may or may not make it into the react grid uh to be clear the summaries are there but you have to use an api so what we're trying to do is uh what we're trying to do is create a ui an interactive ui for you to uh more easily apply those oh gustav says d space oh i see what you're saying you're thinking okay hold on let's go back here so instead of doing this like get rid of those like that they make animation 50 ah you know what i'm gonna leave them in there because i want them to you know know they could be used individually you know and actually let's test something one thing we didn't test it's just single i'm just curious what would happen if we did that let's find out shall we uh okay nothing really uh but it looks like that's supported actually actually i think that is supported i need to update my thing i need to update the post again yup i need to update the post again okay actually d single m there that's better uh because you know our our documentation for the component will explain should should explain this much better than what uh in much more detail than what i'm doing right this is just a blog post to tell you what's new and kind of how it works i'm not trying to uh show you like all the deep deep details about it all right so let's save this and uh refresh here and i think i think i think my work for the date is done i think we did it ah stop at the bot already jeez enter behavior got the the gifts showing all the cool stuff selection improvements react date picker setting date will depend on the format string uh no uh what would happen is you could you set the date no matter what i mean the date's gonna be whatever the date is the format string just shows you how it's going to be formatted that's it so for example i can actually input this date any way i want like 1 12 1989 and it didn't work what if i go 20 20 slash the month throw three 12 that should work okay so that works what about what's today thursday uh april 8th twenty twenty one see that didn't work six slash twelve slash fifteen that worked no it didn't work interesting dan says dude you were working looked more like clowning around with a bunch of silly web stuff instead of prison yeah so i was under the impression the format string would only format the data after the date so if i actually set the date in code the format string will just change the way it's formatted that's it but it looks like if you set the string format the the date you enter has to match the format that's what it looks like that's what it looks like uh i'm gonna write that down i'm gonna write that down if using format string the entered i'll say the date entered by text input must match the format or it will not work properly so that may be a bug i like to get the data from a database through api and pass it thick opponent oh yeah yeah yeah yeah so i'll yeah yeah so you can do that right you would just set the selected date right so then we call it value i think we just called it value because you can get the selected date i forget i think i have to do with an event but you set the value equal to this dot selected date now i think we have a date set there it's 120 2020 is the selected date yeah 120 2020 right there so yeah boom so you could do that all you want no problem uh what i was concerned about was entering the date like if i want to enter 2 5 1956. that is what doesn't work i got 2007 907 right so that's the part that uh that gets me but i will i wouldn't i noted that down in our bug list and then what i'm going to do is i'm going to put all of these in a better format and then send it to the team for research to make sure my assumptions were correct when i wrote these and get things fixed because i want comma support dang it i want a comma i want a comma is that so hard all right all right is there anything else we need to do here i think we got it dan says bug list aka undocumented feature list is that yeah it's not a bug it's a feature yeah i really don't like the react component approach the component approach to creating i like the function components now it's so much easier so much easier like a thousand times easier once i started using functional or function components uh like wrath came like easier to me like it just was easier to adopt i guess so every time i see this old way of doing things like this annoys the heck out of me like oh so frustrating now i hear that the component-based approach is still uh has like you could do more things with it has more features but i haven't run into any of those yet not yet okay cool well i'm going to cancel that batch job close that out close that out make sure that's saved because i think i think this blog post is done for now however i'm going to wait to see if there's any more features coming and yeah because these features you're seeing right now in react these are the same features that are going to be in our web component uh product and it's the same features that are in our uh our blazer product uh and technically our uno product and uwp product and when ui product all of these go into the same components that are shared across all these uh different platforms right sweetness sweetness sweetness all right i think that's good i think we had a uh i think we had a successful work day that's just part of what i do isn't it isn't it so much fun isn't that fun you get to watch me work while you work but no joke uh i found a channel that has this this lady or this girl who studies in a library that's all she does she goes she'll sit down she'll turn her camera on and she will study in the library not say a word not say a word just sit there and study for her class for like five hours and she has like a million views on that video oh my god she'll have like 10 or 15 000 people watching her live on her study live stream so i'm like you know what you know how many people would love to watch me work and write blog posts and create content and test components and features log bugs heck yeah just kidding apparently there's 10 of you 10 of you enjoyed that all right everyone can't afford library access uh oh yeah oh what do you mean your libraries aren't free oh it's a joke i got it so there's a delay there's quite a there's quite a delay actually from when i see your chat to win the video actually i'm gonna do a test uh where's my stopwatch i'm gonna start a stopwatch because i've been wanting to do this and i'm gonna raise my hand up and i'm gonna see how long it takes before it actually shows up on your end of the stream ready three two one let's see how long it takes wow boom nine second delay there's a nine second delay between what i say to when it reaches your ears yeah and that's on my side it may take even longer on your side uh but for me for what i saw there was a nine second delay from when i raised my hand in real life to when i saw it in the stream on my uh on my screen so that's uh that's actually a huge a huge delay that's a huge delay so that's why a lot of the times when i read your chat my response probably comes pretty late because i don't see your chat until essentially 10 seconds later so all right well it's 3 30 it's actually perfect stopping time i'm kind of hungry i need another snack because i only got to eat once today so far that really sucked because you know i had early meetings they went through lunch i had lunch and so uh you can watch your own stream you can see but uh all right everyone i want to thank you for joining me today i appreciate you i know that you could spend your time doing anything else that you chose to spend it with me and i greatly appreciate you uh thanks for joining me today love you all and i will see you in the next video or live stream one or the other whichever comes first have a good one everyone you

Channel: Brian Lagunas

Views: 648

Keywords: react date picker, react datepicker, react datepicker date range, react date range, react datetime picker, react date range picker example, react datetime, react components, date picker, datepicker react, react date picker tutorial

Id: nx4PpKxcZt8

Length: 131min 20sec (7880 seconds)

Published: Thu Apr 08 2021