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

[@JorgeMorua-f3s]

dude, i have been researching for almost 3 hrs, saved my life!!

[@anithasshenoy6662]

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!

[@anishsahani1824]

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

[@ravenjs]

I'm so glad haaha xD

[@mi5956]

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

[@ravenjs]

haha, yea you're not wrong :)

[@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

[@vagabondideas9685]

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

[@razvandragusin6634]

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

[@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

[@aV5d9nlUBQ9]

Proved to be useful. Thanks!

[@movacthuz]

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

[@marcushagerstrand8689]

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

[@ravenjs]

hahaha

[@prabhchahal4492]

Cant thank you enough. That was extremely helpful

[@ravenjs]

thank you :)))

[@stepsexpert8432]

Great help Thanks a lot Dear! You saved me time

[@randeepyasintha140]

Keep up the good work ma8.

[@zukurinshi]

Thanks for this tutorial really helped!

[@tuantran4377]

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

[@ravenjs]

No, it should work even with plain JS and CSS

[@DarkLightBoy]

did you find a fix for it, i have the same issue

[@AlexandraIevtushenko]

God bless you, dude!

[@iuriius]

thanks for this nice tutorial 🙏

[@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.

[@TalhaAkhtar.Official]

Thanks bro this really helps alot

[@S-Lomar]

Tahnk you for sharing ❤️💕♥️❤️♥️♥️💓❤️❤️❤️❤️💓💕💞💓💕

[@CorlStream]

Thanks for this video! It helped me a lot!

[@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.

[@codingSparrow143]

@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, 11:30..... and so on.

[@carlotadias9335]

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?

[@ravenjs]

yes you could just include the script tag in the html without having to touch npm like you would with a plain JavaScript module. You can find the copyable script tag in the flatpickr docs

[@carlotadias9335]

@@ravenjs thank you

[@pizzapanni]

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

[@ravenjs]

did you include the css when importing flatpickr?

[@pizzapanni]

Just noticed this comment after you've hearted it, i fixed the issue. It was using the default picker and not flatpickr.

[@ladiran]

@@pizzapanni I have same issue! Please, how could I stop it from using the default time picker? I am using chrome browser. Thanks

[@pizzapanni]

@@ladiran Sorry man, I wish I could help you though. It was so long ago that I don't even remember how I solved it. Hope you find a way!

[@ladiran]

@@pizzapanni Thanks, all the same🙏

[@mindiaarabuli9426]

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

[@bikramshrestha2196]

Also, is there a way to get the output date time in ISO:8601 format like 2023-07-28T09:30+00. currently it is showing as 2023-07-28 09:30 and one of the APIs i am using takes input in iso 8601 format

[@AnaDrawzone]

Hello there! Do you know if this has dates avalibles in spanish??

[@ravenjs]

Yes, I believe they are available in Spanish as well flatpickr.js.org/localization/

[@DanielJoshua-ck3ui]

Is it responsive for Al screen?

[@ghaithguesmi5857]

thank you brooo thank you very much

[@Kieselsteo]

Yo bro do you have any idea why its all messed up in the chrome browser. Its great but I cant change the year and I can only change the month forward because the arrows are on the same spot

[@anjon-roy]

Thanks for the help. but I have a question I want to set a button when the user clicks on the button the calendar will show. is it possible?

[@ravenjs]

Yes @Anjon Roy it is totally possible. See this section of the documentation where they've already given us a working example: flatpickr.js.org/examples/#flatpickr--external-elements

[@anjon-roy]

@@ravenjs thank you so much

[@ravenjs]

​@@_shienister_ I did some debugging for you and here's what I found: Everything works until this part: formatDate: (date, format, locale) => { // locale can also be used return moment(date).format(format); } It means that you formatDate option dateConfig is faulty, you might wanna check your momentJS implementation. You'll also find that everything else works if you just comment this section out. Do let me know if this solved your issue.

[@anithasshenoy6662]

@Logicism, I used flatpicker and it is very good. However I am stuck with a serious issue. I am using mySql qith django to output data from database to html page. When retrieving date data, flatpicker only shows the year correctly. date and month defaults to january 1st. I found that MySql is outputing the data as (month. date, year) instead of standard month-date-year. This is messing with the actual display. I assume flatpicker is not able to read the mySql output correctly. Is there any way to correct this ? @UCLyyqt2S4Ydc47W7Hiw3x0w

[@ravenjs]

yes it shouldn't be too hard a problem to solve. have you tried using any date parsers? Maybe something like Date.parse() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

[@anithasshenoy6662]

@@ravenjs Thanks for the idea. However it didn't work. But I made another code that works. Here it is $(function(){ let edate =new Date("{{ displayshop.entry_date }}") ; var newdt = edate.getFullYear() + "-" + (edate.getMonth() +1 ) + "-" + edate.getDate() ; document.getElementById("entry_date").value=newdt ; flatpickr("#entry_date", {dateFormat: "Y-m-d"}); });

[@sulmedici]

Sir can we use it to pick multiple dates?

[@alexandergdansk]

Good job!

[@Asaduzzaman2189]

Thank you so, so much. Very helpful.

[@ravenjs]

you're most welcme 😎

[@bikramshrestha2196]

Is there a way to add hour to the time you set in the picker?

[@michcalu]

That is a nice explanation, thanks. But do you know how to make it work when you have nested forms on the fly? When I add a form with a date input, fllapickr is inactive until I submit the form with new data in the new fields.

[@MarkVoVN]

thanks dude, really helped me alot

[@ravenjs]

you're most welcome

[@suri5023]

very helpful. thank you so much

[@ravenjs]

I'm so glad it was helpful Soroush :)))

[@nassimbendjillali3714]

thank you so much sir this is what i need

[@ravenjs]

glad it helped :))

[@blairmottau]

thanks for the vid! super helpful :)

[@ravenjs]

thank you too @Blair :)))

[@renantibia92]

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?

[@ryanhernandez8388]

helped a lot man thanks!!

[@temporari2606]

bro can u make a add new table row ------> and flatpickr still working in (input type="date")

[@electroe2143]

Thank you so much for sharing this.

[@ravenjs]

you're most welcome @Electro :))

[@franciscodisanzo6816]

Hi, thank you!! Just what I needed. Do you know if I can change the calendar language?

[@ravenjs]

hi Francisco, sorry for the late reply! To change the language, you can add a property to the config object like so: config = { "locale": "ru" // locale for this instance only } The timestamp for when I'm making the config object: 3:33 Configuration Object You can find more details here: flatpickr.js.org/localization/

[@franciscodisanzo6816]

@@ravenjs hi, Thank you very much!! Thanks for replying!

[@ravenjs]

@@franciscodisanzo6816 you're welcome :)

[@mohdzulfadhli]

can i make it to only shows year?

[@ravenjs]

Yep you definitely can. Use the formatting tokens from flatpickr: flatpickr.js.org/formatting/

[@mohdzulfadhli]

@@ravenjs thanks but I mean pick only year without day and month. is it possible?

[@labeebmahir]

Thank You. It was helpful

[@ravenjs]

Glad it helped @Laheeb

[@Lucas-gg9yb]

Can i have it fixed in the page layout instead of showing it only when i click in the input?

[@furqonqolbi]

thank you

[@srikarpuligilla5724]

how can use it in angular.........is it possible.

[@lucasbrantes1]

i`am receiving this erros if-modal.js:24 There was a problem with the fetch operation: ReferenceError: flatpickr is not defined at showModal (otif-modal.js:45:5) at otif-modal.js:21:17 (

[@fauzanganinurmaizal8958]

thanks man its work

[@gloriarolan7807]

How to limit the date ?

[@ravenjs]

You can use the minDate/maxDate properties in the configObject: flatpickr.js.org/examples/#mindate-and-maxdate Or, you can use the disable array property: flatpickr.js.org/examples/#disabling-dates

[@paulopaulo1615]

Apprecitaed! Subs

[@ravenjs]

thanks Paulo :)))

[@cristobaldelapiedra]

thank you very much

[@ravenjs]

glad it helped :)

[@flexairz]

Implementing this into a project and time was not selectable anymore.. did not work.

[@excelshorts5797]

How to disable previous date, cursor: not-allowed for previous date

[@morse19792]

Genial!

[@carlosvesta]

Muito obrigado.

[@ravenjs]

de nada @Carlos Vesta

[@AbdullahKhan-fq5pp]

please share datetimepicker code with type text not date

[@ravenjs]

do you mean a text input field?

[@LowProfie_]

Mine is not working😢

[@TheLKStar]

This is 99% of the way there. Manual inputs get autocorrected when badly formatted dates are inputted, that's a really bad decision since the user may not notice a wrong date. Could not change this.

[@dotel6560]

you madman

[@clryung6425]

Thank you so much