Intro + What You'll Need

This tutorial requires very minimal set up and is easy to get going. Each link above showcases a new use case that you might desire, but it's important to note that there are more custom options that you can do with flatpickr.js than what's listed here! See here for the full list of things you can do with it.

The only thing you need to do to begin is to:

  • Add the following files to your custom code settings (Inside <head> tag)

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

  • Drag an input element onto your page (typically within a form) and give it an ID of date and a CLASS of date. If you have multiple forms on a single page and are looking to integrate a date picker in each, just give the input elements the class of date - do not give them an ID.