How to Build a Custom Time Picker with JavaScript Modules (No Frameworks)

hey how's it going guys my name is dom and today i'm going to be showing you how to build a time picker using html css and javascript okay so this solution today is going to require no external libraries or framework we're going to be doing it all using vanilla javascript okay so right here we have the time picker so if i was to click on this input field we can see we get this custom time picker so i can go inside here and i can say for example something like 7 50 pm and it's going to update the input field right there okay so of course you can also change the am and the hour so all this right here is relatively straightforward to do also keep in mind that it's going to require a little bit of javascript knowledge so if you're an absolute beginner you may find it a little bit difficult to understand some of this video but if you got some experience you know the code should be okay for you to understand okay so going inside this tab right here let's begin from scratch to create what i just showed you also keep in mind that the source code for today's video is going to be linked down below if you want to download and follow along so going inside the text editor right here we can see i have this input field with a type of text okay so we're going to be using this input field to test our time picker i've also got a class here of time pickable so basically you're going to want to add this to your own input fields as well and basically whenever a class has time pickable it just means that when we actually write the code for the time picker it's going to look for this class and it's going to apply and allow the time picker to work on basically any input fields with this with this class it's also important that you make these input fields read only now obviously it's going to be up to you but if you want your user to only be able to enter in values using the custom time picker have read only on your input field okay so first off i'm going to be showing you the html and the css for the custom time picker before moving on to the javascript all right so going up inside here let's create a new style tag okay then dropping it down here now we're going to be basically creating the html for the custom time picker so it's going to be represented using a div with a class of time dash picker okay now also keep in mind that all of this html right here which we're going to be writing um is actually going to be generated using javascript a bit later on so this is this is just here for now so you can actually see what css is going to be applied so inside the time picker container we can have a select drop down with a class of time dash picker underscore underscore select okay now we can quite easily remove the name and id we're not going to be needing those two hopping inside this select we're basically just going to have a bunch of options so we can say right here an option with a value of 0 1 and the actual display as 0 1 also so this first select here is going to be the hour drop down okay now you're going to want to basically duplicate these options all the way down to 12 if you want to but honestly it's probably not necessary because we're only going to be styling up you know what it looks like and and we don't care about what's inside of it at this point in time so you know what i might actually just remove both of these and just have this singular option just so we can see what it looks like let's do the exact same thing down below this time it's going to be for the minute so we're going to begin the minutes at 0 5 or 5 minutes inside an hour it's also important that we add a colon here just to say you know the hour colon minutes okay then dropping down we can have a second or so a third select and this one here is going to be am you know or pm so quite simply pm and then sorry i am then p.m just like that so if i save this right here go inside the browser we're going to have something like this so now let's use some css to make this right here look like what i showed you in the example okay cool so going inside the css we can begin this by targeting the time dash picker class so the first thing to do here is going to be to make this a position of absolute now this right here is not going to do anything you know right now but it's going to be put in use when we get to the javascript later on basically we're going to be using the position of absolute to move the time picker so it appears under the targeted input field okay we can also display this right here as an inline block this is going to ensure that we don't have you know the time pickup spanning the entire width of the browser we can give this a padding of 10px a background of a light gray and a border radius of 6 pixels just for some rounded corners if i save this go back in the browser we're going to get something like this as we can see the time picker is appearing right next to the input field now of course this is going to change later on when we get to the javascript because like i said earlier we're going to be positioning it just below the input field when the user clicks on the input field okay moving on now to styling up the select drop downs we can go back inside here and we can just say time dash picker on the next line here time picker underscore underscore select so when it comes to the select drop downs firstly i just want to remove all of the default browser styling in order to achieve this we can use the dash webkit appearance and we can just say none right here so webkit appearance set to none then we can do the same thing this time saying moz appearance then lastly we can say appearance and then make this none so essentially right here with these three properties we're covering most of the common web browsers in order to remove the default styling of the select drop downs which means if i go back in the browser you can see now of course it looks a bit different without the drop down arrow on the right okay going back inside here we can also apply an outline of none just to remove the outline when the user clicks on the drop down this is optional and you could argue that you want to keep it in but it's up to you guys you know you can also sorry you can always add an extra border later on to give the user some feedback that they're actually you know choosing a drop down field dropping down we can give a text a line of center and a border of one pixel then solid then we can say a light gray being triple d we can give this a padding of 6 pixels top and bottom and then 10 pixels left and right we can also add a border radius here of 6 pixels just like you know the parent container okay and we can also let's just go back inside here and just check our progress so we can see it looks like this currently so lastly i just want to change the background and ensure that it is going to be in fact white in all scenarios and give it a new font and a cursor so going back inside here let's apply a background of white you know as we can see by default the browser is going to make it white but just to make sure we're going to set it explicitly right down here let's give this a cursor of pointer as well as a font family here of hebo and then sans serif so of course guys you can pick whatever font you want inside here if i go back in the browser we now have it looking something like this so we are now done with the css okay so now let's have a chat about the javascripts so the way the javascript is going to work is basically we're going to allow the javascript to generate a time picker whenever the user you know brings focus onto one of the input fields okay and then of course they can choose their time then once they've chosen their time and they've clicked away from the time picker we're going to basically remove all this html and go back to the way the input field would normally be so how is this going to work exactly well going inside the sidebar here let's make a new file called main.js so this javascript file right here is going to be sort of like your main controller for your application so i'm sure you guys have one of these already in your page if you don't you can create one right now but it's important that when you are importing this this file let's just go back inside here so if i was to import it right now just make sure you have if i go main.js make sure you have a type of module okay so this right here is going to allow us to make use of the es6 import export syntax okay so speaking of that from inside this main.js we're going to be importing a bunch of code which handles the time picker and makes it work this is going to be stored in an external javascript file so let's make a new file here called timepicker.js and inside here this is where all of our code for the time picker is going to be stored okay now how do we import this file into this main.js well we can say right up here import all as time picker from then dot forward slash time picker dot js so now you know once we actually get to writing some code inside here we can access it using time picker inside this main.js file okay so we're going to be getting to this a bit later on but for now you can just include this first line here to import the code from the timepicker.js so now we're basically all set up in that the main.js is included inside the html so we can now begin working the javascript and get everything working okay so what is the first step for the javascript code well going inside the time picker we're going to be writing a function actually we're going to be writing plenty of functions here so let's begin with the most basic functions and these are going to be four functions so we can say first off function get time parts from pickable okay so this function is going to take in a time pickable so remember when i said time pickable earlier i'm referring to this input field right up here so basically you're going to pass in an input field into this function and then it's going to return you the time parts for whatever value is inside that function sorry inside that input field okay so if i drop right down here and i can say const example time applicable is going to be equal to document dot query selector and pass through here a class of time peakable so basically example time pickable is going to refer to this input field right up here so if i was to now say console.log example time pickable actually my mistake it needs to be get time parts from pickable pass through here the example time pickable i now expect this to give me a bunch of values i want i want the hour to be for example something like let's just do 12 okay i want the minutes to be 45 and i want the meridian value to be rpm so basically i want 12 45 p.m from the input field which means if i go back inside here and i give this input field the value of 12 45 pm i expect this function to give me 12 45 p.m i hope that made sense but if i go in the browser now and go inside the console we can see of course we get hour minutes and meridian of 12 45 pm so basically we need to write a function which takes this value and then gives us everything inside here okay i may have actually taken a bit of time to explain that i apologize but i hope that makes sense now but how are we going to go about how we're going to go about getting this string and then converting it into an object like this so we can use it in the javascript code a better question is why are we doing this well let me answer that first the reason why we need to extract the time string into this object right here is so that when i click on the input field right here i want the current value of that to be represented inside my time picker so this time picker needs to know each individual part of the existing value inside here so let's do that right now okay so going inside this function right up here the first step is going to be to actually write some regex so we're going to use regex in order to achieve this so we're going to say const what's the chord pattern so const pattern is going to be equal to something like this so let's just put a simple time string for reference so if i say 12 45 pm right up here it's going to have a couple of parts so we're going to mark the beginning of the string here then the end of the string okay then we're going to say inside this capture group we're going to say any digit so basically one or more digits we're going to try and find then we're going to say colon to find our or match on our colon there then providing more digits so once again backslash d plus for any number of digits and the reason why we're using of course these groupings is so we can actually extract those values once it has been you know searched for then put a space to represent our space right here then we can say inside here either am or pm okay and that is our regular expression or sorry that is our pattern for of course finding those individual parts from the time string so how do we now extract those very straightforward if i drop down here we can just say const then we're going to say hour minutes and then meridium inside square brackets here so we're going to be using what's called array destructuring here it's going to be equal to now array dot from then use time pickable dot value dot match okay then pass through here the pattern so what's happening right here in order to explain this i'm just going to remove the array destructuring here and just replace it with what's happening right here let's remove this and replace it with results okay so what is array from time picker sorry time pickable.value.match then pass through here the pattern what does this match method give us on the time pickable value well let's console.log the results in order to find out save this go back in the browser and we can see we get this right here so basically by using the regular expression it is found a match and it's given us each one of those separate parts that were that were inside the the brackets here it's extracted them into these array elements so at array element 1 we have 12 then we have 2 at 45 then 3 it says pm okay that of course comes from this right here so this first value we don't want we don't care about the whole thing we only want one two and three so going back inside here we're going to say dot splice then pass through one this right here is gonna remove everything sorry it's it's it's gonna remove the first value from the array leaving us with those three back in the browser we now only have the three right here then if i go back inside here and put back the array destructuring hour is going to be the value inside the red index 0 minutes at index 1 and of course meridium at index 3. so we have those three values extracted which means now we can simply just say hour then we can say oops then we can say minutes then we can say meridium so basically it's just saying hour is equal to the hour minutes equal to the minutes meridian equal to the meridian so now if i save this and go back in the browser for our console log down here we can see we get 12 45 pm now of course if i go inside the html and make this value something like 10 let's just do 10 28 am save this and go back in the browser we get 10 28 am inside here so we made the progress right there and we've actually extracted or converted a time string into those separate values all right cool so now we have this function complete the next one is going to be to essentially we're going to be grabbing our time picker right here and then getting each one of our drop downs okay so it's going to work in a very similar fashion we're going to be returning the hour meridian and minutes this time for the actual drop downs themselves so i'm going to say right down here function get selects from picker this one here is going to take through a time picker okay so now also keep in mind guys before i continue obviously all of these functions here are going to have some sort of use when it comes to the main core code for the time picker so bear with me as we get through each one of these functions cool so we got this get selects from picker this one here takes through a time picker not a time picker bull okay so a time picker refers to the whole div right here with that class of time picker so let's get an example time picker okay this time grabbing our time picker class and let's log out the result of get selects from time picker passing through the example time picker so for this one once again using a very similar method of array destructuring we can just say const hour then minutes then meridium is equal to time picker dot query selector all then pass through here the time picker underscore underscore select class so i'm sure many of you guys are used to or are familiar with the query selector all method basically it's going to give you an array like structure containing every single select drop down inside the provided time picker so of course here we're going to get index 0 the hour drop down the minute drop down then the meridian drop down so if i was to return return right down here we can just say hour minutes and then meridium once again save this go back in the browser and we can see in the console we have all these three properties here hour minutes sorry hour meridium and minutes referring to every single select drop down so of course we're going to be using this function here to extract the values from each drop down when the user you know chooses one okay so that is the second function complete the next one is going to be called function get time string from picker okay so this function is going to use directly the previous function which we just wrote and it's also going to take through a time picker so as the name suggests this one here is a bit of reverse from the first one or it's a little bit similar where essentially we you know we're getting a time string from an existing picker okay so if i was to pass through um right down here so if i say get time string from picker pass through the picker once again by default as we can see it's 105 am so i just want to get basically you know 0105 am inside the console you know when using that function okay so uh going back inside the javascript it's going to be relatively straightforward we can just say const selects is equal to get selects um from pickup gonna pass through here the time picker and we can just return here using the javascript template strings the back ticks neither one on the keyboard and we can now make use of template literals which means i can just say dollar sign then curly braces and put an expression through here i can just say selects dot hour dot value then say colon then i can just say selects dot minutes dot value remember this selects dot hour refers to the hour drop down same goes for the minute drop down right here and we're just getting its value okay then we can just say space and do the exact same thing for the select then meridium then dot value so now if i save this go back in the browser we get 105 am in the console when making use of that get time string from picker function okay so we're very close to completing all of the essential basic functions the last one here is gonna be called function number two option okay so this right here is gonna take through a standard number and it's going to be giving us an option element for that number so what do i mean by option element well i'm basically referring to one of these right here so if i was to pass in five into that function i want this string given back to me zero five then zero five okay so inside here we're gonna say const padded is equal to number dot to string dot pad start then two and then zero so what is this line of code doing well basically this number could be something like five okay we're saying let's get five then convert it to a string okay then we're going to say let's pad the start of that number and essentially put a zero in front of the five if it's a single digit so if i go in the browser right here i want to show you what it does so if i pass through 2 then i say 2 string then i say pad start 2 and then 0 we get 0 2. if i was to pass in 12 we still get 1 2 we don't get 0 1 2 so basically this pad star is going to ensure that your string length is at least 2 and fill the remaining or pad the remaining with zero okay cool so we've got our padded number we can now just simply say return once again using the template strings we can just say option value then we can pass through the value here and this will of course be the padded value okay then we can just put it inside the actual option display text as well okay save this and let's test it okay so let's just call uh console.log number two option pass through here four okay save this back in the browser and we get the option here with a value of four and then of course four so that's working perfectly fine so we are basically done with all of the basic functions inside the javascript so now we can move on to actually writing some of the core logic for this custom time picker so the first one of these functions is going to be the function which is going to build the picker in the javascript okay so for now we can keep the example time pickable but remove the example time picker because it's going to be generated using javascript instead so this means if i go back in the html we can now just safely either remove or comment out this code for the time picker okay cool so now we're basically left with this right here in the browser i might just actually you know actually forget that i was going to remove the value here but let's let's just keep it and make sure it works when we click on the time picker so how do we build the time picker well let's make a function right up here called build picker okay so we're going to be building this new time picker based on a time pickable input field we can say here time pickable okay cool so what's going to happen inside here well we need to actually create a new html element so we can say const picker is equal to document.createsl and pass through here the div okay then we can just say return the picker so the ultimate goal of this function is going to be to return the picker which we have created okay now what are the steps in building up the time picker well of course we need to add in those select drop downs for the hour the minute and the meridian so let's go down here and we're going to say const hour options equal to an array of our hours so the available hours to the user is going to be 1 2 3 4 5 6 7 8 9 10 11 then 12 okay then we're gonna say dot map and pass through here the function of number two option so we're gonna get every single number inside here and we're going to use map to apply the number to option function basically now the hours options constant is an array of html option strings okay so let's just prove this real quick by saying console.log our options okay then down here we can just say build picker then pass through here the example time pickable save this go inside the browser we can see that in the console through that console.log we have our options for the hours let's do the exact same thing this time for the minutes so down here we can say minutes options and for the minutes i'm just going to copy and paste this from my code reference so i'll copy this right here oops and i'm just going to be doing here basically you know 0 5 10 15 etc incrementing by five so we have now the minutes options as our option uh you know html string as well so what are the other parts into sorry what are the other parts to you know create our time picker well we're going to say right up here picker dot class list dot add we can add the class of time picker to the created html div right up here okay then we can actually you know write out the html so we can say picker dot inner html is going to be equal to and once again using the javascript template strings we can make use of a multi-line string here so we're going to have our three selects we can say select with a class of time dash picker underscore underscore select inside the first select drop down as we can see from the example from earlier it's going to be for the hours so let's inject our option html strings into this select we can use the curly braces here we can say our options.join with an empty string so basically we're just joining up every single option string giving us essentially each option in the select then we can say colon and do the exact same thing for the minutes so up here we can just say minutes options.join with an empty string then lastly we can make the third drop down of course this one here is just going to be the aim and pm so we can quite easily just say option value for am okay and we can just do the exact same thing here for the pm just like that so now we have essentially all of this stuff for the picker and we can see here we're now also returning the picker so if i was to just say inside here console.log the results of the build picker function save this code back in the browser we get the div right here and we can see it's working okay so and we have all of the html for the picker complete so it's a bit difficult to understand or see this right now so what i'm going to do is i'm going to actually append this picker object which we just created to the html document so we're going to say right down here document dot body dot append child let's append that picker which we just created save this back in the browser and we get the picker right there and this of course was generated using the javascript okay so that's working perfectly fine and we have all of our different options here for the minutes the hours and the am or pm which means we can now go back in the html we can now just simply remove all of the reference code for the drop down and it is all nice and clean so what is the next step inside the build picker function well as i demonstrated earlier we want this 10 28 pm to appear inside here when the user first opens up the custom picker so we can achieve this by going back inside you know our function here we can drop down and we can just say const selects is equal to get selects from picker then pass in our new picker so we're going to use our functions from earlier to grab every single selected drop down from the newly created picker then drop down here i'm going to say if the time pickable input field actually has a value okay then we're going to go inside here we're going to say const hour minutes and meridium is equal to get time parts from pickable then pass through here the time pickable so remember the get time pass from pickable is going to take the input field right here it's going to grab the 10 28 am and give us each hour minutes and meridium from that you know from that input field also we're using object destructuring here in javascript to simply grab the hour property from the returned object here and putting it inside the hour variable okay so if you're not too familiar with this syntax it's the same as just saying something like this results then saying result.hour to refer to the hour in this case it's just our like that's a little bit cleaner so we have the hour minutes and medium as constants so now it's going to be relatively straightforward we can just set the value for each one of our drop down fields we can say selects.hour dot value is equal to hour and do the exact same thing for the minutes and the meridian go inside here minutes minutes and then meridium just like that also i forgot to mention meridium refers to am or pm okay so um that's just a fun fact for you but anyway let's go inside the browser here and we can click or we can see this and we have a bit of a problem so of course 1028 isn't or 28 should i say isn't an option inside the drop down menu so this right here might be an argument as to why you don't want your users to enter a custom value inside here and you know you know you want to make use of the read only uh you know attribute here so just to simplify this solution i'm going to make this 10 25 am because we know that 25 is an option for us go back in the browser we can see we get 10 25 am selected uh you know when i create a picker from our time pickable input field okay cool so now how do we get this input field to update its value when i choose a time here for example if i say 4 i want this to now say 4 25 am so this is very straightforward let's go back inside the javascript code and right above here we're just going to say selects dot hour dot ad event listener okay change so basically whenever the user picks a new hour from the select drop down okay we're going to run this function this function is going to say time pickable dot value is equal to get time string from the picker then you simply pass in your picker so we're getting the time string from the newly created picker whenever the user changes the hour and we can simply do the exact same thing for the minutes drop down then lastly of course the meridian drop down save this back in the browser if i choose 2 we get 225 am right there and this comes from our custom function which creates a time string from the time picker 210 it works 2 10 pm and we can see it works so now you know we've actually completed a lot of the code for this solution right here the last step really is going to be to make this work you know when the page first loads up and of course make it work when the user actually clicks on the input field so this sort of comes this sort of comes into play or sorry we can go about doing this using a new function of course so going back inside the javascript let's now you know what let's let's keep these two lines okay but we're going to be saying show instead of build picker so we're going to be calling this show function which is yet to exist passing through the example time pickable so if i go up right here then i just say function show then take through the time pickable so we're taking through the time pickable the first step is going to be to say const picker equal to then build picker then of course pass through the time pickable so we're just once again building a time picker using our reference input field then we're going to want to know where to position the time picker obviously we're going to want it to appear underneath you know our input field so to achieve that we need to get the bounds of the input field so what do i mean by the bounds well if i say right down here console.log timepickable.getbounding clientrect so if i call this get this getboundingclientrect function save this go back in the browser we get nothing let's try and figure out why actually we get an error but this is what we're actually interested in right up here so this is the result of the get bounding rect function we basically just get the surrounding positions and values of the input field so this bottom right here is very important this just means that the bottom of the input field right down here is 29 pixels from the top of the page or the visible viewport okay same goes for the left this time picker is 8 pixels from the left so now we can simply use the bottom and the left properties of the input field to position the actual custom time picker when the user clicks on the input field so we can do that by going back inside here and we can just say const once again using object destructuring here we can say bottom then then say colon top then and left okay so this right here is going to be equal to time pickable dot gets bounding client rect so essentially this bottom refers to the 29 pixels i'm just saying let's call this bottom property top instead of bottom it's just the rename okay then say left to grab the left value so now down here i can say picker dot style dot top is equal to then once again using the template strings here we can pass through top then do px of course remember top here refers to 29 we're saying 29 pixels okay then the exact same thing for the left this time saying left px remember also that we're using the just the position of absolute which means we can actually make use of the top and left properties here in the css styles for the picker okay then lastly we can just say document dot body dot append child and append the picker to the document body so this is just basically automating what i showed you earlier on the bottom of this document okay we can now just return the picker just for convenience and we're going to be using this return very shortly so if i save this right here and i now just say right down here show the example sorry show the time picker for the example time pickable input field go back in the browser and we can see we get 10 25 am presented right underneath the input field right there so this is basically what's going to happen when the user clicks on the input field so speaking of that let's let's finish this code off with the last function here so going inside the time picker js file once again let's say this right here we're going to say function activate okay so the activate function right inside here is gonna basically like the name suggests activate the time picker for the page okay so it's gonna make it so whenever you click on an input field with the time pickable class it's going to actually make it work so the first thing to do inside here is actually going to be to add or inject that css from earlier on so we're going to clean up this code even more so that we don't even need to have this css inside the html head when the page first loads up so we're going to say right inside here document dot head dot insert adjacent html and we can just say before end here so basically this just means insert some html before the end of the head document okay using the multi-line strings here just gonna pass down now the tag right here sorry the style tag okay so basically the javascript is going to be inserting the style tag if we pass it inside here just like this okay there we go so now if i go right down here then i just call the time sorry if i call the activate method or function save this go back in the browser we can see that if i was to inspect the elements here we get in the head the style tag injected using the javascript so this is just so like i said earlier just so we don't have to include those styles inside the index.html okay so let's move on to the next part of this activate function that is going to be to basically loop through every single input field with a class of time pickable and activate the time picker we can say document.query selector all then pass through here the time dash pickable just like this then we can say for every single time pickable input field we can just go on to it just like that and we can run this function so inside this function for every single time pickable input field we're going to begin by declaring a variable called active picker is equal to null so this active picker is going to eventually store the currently active picker element for this time pickable input field okay so we're going to be using this to essentially you know let us know if there is an active picker on the actual input field so it's going to make sense very shortly let's just drop down here and we're going to say time pickable dot at event listener listen for the focus event remember this time pickable uh you know object here refers to the input field itself so basically whenever the user brings focus to the input field either by clicking or tabbing into it we're going to run this function so first off let's check we're going to say if there already is an active picker on the input field we can just return this is going to ensure that if you were to double click or just click on the input field again you know when the picker already is showing then we're not going to get a second picker showing okay so we're just basically saying only one custom picker at a time okay then we can say active picker is equal to then show the time pickable just like that okay so now if i save this go back in the browser then i focus on the input field we get the time pickable showing right there we can of course use it go inside here 10 40 am it's going to work but if i was to now click away nothing happens the picker stays there so the user can't actually remove the input field sorry remove the um the time picker so how do we uh you know allow the user to move on with the next input field well and back inside here we can declare a new function here we can say const on click away equal to an arrow function so we're just going to pass through here the target so i'm going to explain this in a sec but we're once again just using the object destructuring here so this on click away is going to run when the user essentially clicks anywhere on document then this file here is going to take through your standard event object but once again using object destructuring we're only getting the target property of that event object because we're going to need this later on so let's keep that right there but then inside this on click away we need to check a few things but first i just want to actually console.log the target okay then actually activate this on click away function we can say document.addeventlistener we can just say mouse down so remember we're using the document here which means when the user you know presses the mouse anywhere on the document it's going to run this function so we can just say on click away okay save this back in the browser if i was to click on the input field then click anywhere on the document we get the html here for clicking on the document if i was to click on the input field we get the input field here as the target if i click on the time picker we get the time picker as the target and so on okay so basically we're going to want the time picker to disappear when the user clicks anywhere but the input field or the time picker how do we do that well of course we have access to what element was clicked on so if i go inside here we can say if okay then we can say if the target is equal to the active picker so if the user is clicking on the active picker being the time picker then we can just simply return don't do anything also if the user is clicking on the time pickable you know input field we're going to do nothing and we're going to return the last one is going to be or if the active picker dot contains the target and this right here basically just checks if the user is clicking on one of the select drop downs basically so if the selected drop down is an uh is a child element of the active picker then we're going to return okay so we can just say console.log remove picker just to test it out save this back in the browser we get remove picker those two click away and there we go first to click on the input field we get nothing click on this we get nothing nothing nothing nothing click away and we get 9. so we have this code working perfectly fine the last step here is going to be to simply clean up and remove the picker so the first step is going to be to say document.removeeventlistener we're going to remove this listener right down here so we can just say mouse down then pass through the on click away just to ensure that we don't waste resources by having this clicker always on okay so this handler and this listener always on we can then say document dot body dot remove child let's remove that active picker from the dom okay then we can just say active picker is equal to null for this specific input field and we are done with this function in fact we're actually done with this entire file almost okay so now save this back in the browser click on the input field click away it goes away again then it goes away change the value click away and it goes away so that's working perfectly fine so to wrap this code up if i go back inside here we can simply remove the last line for the activate we're going to be calling this insidethemain.js instead so remove this then we're going to say right up here we're going to export the activate function so whenever a different file wants to make use of this of this time picker it's only going to be able to access the activate function and that is what the export is doing here so now if i go inside the main.js i can now say time picker dot and we have access to the single activate function right there so press this and i can call it and we are done save this back in the browser click on the input field and it works right there let's give it one final test here and we can create two input fields just like this let's remove the default values just to make it a little bit easier to understand or see here and we can test if this thing works for two individual input fields click on this one and it works fine make this 1 15 am there we go this one exact same thing let's make it 9 50 p.m and it's all working perfectly fine so that right there is how to create a custom time picker using html css and javascript if today's video helped you out drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 3,203

Keywords: javascript time picker, html input time picker, html input type time custom, custom time picker html, custom time picker with javascript, javascript custom input field for forms, javascript time select drop down, js time picker, js object destructuring example, js array destructuring example, js arrow function example, js import/export syntax example, js modules example, html custom input field, styling input field with html, style time input field html css

Id: 97lSkxy7Wjk

Length: 52min 55sec (3175 seconds)

Published: Mon Sep 06 2021