 The other day I was crowning around on the internet for hours trying to find for a solution So basically I had an HTML website I was building and I had this form filled for the date time dash local type And when I did that on Firefox, I realized that there was no such picker in Firefox So you had to manually type in the date time with the format and everything in this input field right here But the date seems to work fine So if I change this date time dash local type into date type You can see that the selector comes up just fine in Firefox But the minute you change it to date time dash local and you refresh that the selection is gone And you have to type it in manually And so I wasted hours on the internet trying to find for something that can work with bootstrap Because I was already using bootstrap as you can see here But then I found this amazing module called flat picker So as far as I know it's running vanilla JavaScript and so it will definitely work with bootstrap So today I'm gonna show you how you can use flat picker to make your own date time picker In just a few lines of code So to install this we can either use NPM or I'm just gonna use the CDNs right here So you just have to copy the CSS right here and paste it in your head tag in HTML And then copy the JavaScript here and paste it right below your body's closing tag So I'm gonna paste that there And the main reason we're doing this is pasting it down below Right before the closing body tag is just for performance Now if you want to plug this up at the top in your head tags it works as well It's just not as performant Okay so now let's go back to my existing website here You can see it's just a very simple bootstrap based template And the only really thing that I coded myself is this form right here It's just three lines of code and it's just this form With a type of date time dash local with a placeholder And a bootstrap class of form control Now if I go back to the flat picker documentation down here You can see if you use jQuery you can just use this one line and initialize flat picker But I'm not gonna use jQuery I'm just gonna use vanilla JavaScript So you can do something like this I'm just gonna copy this And paste it in our script tags here So I'm gonna paste that in So this line of JavaScript, this single line will initialize flat picker But we have to tell flat picker which input fields we wanted to target So you can target it with IDs, you can target it with classes Or you can just target it with input and type equals to date time dash local Which is what I'm gonna do right now So this JavaScript function will automatically target all of the input with date time local types And apply the flat picker initialization on top of it So I'm gonna save this, I'm gonna save this And let's go reload and let's take a look at what it looks like So immediately you can see that when I click on the input field We get this amazing date picker You can choose the month, you can choose the year But then again, this isn't really what we want Because Firefox already has a built-in date picker We don't need another date picker What we need is a date time picker with the time input And that's where flat picker shines because of just how customizable it is So if I go back to the documentation right here You can go and check it out yourself at flatpicker.js.org Slash getting started, you can go to the examples And we can look at the date time right here You can see that we just have to type enable time equals to true And it will give us a time selection So let's go ahead and do that in our JavaScript Script tags here So you see this associative array or dictionary here This is where we plug our configuration in So I'm just gonna copy this entire associative array here And paste it in here under a variable called config And let's fix that indentation And I'm gonna plug the config variable right in here And save that And now when I go and reload and open this up You can now see that we have a time input here So if I input like 1pm on 9th of June Then it will automatically fill in the values for us And we don't have to type in plain text But I'm just gonna show you another customization That you can do with date time with flat picker So look at this value here It's not that human readable yet We can further customize this and enter our own format in there So if I go to documentation You can see human friendly dates And under alt input and alt format You can create your own format So I'm gonna go back to my code here I'm gonna just remove this I'm gonna call alt Actually I'm gonna call alt input is true This will tell flat picker that we wanna show custom values Custom formatted dates and times in this display right here Now this will just show up differently But in the underlying form When you actually submit the form And go through form processing The actual format will still follow this date format one So this is just an alternate input It just changes the display So I'm gonna give it an alt format And I actually have a snippet here That I'm just gonna copy and paste it in So this is basically F Which if I'm not wrong is a day The month comma the year And the hours and minutes And then this is AM or PM So I'm gonna save this so you can see How it looks like I'm gonna select something And you can see now we have a custom formatted display If you want to format this display to your own format You can of course go to your documentation Go under formatting tokens And you can look at all of the tokens right here That you can replace in this alt format string right here And of course there are a ton of other config And options that you can apply to flat picker Because it's just so powerful And the best part about all of it Is that flat picker is open source So you can go ahead and go and take a look at the source code at GitHub Or you can make some contributions there too So that's about everything that I'm gonna show you in this video And if you have any questions Just put them down in the comment section I'll do my best to reply them