Custom Date Picker in JavaScript & CSS

what is up everybody my name is Tyler Potts and welcome back to day 78 of the hundred data code series in this video we will be creating a custom date picker as you can see here we can create this style up our very own date picker so it has all the functionality of a normal date picking and go forward and backwards in date you can go to different yes and select dates and it will change the foul you off the date picker you go back to 2019 in July and it will remember your selection so if you're going through and you want to come back you'll always remember where you last were so the reason you were to create a custom date pickers because you want to match it to your brand so for example here we've got this blue brand kind of like blue highlights you can completely change this well you can make this look however you want because the whole point is it's custom and you can customize how if you want to change colors you could change the layer you could put this at the bottom here instead of they're just all on how you would want it and actually I'm gonna quickly prove that you can do that cuz I'm gonna quickly move the mumps below two days now if we hit save and we go here you can see it's now at the bottom and I can move it around change it how I want to so again it's completely custom all I did there was change some HTML around literally by just dragging it and dropping it below and it completely changed how it how it looked and it still worked so again it's complete custom graphic dude let's actually create this it's custom date picker so we're gonna start off by opening up a new font folder with literally nothing in my favorite text editor which it's PS code and we'll create a few file to a clay index or HTML wouldn't create main JavaScript and when a crate made or CSS now in the HTML it's very basic markup we're gonna go here we're gonna go in docking work say they picker and now in the body we're gonna have a h1 which says custom we're gonna actually span not a sappin a span which says stay and picker oh that's PC eka picker and then inside there we're gonna have a date picker object so you'll be able to place this anywhere on your site it won't just have to go in the dead center again this is the whole custom thing so you can style it however you want so we need a few elements in it we need these selected date which is gonna have the formatted date which displays we're gonna have a date thing a dates element which gonna hold all our mo what did well basically where we select our dates it is gonna be like the drop-down so we're gonna have a month and in here we're gonna have two arrows one which gonna have previous month and which is gonna say and less than and this Masuka satan next month which is gonna have a greater than sign so and once we've done that we're gonna say dot month like that just so we can use those so and now we need one last thing called days and this where our selection of days is going to go in here we're gonna quickly call our script source and we're the same main dot J yes and we're gonna do the same for these CSS well just so it's all linked ready so we could say main door CSS now let me explain this so the date picker it's the wrapper for the date picker so it's gonna be the whole element you're gonna have to select a date which go display beep - formatted selected date then we're gonna have a dates drop-down so when we click on the date picker it's gonna open up this dates drop down which going to show the month so we can choose the month go back and forwards between months and yes of course as well cuz if we go too far forward in months it will go to December January 2020 for example from 2019 and here we'll say using two little arrows less fun and great event and we're gonna have a month so this month is gonna say like July or August or wife a month it's gonna be in there after that we're gonna have a days which gonna be 31 days which probably doesn't make sense actually cuz some months don't have 31 days but for now we're gonna have favor one days and if you need to you can figure out which mumps don't need 31 days and you can - Doh day those days from it maybe I'll do it we'll see anyway so we've got this date picker and we're gonna go over to the main.css quickly well actually first things first we're gonna run a surfer so you can you can just all you guys have to do is open up your index.html by double-clicking on this index.html in your folder structure and it will open up for you I'm gonna use a Live service sort of refresh as that side do it so as you can see here we've got these two arrows and custom bait Pickers text let's add in some CSS to make that look a little pre so first things first I want to add some resets so I'm just there everything's marching to zero everything's padding Auto zero and the box sizing equal to border box I'm gonna set the body equal to background color not back law background color and we're set to the yellow I always use font family it's gonna be equal to dis serif font we have helfet occur and Sansa yeah sure that I'll do now for the h1 we're gonna say it's we don't need a width I don't know I do that we have a margin our 30 pixels Auto hey oh it doesn't even ear just needs very pictorial equals really we're gonna say the color is equal to 3 1 3 1 3 1 font size is equal to 42 a whopping forty-two pixels and the font weight is equal to 900 you wanted to be black we'll set the text-align:center who want to be the center of our screen - okay that's looking good but if you was to come try this pace it's quite hard to read let's make it easier to read by grabbing our h1 span and setting the font weights are 300 there you go now if this state is now differentiated from the custom and picker words so we've got this but we don't actually see it we can't scream right now we're just seeing nothing let's go in here and write in a day so let's say the 30th off the Ceph of 2019 just so we can see it so we can style it up so let's go to date night a few let's move this over so it's not next to it let's go in here and let's say date picker we're going to set the position to relative because we're going to have some absolute it elements inside of this so its width to 100 it's max width to 320 pixels its height to 60 pixels background color equal to F F F and a margin all of my him a 30 pixels auto to Center it who is their box shadow to Sira pixels free pixels 10 pixels RGB a and we say Sarah Sarah Sarah Sarah point two and then we set the cursor to pointer and the user select amongst we don't be able to select it okay so that is what that looks like but the date picker is cool but the date picker dog dates needs to display no there we go Bears looking a bit better now in here let's say date picker dot selected takes we want to get the is it called select a date select a date we want to set all want to say its width to a hundred percent its height to a hundred percent or a display as a flex item and we're going to justify content center and line item Center all that's not right I'm messing up my keys Center there we go now we are set the color equal to D free on 3 or 3/1 just so it's there there we go we also want the font size on this so they say let me also go sorry I need to zoom in a little hopefully that should help lil few guys on mobile bias the font size 28 pixels just so it looks a bit bigger there we go that's time to look good so I had stacked ring there I will forget to cut that out I saw your waist do so in the date we now want to say we'll go ahead displaying them but we want to set position equal to absolute you want to say top a hundred syncs we want to push it all the way to the bottom I want to say left:0 right:0 so you want it to take up before with and then we want to say background color equal to white first we need to be able to see on the yellow background so now we've got that sword let's add a hover effect to the actual date picker so it looks like when we have four over we can select it they pick a buffer and let's get the background and we're gonna set the background equal to F 3 F 3 F 3 there we go now you see when you have 4 there's a slight tint to it which I think looks pretty good alright so we've got that but now we need to see what we're actually doing so let's add in some JavaScript just to toggle this to show debates let's go into the main KS now in the main J's we need to get a few items we need they can't date picker element which is equal to document dot query selector dot date picker again you could probably add ID should they pick to get these or maybe even add a system where you don't need a date picker where it creates from each day pick you have on screen we also need to get selected date element so we're gonna set our equal to document query selector dot date picker dot selected date we want to get the dates element which gave equal to document dark query there is query selector date picker once again and dates now we want to set a toggle for this so let's have some offend listeners let's say date picker element dot a defend listener click where we're going to say toggle dates with toggle toggle date picker now let's create a function so let's call a functions that's also cool here if n listeners okay so we're gonna write some Allah code which could get messy so we want to add some comments as basically separate F fake it's a toggle date picker is passed through the event because we're gonna need that and let's say if not so actually first week first you want to say date element duck class list start toggle active now let's go back let's refresh in let's click let's have to look at this elephant in our console did we miss something Tuggle date pick a date picker element done quick let's make a log-log test yeah that calls oh we're toggling the class active but we haven't actually added in to CSS for it so let's go down here they pick a dot dates dollar active and we're just gonna say display:block there we go now if we click this you can see a displace what block but if we click on this block down here you can see it it hides it disappears because basically we're still inside of the the date picker and because we've set the ephemeris and to be on the whole date pick it means even if we click elements inside fit it's gonna disappear well we need to fix that so we actually are going to create a helper function so I'm going to create helper functions and down here we're going to basically create function which checks the path so is a function check if n path for class because that's that's what we're doing so we want to say path cuz we're gonna pass through a path and we're set deed selector which is gonna be the class and we will say for let I equal serious we're gonna do a for loop here I'm going to check that it's less than the path so D because the paths gonna be an array cuz it's gonna have a path of elements and we're gonna say if path I so get the path dot class list and path I dot class list dot contains selector return true and then after this which guess a return false so there's go return false if we don't find one in there now what works you doing here is we're checking the offend path so we're we click we get an offend and that gives us the path of where we clicked so if we clicked on an element inside of date selector order date picker sorry it will then tell us the whole paths of what the parents are of every single file from the element you clicked now as you can see we basically loop through every single item in that path and we check that the class list exists so it's not just a text element or like some sort of floating whitespace element so it does an error and then we check the path class list which contains the selector which we're going to pass through so we're going to go up here we're going to say if so we're going to say if check if nth path for class and I will go to e dot path because in this event we're going to pass back a path and then we're going to pass these selectors States because we want to check if the dates if we're clicking on a date settlement and we actually want to say if we're not checking on this so if this - if we don't click on this then we can toggle the class - let me actually console.log dot log e dot paths you can see what this actually logs let's go back and let's refresh now let's click it as you can see here it's given this array with the path of what we click so the top window or the top element it's window then document then HTML body then we get a date picker then we get to select a date and that's what we clicked on now if we click here you'll see what we clicked on all of them and including the date so dates is actually in there and that is what we're checking for here so we're saying so if it's oh we also made a issue here we miss a path dot length so that would have errored so if we go here now we click on this dates area you'll see it doesn't close because we will click on dates but if we click back up here you'll see it will close so that means just so when we click on these arrows or click on the date it doesn't disappear every single time so now we've done that we need to basically style up that that bit there so all all my youtube-channel let's close out let's go back here and into our index and where we've got the month let's just add in july 2019 just because it's what's gonna be like it's going to be Dupree format like that just so we can style it up quickly so inside of the main dot CSS we're gonna go through dates and then we're gonna go date picker dot dates don't month and we will display that as a flex oil good justify content with space between I believe and then we're gonna align items Center we're gonna add a border bottom off two pixels solid hash tag EEE because basically we want to be able to see it now we clicked there you'll see we have this with the july 2019 pre-formatted with our clicky buttons here now we need to actually style up the buttons so what can I say we've got these arrows classes so we're gonna say date picker dot dates dot month dot arrows and we're gonna say width of 35 pixels a height of 35 pixels display flex justify content center a line-items center and then we're going to give them a color off three-one three-one three-one a font size of 20 pixels and then we're going to set up some tough estate so we're gonna say Huffer so when we have fun I'm gonna set the background color equal to F 3 F 3 F 3 and then we're also going to set Y is the old web there okay let's get set the active which could be a background color off 0 0 CA 8 5 2 green and then we're gonna save that so let's have a look what outlet oh we said that her 4 we want as active as after look what that looks like now there we go so now when we click you'll see they go to this green color and we do that so before we had a blue color I'm doing it green this time so you can see also in the main dot we can get rid of that log because you guys have seen how that works so a bit more styling has been done let's now style up the days so although the days and there yet we can still style up the empty days block so we just want to say here a high of 200 pixels the reason we want a height of 200 pixels is so we can sorry my throat was really dry there and the reason we were hard to draw pixels is so we can basically have F it grow to fit this system Hicks I think it's a good height and it looks pretty good again you can style this however you want this isn't the main part the main part is the JavaScript which actually adds the functionality so also go display this as a grid item and we're gonna set grid template columns to be a repeat of settings we have 7 days in a week so each row is gonna be a week 7 one fraction so you take up a whole row so now if we go back and we refer no it's gonna happen but it's all ready for when we do have some days so if we were to add second day so we'll say daytime 7 and in each one we'll just go say 1 2 3 4 5 6 7 ignore the random changing of words there you can see they fit him - 1 2 3 4 5 6 then it ran but for some reason after like bootstrap snippets or saying which is course this the thing is it doesn't actually work when I want to use it there we go so looks like like this let's style up the actual days to be Center so let's go here let's copy this and let's say don't day an inside the day we're gonna basically just display as flex and just Center the item justify Content Center align I am Center and be colored to be a three-one three-one three-one hit save and it's kind of broken but once we have order days made should fix it up nicely cuz if we was to repeat this now 1 2 3 4 and we did that you'll see it kind of works we actually have five days or five weeks there there we go so that's kind of working let's remove the days because we don't actually need this yeah well they're dynamically populate the days now I think that's it for the styling we just need to add a stay selected so we're going to say here dot select it and up here will they say the background color is going to be equal to that green we selected and the color it's going to be actually click it says 3 1 3 1 so that is all the CSS we need right now let's work on the JavaScript so we have a think we need now we now need to set a few things so let's go into our JavaScript we've got a dates element but now we need a few more elements so we'll as a Const month element so the element we had which go display the actual month will say query so please just let me query select it there we go hey picker they pick a dates don't month dot this that's why I think of it away it's not function one we're doing we also need the next month button so we're gonna say would literally grab the same thing here and in here just go say next month I think I added a class for that day lighting yeah next month and this one's got every previous month oh and we need element they're making mistakes everywhere okay that's looking good we now need couple four elements so we're gonna get these days order days elements should I say and we say document query selector dot date picker dot date stop days and one other thing we need is now the mumps so we need an array off each month written like January February I'm actually gonna paste these things it's gonna take too long to do this absolutely on my clipboard over here there we go just so we have all the dates in an array hopefully they're all right no probably not but we'll figure out and now we've got these elements we need to set a few things we actually need to get the current date so we're going to say day is equal to new dates which could guess today's date and then we're gonna say let or this maybe should be in safe day it should be it's a date I mean it's the know will say day we'll call this one today and we'll say date don't get date and that's gonna return us the current day we say let month equal date get month and the same thing for year so we say Y is equal to get full X we want it to be a nine like for example 2019 instead of nineteen now we need to set some different values which could it be select a date which is going to be equal to date we're gonna have selected day equal today so these originally D selected days are originally going to be selected to the current dates day for when we first load but we're name once we've done that we're basically gonna we're going to be modifying nice ones and every time we select date these values were updates that make sense so we need two different dates to compare now we want to get that month elements text content and we want to set equal to months that we're getting this month's array and now we need to actually pass back the month we don't want to plus the year and what this is basically saying here it's we're going to get the month so it's gonna actually return us which month is which should return us July and then it's gonna also add on the year to the string and that's gonna add it oh god I'm doing things and that's gonna add it into so when we click here you'll say says july 2019 if we go and delete july 2019 hit save go back refresh and click you'll see it still says charge Wayne I thinks it's being populated by JavaScript now so now we need to do it so when we click these two buttons that this goes July or goes October etc and when we get to December we click this next one this will go back to January but this is a 2020 so let's do that so in JavaScript let's add some more offend listeners so now we need to get the next month element and say dot add a FEM listener click and let's say what go to next month or yeah go to next month oh good to netmums like that and now let's add that function in it's under here let's say function go to next month we're gonna pass through the event we probably don't need it but we'll just go pass through anyway and now we're gonna get the month and we're gonna increase it so the month we set up here we're gonna increase it we're gonna go say if month it's greater than or less than 0 so if we're going to the next month no sorry if it's greater than 11 sorry so this month will be one by the way so even though the twelfth month it's December 11 this month starts at Ciro's like an array it starts at 0 to 11 so 0 would be January etc so forth just so you know so now we want to say month is equal to 0 and year plus plus so there's going to increase our year and then we go say month dot tex montana and dot text content is equal to month month plus space yeah and then oh we need plus there here safe go back refresh now when we click next use it goes to August September October November December and if we go forward two or more he goes to January 2020 and it'll keep going 2021 now we need to do to refer so let's copy this paces and let's say previous month but and let's say go to previous month so let's copy this whole function paste it underneath and rename this to previous now we need to decrease the month and now we need to say if month is less than zero so if it's less than zero we're going to set this equal to eleven and we're going to minus the year so this cassette to December and minus the year and then we're gonna set this again so if we go back now and we refresh and we go backwards your seat goes down and if we keep going down win 2018 2017 February and below if we go to January you'll see well now if I click one more it's gonna go to December 2015 and forward so now we go forward and back with our dates and month and this actually saying our variables which hold our date a month and increasing them I hope there's making sense so far if not to instruct me a comment and say I talk too fast or tell me why I'm doing wrong and if you join the videos so far leave thumbs up so it really does help okay now we've got that we now need to actually get the dates so days so we're gonna do this by populating the days with a functions and we're gonna get a function that loops through 31 days or how many days there is in that current month so we actually need to know how many days are in each month which I don't so for now we're just gonna say 31 but we could create an array which tells us which month has what date if you go I mean so let's go down here and let's say function actually I just realized think we're starting miss off with this date the face off the seventh but we've set that ourselves here so we actually want to delete this now and hit say for refresh you'll see nothing actually appears in that we need to dynamically create it when we first start this when we start photos paid so under here we're gonna say selected date element text content is equal to a function called format day and we're going to pass through the date here the date object and now we're going to create helper function which will well you can probably guess help us format today so I'll go say function like learn how to spell we're going to say format date which go pass through 8d go be stanford date and we say let day equal d get date say let month equal D get month so it's gonna get the current month off which date we pass through we're gonna say let ya equal D get for year and then we're gonna return day + / + + / + + yeah let's go return the date formatted with forward slashes but we're gonna have an issue but I'm gonna show you what this is so now as you can see it gets us to 30s off the sick 2019 now that's wrong it's actually Jill if you can see up here it's to say the face of July that's saying the sick if you remember I told you this month needs to be plus one because this actually is one behind the month if that makes sense just like an array as I said so if we go back that's now safe and which correct but you'll see it's not formatted correctly it's got 30 off the set of 7 in self SERO second because we want it to be formatted with at least two values and that's going to be the same with to date so we're gonna stay here if day is less from 10 or we're gonna say day is equal to 0 + day so that's just gonna append the Citra to the front and we're going to copy this and change all of this to month so now you'll see we have four zero seven and now that's formatted a bit better okay now let's now let's populate the actual days into the table so we're going to create a function but yeah we're gonna start by creating the first function which is gonna do it at the start and we're gonna call it so this could be the most important function pretty much we wouldn't have function it's good called populate dates because we want it to populate all the days in the days array and we're gonna set the days element dot innerhtml equal to nothing because every time we run this we want to clear the current days in there because every time we click next we're going to re-render the days so we're gonna say for let I is equal to zero oh it's less than 30 once we're going with a thirty-one days in a month but again you can dynamically change just depend on which month it is so you could do a check you could say if month is equal to February for example that'd be free or no one baby - if month or note b1 I don't know it would be one of these if equal to February then the amount days is equal to 28 only 28 days in February maybe we'll say amount of days I think that makes sense I think that actually makes sense but I don't know nowadays and we're gonna set up here let amount today is equal to a 1 so this is just one example but you'll probably need to do it for a lot more months so you could probably set up a switch statement or something or even actually have an array which has all these in but for now I'm gonna do it like this so I'm just gonna say February which should be the first month because remember it mumps starts 0 / January February March etc so we're gonna take the month is equal to 1 if it is and the day is equal to 28 because then only have 28 days and now in this loop we're gonna say Const day element no not date element day elements equal to document dot create element and we're set to add if we're gonna say the day element dot class list dot add I'm gonna add the class off you guessed it day because it is today we're going to say day element don't text content it's equal to I plus what because basically what we're doing now is we're saying we're going to get the I and which is going to be equal to 0 and we're gonna plus 1 which means if it's 0 we're gonna plus 1 which gonna be day 1 2 3 4 all the way up to the amount of days which makes sense that's gonna be the correct day we're then gonna say sorry I had sake I'm afraid we're gonna say days which days element dot append child day element so now that should populate oh we need to call this so let's go up here and underneath this we say populate dates now as you can see it's populated dates we can go back but nothing to go change because even though we're changing the value here we're not actually a dating this now we need to update it so we're going to get this popular oh god there's populate Bates function and only go to next month we're going to call populate dates and go to previous month we've got always going to populate dates so if we refresh and we go next you won't notice until we get to February but when we get to February there's only 28 days I know it kind of looks weird because we're using grid but we can set this up to be a static high instead of breaking the height but you'll see that we only have 28 days in February so it's rear-ending the page now or the dates should I say another page which is good that means it's working because these sort of things will increment and these are the popular dates so now we need some a few more things we need to actually say oh why am i doing we need to be in this thing here and we need to say before we actually append it we won't say if selected day is equal to I so if the current day is equal to I and the selected year is equal to year and selected month is equal to month then day element dot classlist dot add selected so what this is saying here is we're saying if they all that needs be they +1 and we'll add that around those so we're gonna say if the day so the day which is selected in me I am which is the FIR if I'll look you can see it happening that it's equal to the FIR if so if we're in Fae first array so the 31st or the 30th day element and the year is equal to the current year and the selected month is equal to the current month then we're gonna select it so that's going to select it now we need to be able to click on earth elements to change them so we now want to create an offender list this is a day element da-ad offend listener and we will say click and will miss a function which basically gonna change today when we click on her for dates so so far we've just got this which is selecting the current day which pretty cool but now we want to say selected date is equal to a new date and we're gonna pass the year with a - a month plus one because when we're actually constructing a new date we actually need to get we're actually the month actually starts from 1 and not 0 so unlike how the date returns it which is weird it actually needs to be +1 we're just gonna get the correct date and then we're gonna say - plus and then we need to say I plus 1 we're just gonna get us debate which we're selecting we don't want to say selected day is equal to I plus 1 we want to say selected month is equal to month and we want to say selected yeah it's equal - yeah so if you remember we're actually updating all these foul use when we click go to net previous month will go to next month so this is where this state has been pulled from so when we go to the next month we're going to set this select from we when we click on add actual day we're gonna set the selected because this will be the actual month or date we're selecting and we're gonna sell it equal to the current month for it and then we're gonna say selected dates element dot text content is equal to format date and we're going to say selected date we want to update that why what the actual selected they say it's weird I'm gonna say selected date oh no sorry selected day element data set dot 4 dot day set Dolf value is equal to selected date and the reason we're doing this is so if you wanted to you could easily get the foul you or the current date which you have selected from your element and I'll show you how once we're done and then once we're done we want to say populate dates so what this populate data it's going to recall this date so when we click on an element it's gonna recall this to re-render the elements so they correspond correctly which can update be selected so now if we refresh and we go in here and we click free you'll see this changed and I think I'll change bit now if we go to the next month all because when we click the fourth you'll see now it's on the 4th of the 8th of 2019 which correct so let's go to a different year we'll say July 2020 and let's say the 19 it's gonna be the 19th after 7th 2020 and now that's updated so that is how you create a custom date picker but first let me show you the data value which we set over here so this selected day we actually want to get this as well and we want to call it when we first format a day there because what we want to do is make sure we can get this date no matter what so now we could actually use this day to format a enough a date so if we let's say had a forum and we wanted to submit the form we could easily get that value from this data set so this gives us the date as a day time string there which we can just add straight in which is awesome so now if we go along are we to led forth again you can see this gets updated so we say 26 your site says august 26 down here which is absolute awesome so I hope you have learned how to create your own custom date picker you can start it up smudge you won't always see some really crazy custom ones won't you'd send me some screenshots ok guys thanks for watching this video if you enjoyed it and don't forget to leave a like if you want to see more then hit that subscribe button and if you want to be the first person on the scene then don't forget to hit that notification bell to be notified as soon as I put a new video live if you got any comments or feedback then drop it in the comment section below I especially want to know if I'm talking too fast if I'm explaining things wrong or anything like that so please let me know it doesn't hurt my feelings I really do you appreciate the feedback often that guys thank you for watching this video and peace out [Music] you

Channel: Tyler Potts

Views: 46,162

Keywords: HTML, SASS, CSS, HTML5, CSS3, JavaScript, Tutorial, app, website, date, js, api, web app, pwa, vanilla

Id: wY2dao1hJms

Length: 45min 30sec (2730 seconds)

Published: Tue Jul 30 2019