flatpickr / flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr - javascript datetime picker

Motivation

Almost every large SPA or project involves date and time input. Browser's native implementations of those are inconsistent and limited in functionality. Most other libraries require you to pull in heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something that was good-looking out of the box, dependency-free, powerful, and extensible.

Feature overview:

• Dependency-free (no bloated bundles)
• Simple, polished UX
• Date + time input
• Range selections
• Ability to select multiple dates
• Can be used as just a time picker
• Display dates in a human-friendly format
• Easily disable specific dates, date ranges, or any date using arbitrary logic
• Week numbers
• 51 locales
• 8 colorful themes (incl. dark and material)
• Numerous plugins
• Libraries available for React, Angular, Vue, Ember, and more

flatpickr provides more functionality at a fraction of the size of other libraries.

Compatibility

IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+

Install & Use

Demos and documentation: https://flatpickr.js.org

See also:

• angular2+-flatpickr addon
• angularJS-flatpickr addon
• ember-flatpickr addon
• Preact Component
• React Component
• Stimulus.js Controller
• Svelte Component
• vue-flatpickr component
• lit-flatpickr component

Supporting flatpickr

flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior.

Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy me a cup of coffee :)

flatpickr's Issues

Is there some way to clear the input-field?

If a user has entered a date and the change his mind, how can the field be cleared?
Is there some built in feature that supports this?

I could add a button that clears the field, but perhaps it would be good to have this feature built in.

Setting not working: shorthandCurrentMonth

It appears that the shorthandCurrentMonth config value isn't actually getting used on line 294. Let me know if you need a pull request on this one. Thanks.

Only first flatpickr on a page works in IE11

Hi!

I noticed that on IE11 only one flatpickr works (test http://chmln.github.io/flatpickr/ with IE11).

It seems that it's on line 594 it crashes. I tried with the code from this StackoverFlow answer and it seems to be working:
http://stackoverflow.com/questions/27643181/ie-11-dispatchevent

So I changed the code from:

"createEvent" in document ? ( element.dispatchEvent( new Event("change") ) ) : ( element.fireEvent("onchange") );

to:

if (document.createEventObject) { element.fireEvent("onchange"); } else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); element.dispatchEvent(evt); }

Have not tested it thoroughly but it seems to be working....

Publish as package

Please consider publishing this to NPM and other package managment platforms, it would be very helpful. I'm currently using flatpickr in a Webpack/Babel environment and the fact that it's already exported as a module would work very well with it being a NPM package. Updating would also be much smoother.

Local browser time versus server/tenant time

I just started using flatpickr today and from browsing the source code, it looks like new Date is the method by which an input's value is parsed to extract datetime information (seems logical).

However, when I set the input's value to a string like "2017-06-01T12:00:00-04:00", since JavaScript Date does instantiation based on a user's local clock, flatpickr re-sets what is displayed to the user's local clock which, in my case, is based on London time (BST) instead of the application's users' standard time.

I know this is an inherent problem with JS, but do you have any recommendations for how to work around this with flatpickr?

Thanks for your time

Please add support for IE9

That's a deal breaker for us that IE9 isn't supported.

I'm aware that Microsoft dropped support, but out in the really real world it's still widely used and will be for some time to come.

Vue.js 404

Hi there!

https://github.com/chmln/flatpickr/blob/gh-pages/src/flatpickr.vue.js

is returning 404.

This link is in the flatpickr readme.

👍

Setting appears to be broken

I am trying to do something like this flatpickrRef.set('minDate', 'today'); and I end up with undefined and no dates showing up. I don't seem to be able to set any properties after the initial creation. Any idea why?

Input date value not detected by datepicker

Hi, if I set the date value via JS, the datepicker won't detect that date (does not focus on that date).

Also, if I change some months ahead, and close the datepicker without selecting any date, the next time I open the datepicker, it will still open on that month. I think the datepicker should always open on the selected date (input value), when closed and reopened.

Current month has wrong "today" class on next month days

Hi there!

Today I saw some weird style on my inline calendar, and after investigating it, I saw that the next month days, from the current month, all have "today" class on it, which resulted in some css conflicts.

Here is an example from the example page:

The current month is January, so the next month days all received "today" class. In the example page this is not a problem, but if you have some custom css for "today" class, it will be a problem.

If you change to February, the next month day will not receive "today" class, this issue is only for the current month.

Feature Request: Non-Military time w/ AM/PM in the time selector

my users may not be terribly familiar with military time, and may feel more comfortable with 12 hour time with am/pm selection.

is this possible?

Prev Month Next element order

Hello!

When using the inline flatpickr option, the "Prev" element is followed by the "Next" element in the html structure, ending with the month element. The actual flatpickr uses float to put the "Next" element at the right side of the month:

This makes difficult to change the display style, lets say, changing it to display:flex.

It will make the "Next" stay right after the "Prev" element, and ending with the month, the same way it is in the html structure.

Would it be possible to change the order of the html structure, to follow the visual order?

Prev + Month + Next ?

Disabled input-group still opens the calendar

Hello!

Sometimes the date input is disabled so the user can't type on it, or open the calendar popup to select a date.

But there is a problem when using input-group with a disabled input, because the "data-toggle" or "data-open" will still open the calendar popup, even if the "data-input" has a "disabled" attribute.

Would be possible to not open the calendar popup through data-toggle or data-open, if the data-input has a disabled attribute?

I tried intercepting the click event on the data-toggle element, and calling preventDefault(), but it did not work, because flatpickr toggle event was fired first. I also tried removing the "data-toggle" attribute after the input was disabled, but even after that the calendar was still being called.

Best regards,
Rafael Pacheco.

Review examples

Hi @chmln!

Using minDate and maxDate options 4th example, has minDate today, and maxDate in 2015.

This makes the entire calendar disabled.

Best regards,
Rafael.

Inline datepicker

Hi there!

In order for me to replace bootstrap-datepicker with this amazing lightweight flatpickr in my webapp, I would need an option for inline datepicker render, without having to click the input to show do calendar. It would be rendered in the html as the page is loaded.

Here is the example: http://bootstrap-datepicker.readthedocs.org/en/stable/markup.html#inline-or-embedded

Is there any plans for this kind of feature?

Best regards.
Rafael.

Instantiate flatpickr with DOM element

Hello there!

To instantiate a flatpickr, we need to use a selector, like flatpickr('#flatpickr') or flatpickr('.calendar'). The problem is, sometimes the selector isn't available. For example, with the .calendar selector, I can't run flatpickr to all .calendar if I add a new .calendar into the dom.

It all works fine when the page loads. The problem comes when the DOM is updated via ajax, and I need to flatpickr that new DOM.

Would be possible to add a way to instantiate flatpickr using dom elements? Something like flatpickr(my_dom_calendar)?

timepicker without initial value

I'm not able to set a value for the time-only flatpickr if no initial value is set.

one row calendar option / weeknumber / today button

Hi there!

I would like to use the inline option of flatpickr as a one row calendar. E.g.

Would it be possible to add an option for this view? And it would be also nice to have calendarweek number and "today" between prev and next month.

Best regards,
tivjet

Feature request - Responsive option

Hi there!

One thing that is missing in flatpickr, and a crucial one, is an option to activate a responsive behavior for the date picker.

For example, below a certain horizontal resolution, flatpickr could be vertical/horizontal centered in the viewport, with some darker background to focus the user to pick a date (pickadate.js behavior).

Also (and this is a current problem), if the input is created at the very right of the viewport, it's calendar will expand the viewport, crashing the layout. This is happening in my website, and I simulate this in the flatpickr example page, by sending one of the inputs to the far right of the page. Here you can see what happens to the layout in this situation:

And the reason for that shows up when you click the input:

In this situation, I think flatpickr should not push the layout, but instead pull itself to the left.

Bests regards.

Support for iOS Safari

As far as I can tell none of the examples provided work in iOS safari - I'm not sure if this is intentionally or a bug. It would be good to see a list of supported browsers on the github home page (I've looked but if I missed it sorry in advance).

Feature Request - Time Picker

it would be cool to have some sort of material-esque time picking ability as well, for use with full date-time object (esp with ember)

Commonjs module support (webpack support) and add to npm

Hi chmln.
Flatpickr is good plugin.
Can u add support for commonjs module?
Because, I cant use this plugin with webpack module bundler and i'm upset about it.

Thx for this)

Support for the picker to be triggered by other element

Hi!

For a project I needed to trigger the Flatpickr with an button instead of the input field.
Some reason for this is for accessibility, where people with screenreaders doesn't get much support from a datepicker. There it's much better to just let them enter a date with a standard text input.

So when the Flatpickr can be triggered with a button instead, that button can be hidden from screenreaders (aria-hidden="true") and that will give people with screenreaders the option to just enter text.

I did a simple fix in the Flatpickr codebase to add an config for "triggerElement", which should be a DOM node. If that element is set the Flatpickr will be triggered by clicking the "triggerElement" instead of input.focus().

Are you interested in a Pull-request with this?

Thanks for a great plugin!

Add to bower

Could we have this awesome piece of work as a bower package?

UX - The time picker may not be easily discoverable to non-tech savvy people who don't skim over things quickly

I'm not sure how much of an issue this is, but I'll show the time picker to my wife, and see what she thinks of it.

I do like that both the date picking and the time picking are on the same popup - that leads to very quick usability.

Formatting does not load previous selected date

Hi there!

As you can see in the Formatting with dateFormat in the sample page, which apply flatpickr('#dateFormat', { dateFormat: 'Y-m-d'});, will not focus the previous selected date when picking a date, closing the popup, and reopening it.

Here is the popup after closing and opening it again:

Another problem is pre-loading the date field with, for example, 11/01/2016.

With d/m/Y as dateFormat, 11 represents the day, and 01 the month. But when opening the popup, it will load November as month, and 01 as day. Looks like it is parsing directly from the input, ignoring the dateFormat option.

Uncompressed or SASS css dist

Hi there!

Would be possible to public uncompressed css in the dist folder?

During development, usually the uncompressed version is imported.

Also, would be nice a sass version for the css's ;)

Best regards,
Rafael Pacheco.

Wrong localization documentation

Hi Gregory, this is an amazing datepicker! Works with bootstrap very well, without conflicts.

Today I had to localizate the flatpickr, and I found the documentation is wrong.

It says:

flatpickr.prototype.l10n.weekdays.longhand

But the correct code is:

flatpickr.init.prototype.l10n.weekdays.longhand

Using your code lead to JS errors upon loading the page.

Best regards,
Rafael.

leap-year

Hi chmln,

I'm new hier and first of all thank you for this amazing calendar. I've noticed, if you switch to the next month until Feb 2016 there are shown only 28 days. March 2016 starts from Tuesday wich is correct but in February are only 28 days instead of 29.

Kind regards,
tivjet

Is there a way to just input time?

time without date?

Firefox not working: shows no day numbers

Hi. Here firefox shows no day numbers. A simple replace of cell.innerText to .innerHTML is the solution here (daynumber foreach)

best

Preloading in time

Preloading a time in doesn't seem to work.

I've tried passing the time in as HHMM and HH:MM into both the value and data-defaultDate attributes but in all cases I get the following error:

Z-index changed?

Hi there!

After updating to 1.5, I got some z-index issues, like this:

When openning "Data inicial" calendar, it goes behind the next flatpickr input.

To solve this, I changed this z-index:

.open .flatpickr-calendar {
  ...
  z-index: 3; /* From 2 to 3 */
  ...
}

In the example page, the same css rule has the following z-index:

.open .flatpickr-calendar {
  ...
  z-index: 100;
  ...
}

Any reason to change from 100 to 2? I'll keep a custom css to override this rule for now.

Thanks!

Allow user input

Hi there!

When using flatpickr on a text input, the text input is disabled somehow to block user input. Would be possible to add an option to avoid this behavior?

Sometimes it is faster for the user to type the date instead of using the calendar plugin.

In this situation, the calendar popup should not be oppened, instead it should be openned using the calendar api, usually via an extra button or hint.

Best regards,
Rafael Pacheco.

Support passing in a date string

Correct me if I am wrong, but it seems like right now it is not possible to pass something like "2016-12-27T16:16:22.585Z" to set the initial value, but passing a Date object works, so if I do Date("2016-12-27T16:16:22.585Z") and then pass that in, it works.

Do you think flatpickr could have an if to check if the passed value is a string, and convert it to a Date object behind the scenes?

Selecting last day of month will mark disabled days as selected

Hi there!

To simulate this problem, open "A basic datepicker" calendar, and select the last day of the month, like 29/02. Then close the popup and reopen again. All disabled days of the next month will be makerd with "selected" class, like this:

Using 1.6.2 via NPM.
Chrome 48.0.2564.109
Windows 7

All selected dates past March 27th are out by one day

When selecting March 27th 2016, and the clicking to select another date - the calendar shows both March 27th and March 28th as highlighted. When selecting a date after March 27th 2016, the calendar shows the day after as highlighted.

This issue is reproducible on your demo page.

If it helps I'm using Chrome 47.0.2526.106 on OSX El Capitan 10.11.2 (15C50)

Unable to use custom elements to open the calendar

Hi there!

After updating to the brand new awsome 1.7 version, I tried the new "custom elements to open" feature. I think this feature was coded the more generic as possible, to work in many situations, as the doc says: "common in Bootstrap and other frameworks"

So I tried in Bootstrap, and after many trials, it just don't want to work. Here is the code I'm trying:

<div class="input-group flatpickr" data-wrap="true" data-clickOpens="false">
    <span class="input-group-addon" data-open>
        <i class="fa fa-calendar"></i>
    </span>
    <input class="form-control" data-input type="text">
</div>

And I boot up flatpickr using directly the dom element, like:

flatpickr(element);

If I click the input element, it triggers the calendar, and block user input from keyboard. A behaviour very different from the sample page.

Am I missing something to get this to work?

Best regards,
Rafael Pacheco.

Setting to datetime doesn't work

When I set value to a datetime, the rendered text box shows up as empty.

I'm using ember, and this addon: https://github.com/jakkor/ember-cli-flatpickr which is just a wrapper for flatpickr

my template:

{{ flat-pickr value=model.startsAt }}

the value is Fri Aug 29 2014 19:00:00 GMT-0400 (EDT) (a DateTime object)

but the renderd text box is blank.

input doesn't have a type

Not sure if this is a new issue or not, but I've encountered this:

Where the flat-pickr box doesn't have a type='text' or anything.
Note that the type='text' box above is styled.
When I add type='text' to the input in the dev tools, the field gets styled.

it's not a required attribute, but w3schools recommends it always be set. :-\

I'm using

"flatpickr": "git://github.com/chmln/flatpickr#53c0c769fd14657bc4ae7103a93a5ad7038905c3",

I've also tried the latest:

"flatpickr": "git://github.com/chmln/flatpickr#70ca73dcf644ebe34119f33c2979d402e96c2790",

Safari OSX JS - createContextualFragment NotSupportedError

Related to #11.
On Safari 9.0.1 / El Capitan (latest) the console throws this error:

NotSupportedError: DOM Exception 9: The implementation did not support the requested type of object or operation.

at

i.className = "flatpickr-months", e = n.createContextualFragment("<span class=flatpickr-prev-month>" + A.config.prevArrow + "</span>"), t = n.createContextualFragment("<span class=flatpickr-next-month>" + A.config.nextArrow + "</span>"), i.appendChild(e), i.appendChild(P), i.appendChild(t), f(), $.appendChild(i)

For those that use the foundation framework (at least version 5) some overrides are required.

Before:

After:

scss:

.flatpickr-wrapper{
  box-sizing: content-box;
  width: 100%;

  .flatpickr-months{
    .flatpickr-prev-month{
      margin-left: 4px;
    }
    .flatpickr-next-month{
      margin-right: 4px;
    }
  }

  .flatpickr-calendar{
    margin-top: -14px;

    table{
      margin: 0;
      border: 0;
      background: white;

      thead {
        background: none !important;
      }

      tbody{
        tr{
          background: none;

          td{
            padding: 0;

            &.slot.selected .flatpickr-day{
              background-color: $link-color;
              border-color: $link-color;
            }
          }
        }
      }

    }

    .flatpickr-time{
      background: $wrapping-background;

      @mixin flatpickr-time-styles{
        box-shadow: none;
        background: none;
        width: auto;
        height: auto;
        border: none;
        font-size: 13px;
        padding: 0px;
        margin: 0px;
        color: white;
      }

      .flatpickr-time-separator{
        @include flatpickr-time-styles;
        width: 5%;
      }
      .flatpickr-am-pm{
        @include flatpickr-time-styles;
        width: 25%;
      }
      input{
        @include flatpickr-time-styles;

        &.flatpickr-hour{
          width: 40%;
        }
        &.flatpickr-minute{
          width: 30%;
        }
      }
    }
  }

}

Release new version?

Would you mind releasing a version including the onClose code?

Also, I see you added Babel. Is the intent to make this into an ES2015 class?

6 rows in every month

Hi there!

When using the inline option of flatpickr, and changing from a month with 5 rows to a month with 6 rows, flatpickr will increase it's vertical size. When this occur, the web layout is pushed down, resulting in a bad user experience.

This also make flatpickr hard to use in popup mode, if the flatpickr is shown above the input. The next-prev buttons will go down and up when changing some months, making it hard to navigate.

Here is a comparison of flatpicker on october/november, and bootstrap-datepicker on the same months:

Would be possible to add an option to always show 6 rows?

Best regards,
Rafael Pacheco.

Feature request - fast way to change a year

Can you add something to change the year faster ? For example "<<" next to "<" ?

I had just to switch to 2004 and it was a lot of clicks :D

Preloading date doesn't work

Preloading a date doesn't work.
Event in the examples page.

Here is my app:

HTML
<input class="calendar form-control" name="end_date" aria-describedby="basic-addon1" data-defaultDate="2016-03-31 23:59:59 -0300" />

JS
flatpickr(".calendar", {dateFormat: "m/d/Y"});

Using the latest version of your lib.

Also, in your own example page it's not working properly, as you can see in the screenshot

This date is parseable, as you can see on the output of Date.parse() below
> Date.parse("2016-03-01 00:00:00 -0300") <- 1456801200000

I'm using Chrome on a Mac 10.11 El Captain

Day offset bug probably because of timezone +/- difference

Did some debugging and I think I've found the problem with the day offset mentioned in #12 :

It's probably working ok for you because you are in a negative timezone (UTC - x), while I'm using the plugin from a positive timezone (UTC + x). Here is the code block:

utcDate = function(date){

        if (typeof date === 'undefined')
            date = new Date(); 
            // This is according to system settings

        else if (typeof date === 'string')
            date = new Date(date);
            // Sets the time to 00:00:00 +/- timezone offset. So if the offset is 120, then it will set 02:00:00, but if the offset is -120, then it sets the time to 22:00:00 the day BEFORE

        date.setTime( date.getTime() + date.getTimezoneOffset()*60*1000 );
        // If the timezone is negative it adds to the time, if it's positive it subtracts

        date.setHours(0,0,0,0);
        // This sets the time to UTC then applies timezoneOffset. So if the offset is -120, it sets 22:00:00 the day BEFORE. It doesn't seem to be affected by the .setTime above.

        return date;
    }

This seems to be working ok for positive timezones, but when the timezone is negative the only way I got it working is this:

utcDate = function(date){

        if (typeof date === 'undefined')
            date = new Date(); 

        else if (typeof date === 'string')
            date = new Date(date);

        var timezoneOffset = date.getTimezoneOffset();

        date.setTime( date.getTime() - timezoneOffset*60*1000 );
        // - - = +

        date.setHours(-timezoneOffset/60,0,0,0);
        // Convert timezoneOffset to hours, switch to positive value

        return date;
    }

But I couldn't figure out a catch-all that will render correctly for both positive and negative timezones.

mouseout always triggers onChange in time fields

Looks like onChange is always fired on a mouseout event on any time field whether or not the field was actually changed. (mouseout always fires updateValue which always fires triggerChange without checking for an actual change)

Inconsistent behavior of setting min-date

We can not select the day 2016-09-20

But we can select the day 2015-09-02 if we set min-date in different format

Is it a expected result?

Hide AM/PM button and change hours input range when 24-hours time format

Hello. I'm from Ukraine. Here we use 24-hours format, and people from CIS do not use AM/PM at all (and do not know what is it). :)
So do we have any way to use 24-hours inputs for time and hide AM/PM button?