Input date and time in HTML and Javascript || (flatpickr.js)

Can be applied to date/datetime/datetime-local/any input types in HTML.

Works with Bootstrap.

[anithasshenoy]

This is far better than Bootstrap-datepicker. With bootstrap-datepicker, width of the control was very huge and some how I could not bring it to desired size. This is cute. Thank you so much. I had tried it yesterday, but didn't know how to initialize it. You made it simple. Thanks a lot.

[Kareszrk]

Thank you so much dude! I love it! My client was ordering me this thing and I literally found no info only your video! Thank you! <3

[mi]

Thanks man, Flatpickr is horrible on explaining where to use config option, their documentation wasted 4 hours. but you explained it very well. thanks brother

[anishsahani]

Thank you so much... I had wasted more than 10 hours before coming to your video. This solved my problem... You saved my day :)

[Toro-Tor]

Uhh man, THANK YOU for the great tip, this "thing" is fantastic !!!
I've configured a Date &Timepicker just the way I wanted it. I will insert the css locally and style the colors a bit different
- Now the next stage is to send this to an email

[muttBunch]

This is an amazing find. Thank you. I’m using the mdbootstrap library and it’s a huge mess. It doesn’t work correctly and you cannot get the value of the datetime input change.

[vagabondideas]

Dud, You Rock! Thanks for sharing this!👍👍

[marcushagerstrand]

Thank you so much! I almost gave up searching for this solution 😅

[Bersek-ups]

Really thx, this save me, i really need it a datetime picker for firefox and this work, REALLY THX, u are a great person <3

[codingSparrow]

@RavenJS Hey!! This looks like a very good solution😊. But is there any way to have different time intervals for time? Like I want to have an half-hour difference between two times. e.g. 10:30, 11:00, and so on.

[tuantran]

Does it have to work with bootstrap? I did exactly the same every step and it does not work. It only shows the regular datetime-local

[razvandragusin]

Thanks for sharing with us this amazing information! Keep it up :)

[renantibia]

Congratulations on the video, it's a great way to customize the input date. I just wanted to know how I can change the language, is it possible?

[mindiaarabuli]

When I have open Inspect Element and refreshing page, The code no longer works :/

[sheriffcrandy]

Man this is so dope man. Thank you bro! How can I extract each field for processing? I need to get the month, day and year as separate fields.

[movacthuz]

man, i've been searching for this as well.. thanks a lot!

[carlotadias]

I am trying to implement it in an angular project, but it doesn't recognize flatpickr("#myID", {});
even after putting the script as you did.
it seems it asks for the npm install which I cannot do in this point (problems with lerna).
do you know the alternative to import it without doing the npm install?

[pizzapanni]

My flatpickr looks ulgy like it's the browser default. How did you get yours to look so good?

[prabhchahal]

Cant thank you enough. That was extremely helpful

[stepsexpert]

Great help
Thanks a lot Dear!
You saved me time