Easy Custom Time Picker in Javascript - How to tutorial

what is up everybody my name is Tyler Potts and welcome back to another video on a hundred days of code and in this video we're gonna be creating there's custom time pickers if i refresh now you'll see is updating with the current time the time is 10:37 right now and the update so this is what one of the features we couldn't change the time let's say we want it to be 10:00 in the morning 10:30 in the morning there we go that's now 10:00 fade or we can increment it by using these up and down arrows we can also increment these with the up and down arrows but if we go over for example 59 seconds so if we go to a whole minute in seconds it's going to update the hour and if we go to all the way up within the hours and we go to 23:00 a loops background to cero and that's because obviously after 11 after 23 which is equal to 11 o'clock at night we go back to 0 which is equal to 12 at midnight so forever dude let's create this and I feel really sumed in on that screen that's a bit better ok let's let's head back into the code I will head into somewhere we can create some code and get started so let's move over here and over here we're gonna write feel highlight for me there we go we're gonna write code dot which with PS code is going to open up my text and so you can open up your favorite text editor and if you want we could we could I'm not going to let's go add them together but for just leave out so we'll go create new file we were crazy index dot HTML like we do of every static website and we're gonna use Emmet to create boilerplate if it will work hello oh god why are you being weird for okay now that's done we're gonna write in here a time picker and then gonna link a style or Mae dot CSS stylesheet which were gonna create in a minute and then we're gonna go down here and we're gonna write script source I'm gonna say main dot J s which were also gonna write in a minute now before we write that we want to quickly write some marker we're gonna have a h1 which says custom or just custom span time after the span picker and we're gonna have a diff or a div with the class off time picker and in here we're gonna actually have a data time which is gonna be the time value which you can extract to use in your date and time in JavaScript and act is actually the file you're gonna return in there so we've got day in time picker all set let's create our CSS so we're gonna say main dot CSS and we're gonna quickly write some basic code which basically I like to write so this margin:0 padding:0 and box-sizing border-box see some ID resets I'm gonna set the body oh if I can just type back Oh God look at this background color to my infamous yellow and we're going to say font family see our and sans-serif now so that's that's all good but I'm gonna quickly show saying so I'm gonna right in here input type of a number because we're going to use these so if we go back to the code we were afraid our we need to start a surfer so I'm gonna I'm gonna press command alt ctrl alt T to open up my integrate terminal if it's code and I'm gonna write why am I gonna write I'm gonna write live - surfer space dot to open up this current directory as a sofa no yeah now you see here we've got this number picker obviously we can't type text and there we can only put numbers in but it also shows this really annoying up and down arrow which we don't want we want to create our own custom one of these that's the whole point so to create a custom one of these we need to actually hide that and to hide it we need to say input so this is a work fresh thing but it works for Firefox and I believe a Chrome and Safari so we're gonna say WebKit outer actually there spin button oh it's gave me an extra coal on there oh and we're also going to say input type equal to the number and we're gonna say WebKit in a in a spin button and we're gonna say here - WebKit appearance none margin zero and then we're going to create another input with the type of number or sorry type equal to number and we're gonna say mas appearance and we're gonna say text field so this is gonna make it act like it was just a basic text field and that's what we do so if we go back and we refresh you'll see there's no longer and up down we still can't type in lettuce but we can't oh how white is eat oaks you can do to eat to currently because that stands for something I mean you can't I'm pressing all the FLS it's just for some reason he is the only one you're allowed in there I guess he's a number everybody who knew yeah so let's delete this one because we don't do that let's write up some more markup now so in here we're just gonna say our because it's gonna be our value and we're gonna have two different things we're gonna happen our up and which could just be a diff like that and an hour down so he's going to be our arrows which go up and down we're gonna have the input of type number that's completely wrong if new input of like number hit tab and we're gonna remove the name and ID for now we're gonna set the class equal to H R which stands for our and we're gonna say foul you equal to 0-0 what I'm gonna create a separator which is just gonna have a semicolon in it and then we're gonna have create a class called minute which can obviously have the same stuff as hour but minutes a min up min down and also input of type number with the class of min and we remove that and and we're gonna say value is also equal to 0 Siri who let's go back close refresh and this what we've got let's style it let's go to main and our CSS and we want to say h1 font size 42 pixels quite big text-align:center text transform uppercase if you want to be up case margin 30 pixels 0 pixels and a font weight of 900 you want to be black and then we need the h1 span which is just graphic font weight of 300 it's safe go back as you can see that's looking good let's continue on let's now style up the time picker so the most important part of course time picker and here we're going to display it as a flex item we're going to justify the content with space around and we're going to align items Center what I'm gonna say width equal to a hundred percent max width to 200 pixels and border background color sorry it's gonna be a every f3f free so really really really like great border radius is 8 pixels and we're gonna for that box shadow that good old box shadow to make things look like a slightly floating off the page and it's gonna be fairies so does it really only work on white backgrounds 5 3 5 6 5 a that's gonna be a curse the text we're gonna say font size equal to 42 pixels for each one fun weight of 700 is a laugh code right here and finally we want to say user select none hit save and go back there we go we're getting there what kind of gain there it's not it's not complete yet as you can see we've got the separate eraser well a separator and the rest it's slowly getting there so now after a time picker we're gonna say time picker dot Alex we want to style up that our section and we also actually want to style up all hello hello weeding dot time picker minute because we're gonna style up the minute - we set the position people to relative the min width of 60 pixels the text-align:center a display or flex a justified contents of stretch and a line items stretch now you're back oh good perfect really change your finish looking worse also I'm pretty sure this should just be margin:0 auto let's say for now we go pits in the center I forgot to do that to start my bad let's say time picker dot our dot how and then time picker darn minute dot min so again for this one we're gonna set the background equal to no member these are the input fields that's not how you do at Tyler these are the input fields we're gonna set the font size to 42 pixels the appearance to be none a border to be none outline to be none oh not in the minim no and display this as a block elements with a width of a hundred percent although that's what blockhead let's do anyway I don't know write that in next slide said to add foot verbally Sara Sara saver I don't know how to pronounce it I always do this and now let's go back and there we go we've kind of got a good looking already time changer so we can still change these times although that's completely we need to fix that we need to add some foundation well that's pretty core do you like to look this already let's now mess around with the arrows so we want to say time picker you know what though we still need some height on our pretty sure we need some extra height but for now wait there's a time picker dot our dot our up we'll duplicate that and we say our down with duplicate down we're going to change this to minute and up over minute up and we're gonna say minute down and now in here we'll say position absolute left 50 percent transform translate or X of minus 50 percents we want it to be dead center we're gonna set the width the 40 of your favorite pixels high of 20 solid pixels a border left so this is gonna create an arrow effect so now we're gonna say border left of 20 pixels solid transparence we want to hide 20 pixels on the left we want to say border right and we're gonna do the exact same thing 20 pixels solid transparent with a cursor a pointer now pretty sure that should now look did I even add a background down there so hurt so we've got all those set but now we need to set after stress we need to set the the actual bottom so we need a the actual arrow part needs to era our up and also min up minute min up and we want to say top - 10 pixels because we want to be slightly down for the bottom border bottom 20 pixels solid hashtag AAA hashtag and there you go we've got up arrows we need to fix some padding around this but I mean we've got her perros let's do it same for the down so let's get this let's duplicate let's say this time instead of mmm oh yeah it's a portable once I bought a top 20 pixels there we go we've got two arrows yay they need to be styled a little bit I've just said that as what happened they used to be bottom or not put and bottom refresh refresh they're safe I did did I do it right border bottom wait I need to be down and that needs to be down there we go solid now we need to add some padding to our actual time picker I feel like I missed it here but also padding off what we'd say in 25 pixels all around there we go we've got a bit of padding actually maybe not on the left and we'll say 15 pixels yeah it looks good I like it that's looking good so with that being said we want to actually copy one of these and we're gonna say this one I want to go down there yeah we want to say boop boop boop boop wait I'll forget to write the whole patch down it it has me writing stuff animating going down there's a border bottom color of five three five six five a and we say board for the top color refresh and there we go we got a lil little highlight effect so you can see what you're doing you know in your High Line you know when you're ready to click now that is the styling done for that so we can close that well it looks good right that's all you need you can style this up however you want again this custom there's a custom time picker you can style this up with whatever colors you can change the layout you can have it this on top and this underneath or with ours separate whatever you want the main thing is the JavaScript which we're about to write so let's create or not you outline give me my time picker we're gonna say main dot J s now obviously there's a few things we need to get we actually need to get better G I'm going to zoom in slightly I apologize for not zooming earlier and I say kant's time underscore pick element I'm going to set that to document dot query selector and this is gonna be dot time picker because we're gonna get the actual time picker element we need the whole thing we're gonna get the our element there's going to be document query selector and it's gonna say dot time - picker minute dot our sorry our dot hour and then we're gonna do the same for min so we say min minutes and we're down here and change this to me I think us get the our up arrows so we'll just set that equal to the same thing with a query selector and we say dot time - picker dot our dot HR up let's do a save for a chart down now let's duplicate this move for down call this minute this a lot let's be quick about it minute min let's duplicate again and this time call it min up there we go now we've got a whole lot of bugs we in all the things we need to do this so first things first when we come here you'll see we can click up or down but just nothing so you want to increment it so let's add that functionality in right now so let's create some event listeners and we're gonna say our up door a defend listener click and we're gonna say our oh that's going to be the function name we're gonna go do the same for Howard down and then we're going to do the same for min down and we're going to do one more for min up we're now going to create the out up function which we're gonna say function hour and score up and we're gonna say our oh wait actually saying that we need to create some more elements we need to say let the hour equal for now 0 and we set let minute equal again for now 0 but we're gonna set these to the current time once we actually finish this so we'll do that the end so they say our up I'm going to say our plus plus because that's what we want to do we want to increase every time we click we will say if our is more than 23 our is equal to Sirica we don't want it to be more than 23 then we're going to call a function called set time or not timeout set time which we need to create we're then going to duplicate this and create our down our down can you guess what we're gonna do here we're gonna - it good yes and we're gonna say if this is less than zero hour is equal to 23 so we now need to duplicate by for these go Boop I'm gonna set these down one not like that that's my bomb one there we go and this one's going to be called minute up this could change the minutes soo also I had to sneeze I apologize I'm definitely gonna forget to cut out here and we're say if it gets to 59 minutes equal to zero but our is plus plus you want the hour to go up if we over if we go over 59 I think that's right if that minute it's more yep that's right so now we want to say minute down minute down and we're going here we would say minute - - and we say if minute is less than zero I think that's gonna be right at the time it's equal to 59 but minutes is gonna have - - so yep that seems about right and then we're gonna set time so what we're going to do is create a function down here called function set time and what we're going to do in set times actually set the time so we're going to say our underscore element dot fowl UK it's an input and we're create function called format time and we're going to pass through the our we'll do the same here we say min element is equal to the minutes but formatted and then we say time and score picket element dots dataset dot time that's not what yes well that is at dock time so we're referring to this what we set here and we'll just sell it equal to format time hour plus semicolon plus format time minutes or minute and that is going to format our time for us and that's F think we need for that set time so we need to do is update stuff okay that was a lot let's have to look always right so everything looks good except from we need a new function for format time and this is a super easy super easy function will just say if x don't forget we'll go here pass through time yes less than 10 we want to set time equal to 0 plus time so this stops the value from being something like this so if it was midnight 12 for clock it will just say that is f saying double 0 because we want it to be double series we want to be at least double digits and then we're just going to return time and that's it that's all we needed to do so now let's go to index note let's go to our actual time pickets let's refresh and let's click up and as you can see it's already changing so we can't go down we can on this one so if I go all the way down Boop a roof refreshes but if some reason this one isn't refreshing so I'm gonna have to look at that actually this one isn't changing so we have our first issue I assume I know what I've done wrong if I go to the minute we go minute plus plus minute it's less than 59 then minute is equal to 0 no if a minute it's more from 59 we sell it to 0 and our plus plus and then minute down to this at minute - - and if minute is less fancier I was an hour and then that so that looks right so min element did we call it min element yeah we did is that right it looks right did we call it right in here class min yes okay debug time let's figure out I assume if we open up the console that's gonna be an error please ah here we go and I add eventlistener of null and I'm shaming this on the minute add offend add offense I see what I don't I think no no that's right somehow oh I see what I done see where I've put min here that needs to be minute just a query selector issue that's refresh and we can go up hey no yeah bad back down and boom oh oh now we've got some issues minute down our oh that needs to be min is equal to 59 now this see this what I mean wait why my - in - in minute and this nice be our - oh god we add that completely backwards now if we go up one here but we go down BAM it's gonna take us down up again there we go that's working now now we can change this but we can go way too high we can set this to way if we want so we need to create enough for event listener to listen to both the our element got a defend listener change because we want to listen for a change and then wouldn't call our underscore change just our underscore change and then this one will be men which will be minutes change so we're gonna go down here and say function hour and score change which go half an event pass through and we'll just go say if Y target da value so to so this the target so this value is less that or it's morphin 23 once there yup target dot value equal to 23 because that's the highest we're allowed to go what Inc I said else if e dot target dot value is less than zero e dot target dot value is equal to zero but we actually need to do a string zero double because we want it to be four mana formatted with two zeros and we're literally gonna do the actually and then actually yes we now say if dot e dot target dot value is equal to nothing then we're gonna say e dot target dot value is equal to format time our because we're doing the hour then we're going to say our is equal to e dot target dot value there we go now if we literally copy this exact code change it up to be called minute change set this if it's more than 59 we're gonna sell it equal to 59 if it's less than zero that one can say the same this one when to set equal to minutes and over here we would say minutes is equal to that so that should cater for now if we go in we refresh and I change this to let's say a hundred you'll see it puts it down to 20 freaks that's the highest we can go here I put 100 it puts it down to 59 if I put minus 10 puts it to zero if I put minus five puts it to zero if we put nothing you'll see it puts it to apparently free series I have to fix that if I delete that it puts it also to fresh air hose what did i do what did I do so if target value is equal to nothing then we're gonna say format the current minute Oh cuz that was already like that it's adding oh that's a saucy wall let's sell it equal to twenty twelve and that equal to Fey and now if I delete in I click back a big up so it just keeps us whatever it was but for some reason if it's I understand because here when we format time if it's less than ten which nothing is it's gonna add plus one everything as much we can really do about that right now but if you can fix it then go ahead I haven't catered for this I didn't foresee this bug but we've got everything working now except from when we refresh it always starts at zero zero but that's not the time it's 1106 so let's go manipulate some time so at the top here we're gonna say let D equal new date and then where we see our is ad dog get ours and D get minutes and it's that simple as it's safe go back and refresh refresh refresh stop showing me up our o and then we need to say set time because we need to actually make sure the time gets set there we go so now it is 1107 so guides I hope you enjoyed this video if you did don't leave a thumbs up if you want to see more then don't forget that subscribe button and if you won't be the first person on the scene don't forget here that notification bell other than that guys if you have any comments or feedback on this video don't drop it in the comments below if you have heard anything else and jump in our discord surfing come chat to us over there other than that guys I hope you enjoyed the video next I just want to quickly mention that in the next video I hope for your Monday we're going to be creating a Trello clone let me if that's so qn tress in or if not and we'll see that we'll be doing the trailer clone in familial JavaScript then we'll probably do a live stream some time off me rebuilding it but in few J s or react Jess or both would do both maybe Oh for all three will do few reacts and spelts and angular will do all of them just let me know what you want okay guys thank you for watching this video and if you enjoyed it don't forget to do things I said previously thanks everybody and peace out always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till I finally prove it never listen to the nose I just wanna keep moving keep my head up when I hacked head up that's a fact never looking back gotta keep myself in check keep my head up staying strong always moving

Channel: Tyler Potts

Views: 7,037

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

Id: Vt1K8EZ2Aag

Length: 31min 46sec (1906 seconds)

Published: Fri Aug 02 2019