haoxins/react-flatpickr

flatpickr for React

react-flatpickr

Flatpickr for React.

Table of contents

• Installation
• Usage
• Basic props
  • defaultValue
  • value
  • children
  • className
• Event handlers
• Advanced props
• Troubleshooting

Installation

This package can be install with yarn or npm

npm

npm install --save react-flatpickr

yarn

yarn add react-flatpickr

Usage

// Keep in mind that these are the styles from flatpickr package
// See troubleshooting section in case you have problems importing the styles

import "flatpickr/dist/themes/material_green.css";

import Flatpickr from "react-flatpickr";
import { Component } from "react";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        onChange={([date]) => {
          this.setState({ date });
        }}
      />
    );
  }
}

Basic props

defaultValue

string | optional

This is the default value that will be passed to the inner input

value

string || array || object || number | optional

Same as below

options

Object | optional

• Flatpickr options: you can pass all Flatpickr parameters here.
• All Flatpickr hooks can be passed within this option too.

Example:

<Flatpickr options={{ minDate: "2017-01-01" }} />

children

node | optional

This option is closely related with the wrap option from Flatpickr, please refer to the former link for more information.

className

string | optional

Custom className that will be applied to the inner input element. In case you need to modify the rendered input styles this is the prop you should use.

Event handlers

The following props are provided in order to customize the Flatpickr's functions default behaviour. Please refer to the Events & Hooks section from Flatpickr library.

onChange

function | optional

onOpen: function

function | optional

onClose: function

function | optional

onMonthChange: function

function | optional

onYearChange: function

function | optional

onReady: function

function | optional

onValueUpdate: function

function | optional

onDayCreate: function

function | optional

onDestroy: function

function | optional

Advanced props

render prop

function | optional

Use this prop if you want to render your custom component, this is a Render props pattern.

Example usage:

  import React from 'react';
  import Flatpickr from 'react-flatpickr';

  const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {
    return <input {...props} defaultValue={defaultValue} ref={inputRef} />;
  };

  export default function App {
    return (
      <Flatpickr
        render={
          ({defaultValue, value, ...props}, ref) => {
            return <CustomInput defaultValue={defaultValue} inputRef={ref} />
          }
        }
      />
    )
  }

flatpickr instance

You can directly manipulate the flatpickr instance using the flatpickr property on the component.

Example:

  import React, { useRef } from "react";
  import Flatpickr from "react-flatpickr";

  import "flatpickr/dist/flatpickr.css";

  export default function App() {
    const fp = useRef(null);

    return (
      <div>
        <Flatpickr ref={fp} />
        <button
          type="button"
          onClick={() => {
            if (!fp?.current?.flatpickr) return;
            fp.current.flatpickr.clear();
          }}
        >
          Clear
        </button>
      </div>
    );
  }

Themes

Please import themes directly from the flatpickr dependency.

Troubleshooting

Help, the Date Picker doesn't have any styling!

In most cases, you should just be able to import 'flatpickr/dist/themes/airbnb.css', but in some cases npm or yarn may install flatpickr in node_modules/react-flatpickr/node_modules/flatpickr. If that happens, removing your node_modules dir and reinstalling should put flatpickr in the root node_modules dir, or you can import from react-flatpickr/node_modules/flatpickr manually.

License

MIT

react-flatpickr's Issues

Unknown props warning

when I set minDate or maxDate properties, it shows below warning message.

bundle.js:10659 Warning: Unknown props `minDate`, `maxDate` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

Locale attribute can't be updated

Locale attribute can't be updated, and stay at its initial value.

Example :

<Flatpickr options={{locale: this.props.language}} />

• Initial value : this.props.language = 'en'
• Want to modify value : change language from 'en' to 'ru'
  => Flatpickr stay in 'en' despite I wanna see it in 'ru'

Changing defaultDate doesn't set the component correctly

Hi! First of all, awesome job :)

The only issue I have so far is when render() runs, it potentially changes the value of defaultDate. However, that is not reflected in the component. For example, when my app first loads, defaultDate is blank. It then runs an ajax() call to get the last saved date and potentially updates that option. Afterwards, the component does not reflect this change even though the instance's config option is set.

Enable enableTime by props dynamically

Is it possible to switch between the enableTime option? (e.g. via Checkbox?)

`cannot read property _flatpickr of null` when used in unit tests

When using enzyme's full document rendering in node.js (ie using jsdom to supply a DOM), the following error occurs:

     TypeError: Cannot read property '_flatpickr' of null
      at init (node_modules/flatpickr/dist/flatpickr.js:10:14)
      at Object.Flatpickr (node_modules/flatpickr/dist/flatpickr.js:1343:2)
      at DateTimePicker.componentDidMount (node_modules/react-flatpickr/build/index.js:71:24)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:79:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:187:26)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at fullRender (test/components/registrations_component.spec.js:48:30)
      at Context.<anonymous> (test/components/registrations_component.spec.js:111:25)

The problem seems to be that the node isn't defined in componentDidMount, and it's currently being set with:

var node = document.getElementById(id);

This returns null in the jsdom environment for some reason.

Today button

What would be the easiest way to achieve "Today" button on/or outside of the component:
flatpickr/flatpickr#202 (comment)

Thank you!

First keystroke on highlighted time input is not picked up

See the attached GIF. The log represents the value of the minutes input span tag. In this GIF I am ...

1. Clicking the minute input to highlight its text
2. Hitting the "1" key. This happens in the GIF when you see the text un-highlight and the cursor moves to the end of the input. However, my keystroke is not reflected in the input's value.
3. On subsequent keypresses, the "1" is picked up.

The expected behavior is that, when the text is highlighted, any keystokes would overwrite the current value. This seems to be a problem only with the React component, not with Flatpickr itself.

Error: ReferenceError: window is not defined, occurred on server rendering

This issue happens only on v3.6.4 which upgrades flatpickr and occurred on server rendering.

ReferenceError: window is not defined
at /home/share/node/node_modules/flatpickr/dist/flatpickr.js:454:5
at /home/share/node/node_modules/flatpickr/dist/flatpickr.js:3:85
at Object. (/home/share/node/node_modules/flatpickr/dist/flatpickr.js:6:2)

Is there anyway we could do? Thanks

readme: doc++, add badges

altInput issue on validation on "onChange"

Hello,

I have 2 flatpickr's input, one for the start, one for the end.
If the end date is earlier than the start date, the state don't will update (likewise if start date is later than the end date) BUT the alt input will update.

So, it's a issue because the user can see a date that is different than the current state.

I did a codesandbox to illustrate this issue : https://codesandbox.io/embed/z2317xk7nx?module=%2Fsrc%2FFlatpickrDemo.js

Thank you

Please fix infinite loop

Hi,
This is my code:
<Flatpickr
onChange={v => {
this.setState({
task: update(this.state.task, {
repeatEnd: { $set: new Date(v) }
})
});
}}
options={{
minDate: this.state.task.startAt,
maxDate: this.state.task.dueAt,
enableTime: false,
defaultDate: this.state.task.repeatEnd
}}
/>

When defaultDate is null, I get infinite loop when I change value. But when defaultDate is not null, It works fine.
If I remove minDate, maxDate option, It works for defaultValue null.
Can you help me fix this. Thanks.
Sorry for my poor english.

css does not exist - flatpickr/dist/themes/material_green.css

I installed react-flatpickr. When I try to use it flatpickr/dist/themes/material_green.css or any css does not exist.

What are the css files to be included and where are they ?

How to get just a timepicker? Options not working.

Code:

<Flatpickr
  value={new Date()}
  options={{enableTime: true, noCalendar: true}} />

This still displays the calendar. Time is showing tho, so we're halfway there :)

There is an issue with days not being in-line

These are my package versions

flatpickr@^4.3.2:
version "4.4.0"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.4.0.tgz#44410ba77fd4feb6a24fa22a14a6111efe7882cb"

react-flatpickr@^3.6.3:
version "3.6.4"
resolved "https://registry.yarnpkg.com/react-flatpickr/-/react-flatpickr-3.6.4.tgz#41a8406d00d787b629839ae1f5a01ed3bb6e84ac"
dependencies:
flatpickr "^4.3.2"
prop-types "^15.5.10"

Strangely this is not happening with flatpickr 4.3.2. Hmm any idea why?

flatpickr@^4.0.5:
version "4.3.2"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.3.2.tgz#6a477043c075ef36c3ff54fadb49b936a64d635f"

[email protected]:
version "3.6.3"
resolved "https://registry.yarnpkg.com/react-flatpickr/-/react-flatpickr-3.6.3.tgz#a4d5ab83b2159192f3c68981e86e721bd67d562a"
dependencies:
flatpickr "^4.0.5"
prop-types "^15.5.10"

Examples

How are the examples viewable? I can't find them hosted anywhere, and I tried cloning but there's no facility to run a dev server?

Kind regards

The picker does not work during server side rendering.

I see this error during startup of my server.
ReferenceError: document is not defined
at Object. (/node_modules/flatpickr/dist/flatpickr.js:1571:22)

Is there a way where I don't have to do check for (typeof window !== 'undefined')

Time is printed in date

Whenever i select a date, it shows time along with it,

2017-06-12 12:00 to 2017-06-20 12:00

i even added enableTime: false to options object.

How would you use the confirmDate plugin with this?

EDIT: nevermind, figured it out :)

For those who look for this:

import confirmDatePlugin from 'flatpickr/dist/plugins/confirmDate/confirmDate'

const options = {
  plugins: [new confirmDatePlugin({})],
}

Component can't be controlled

Hey guys,
I tried to create controlled datepicker but it always has uncontrolled behaviour.
Do we you have some example of uncontrolled component?

passing style prop to the Flatpickr tag doesn't apply these styles

I tried passing a style prop that has some styling for the input of Flatpickr. But these styles doesn't apply at all

The installation is missing the CSS files

Hey!

I've tried to install the component but I've got an error message stating that the CSS files were missing. As a turn around I took them from the flatpickr repository.

BTW, thanks for the component, it's really handy. 😃

onOpen and set(option,value) doesnt work for defaultMinute and defaultHour option value

onOpen={function(selectedDates, dateStr, instance){
instance.set("minDate", new Date());
}}

The above code works fine, but when i need to set the defaultMinute / defaultHour value in the config,
it doesn't work as expected.

onOpen={function(selectedDates, dateStr, instance){
instance.set("defaultMinute", new Date().getMinutes());
}}

onOpen={function(selectedDates, dateStr, instance){
instance.set("defaultHour", 18);
}}

Can you please let know if this can achieved.

Examples assign wrong attribute format

examples provide attributes as data-enabletime when they are really data-enable-time

Remove minDate, maxDate and dateFormat from props

Hi,

Thanks for this library.

When using minDate and maxDate and dateFromat through the props, instead of the option object, the options object is passed correctly to flatpickr, but React (16) throws a warning saying it will not pass it to the input, which is "normal" as the input is a text input, and these attributes do not exist for a text input.

Passing the minDate/maxDate etc as props is interesting to limit rerenders (the options objetc has to be recreated each rerender of the parent component of 'react-flatplickr'), which retrigers a rerender.

The maxDate, minDate and other options for flatpickr shall be added to the 'hooks' array (here https://github.com/coderhaoxin/react-flatpickr/blob/master/lib/index.js#L6) so that they are also removed from the props passed to the input (here: https://github.com/coderhaoxin/react-flatpickr/blob/master/lib/index.js#L102)

I can make a PR if necessary.

Component does not render, blocks render.

The component does not seem to render at all, and in our case actually blocks any other components after it from rendering:

import 'flatpickr/dist/flatpickr.material_green.min.css';

import React, { Component, PropTypes } from 'react';
import Flatpickr from 'react-flatpickr';

/**
 * Date field
 *
 * @author Andrew McLagan <[email protected]>
 */
export default class DateField extends Component {

  static propTypes = {
    value: PropTypes.any.isRequired,
    onChange: PropTypes.func.isRequired,
    onBlur: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
  }

  render() {

    const { name, placeholder } = this.props;

    return (
      <div className="date-field clearfix">
        <Flatpickr
          data-enabletime
          onChange={() => console.log('123')}
        />
      </div>
    );
  }
}

Cannot clear date input

It appears clearing input is possible in the flatpickr library but not sure it can be triggered with react-flatpickr. In flatpickr, if a null value is detected in setDate it clears out the input. However, there doesn't seem to be a way to trigger this from react-flatpickr seeing has how it only calls setDate if the date value is not null.

Is there another way to clear the input?

How do I enable start & end time for the date range picker?

I've set the option to enable the date range picker, but when I set data-enable-time it only allows me to select one time, rather than a start and an end time. I would like users to submit a start and an end time. How would I enable this?

import React from "react";
import ReactDOM from "react-dom";
import Flatpickr from "react-flatpickr";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    return (
      <div className="App">
        <h1>Flatpickr Test</h1>
        <Flatpickr
          data-enable-time
          value={[date, "2016-01-10"]}
          options={{ mode: "range" }}
          onChange={(_, str) => console.info(str)}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working code:
https://codesandbox.io/s/14r8y26163

Need help changing dateFormat - output always the same

I am trying to output the date and time in this format: 2018-10-13 08:00:00
It's my first time using react-flatpickr and with my current code no matter what I try the date is always output like this: Fri Oct 12 2018 10:41:11 GMT-0700 (Pacific Daylight Time)

Here is my current code:

import "flatpickr/dist/themes/material_green.css"

import React from "react"
import Flatpickr from "react-flatpickr"
import { Component } from "react"

class DatePicker extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    console.log("Date: ", date)
    return (
      <Flatpickr data-enable-time
        value={date}
        options={{
            enableTime: true,
            dateFormat: "Y-m-d H:i:s",
        }}
        onChange={date => { this.setState({date}) }} />
    )
  }
}

export default DatePicker;

Can someone please show me how to properly output the value in the format I need?

Symbol is undefined

We don't have babel in our own code so we don't add babel runtime. Then it throws Symbol error on IE11.

Issue can be resolved by refactoring for of loop.

Trouble overriding flatpickr css classes

Hi,
Thanks for the react-flatpickr. It's great, but it seems certain css classes can't be overwritten.

The following CSS has no effect on the flatpickr styles. This should work, but does nothing.

.flatpickr-calendar { border-radius: 0 !important; border: 0 !important; font-size: 16px !important; }

Am I missing something?

Timepicker does not get correct value if used with onChange

For example, the following displays the correct time from props.value:

<Flatpickr
  value={this.state.date}
  options={{enableTime: true, noCalendar: true}}
/>

But this example displays the current date and time, not props.value

<Flatpickr
  value={this.state.date}
  options={{enableTime: true, noCalendar: true}}
  onChange={handleChange}
/>

handleChange(selectedDates, dateStr, instance) {
  console.log(selectedDates[0]);  // gives undefined
  const selectedDate = moment(selectedDates[0]);
  let date= this.state.tempStartDateTime;
  date.set({'hour': selectedDate.hour(), 'minute': selectedDate.minute()})
  this.setState({date: date});
}

clickOpens

Flatpickr detects the initial flatpickr clickOpens state. if it's false it cannot be clicked open, as expected.
But if you change that boolean to true later, it stays unopenable. I expect to be able to couple that with my own control variable. I did check inside Chrome's React Devtools that the datetime picker option's clickOpens option really changed from false to true, so that cannot be my error

Cannot set placeholder???

how to set placeholder text? Is there any way to do?

Locales not provided

Hi,

it would be nice to have l10n.

It has been done on one of the forks
see: vylum@edf3af6

Component cannot be used as a controlled input

we cant use this as a controlled input:

  componentDidUpdate() {
    this.Flatpickr.setDate(this.props.value);
  }

something like that should work.

Update to flatpickr v4

Hello,

First, thank you for your work : flatpickr is one of the best open source date picker !

Is it possible to update react-flatpickr to flatpickr v4 ?

Thank you !

Moving focus to a react-flatpickr component

Hi, I'm currently using a two Flatpickr components for split Date/Time inputs, and am trying to implement the following behaviour when user selects a Date:

• the Date dropdown (calendar) is closed - 👍
• the Time dropdown (timepicker) is opened - 👍
• focus moves from the Date input to the Time input - 👎 not sure how to do this

I think it's because refs have to be on a DOM element, not a component? So the following doesn't work:

handleChange(...) {
   ...
   this.dateInput.focus();
}

render() {
    return (
        <Flatpickr
            ...
            ref={input => this.dateInput = input}
        />
    );
}

handleChange(...) {
   ...
   this.dateInput.focus();
}

render() {
    return (
        <span ref={input => this.dateInput = input}>
            <Flatpickr ... />
        </span>
    );
}

How could I achieve this? Thanks in advance!

Is it possible to use an own input field like a react-toolbox input?

hey i would like to know if it is possible to use an custom input field like a react-toolbox input field? And is it possible to format the date via react-intl? I don't know if this is too specific but would be glad to receive an answer :)

greetings

Problem with modal

Hi , when i use react modal with react-flatpickr year and month dont work fine.
Sorrty for my poor english

Latest [email protected] caused ReferenceError: document is not defined

This issue happened just now while running test using JEST, and I traced back to the issue is originated from the latest upgrade of flatpickr on version 4.1.1.

If I run my test it shows error as following:

    TypeError: Cannot read property 'parentNode' of undefined

      at node_modules/flatpickr/dist/flatpickr.js:2:193
      at Object.<anonymous> (node_modules/flatpickr/dist/flatpickr.js:2:225)
      at Object.<anonymous> (node_modules/react-flatpickr/build/index.js:19:18)
      at Object.<anonymous> (src/app/components/Order/CustomerModifyAddressEventsContent.js:9:49)
      at Object.<anonymous> (src/app/components/Order/CustomerModifyAddressEvents.js:7:69)
      at Object.<anonymous> (__tests__/app/components/CustomerModifyAddressEvents.test.js:6:36)
      at handle (node_modules/worker-farm/lib/child/index.js:44:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
      at emitTwo (events.js:106:13)
      at process.emit (events.js:191:7)
      at handleMessage (internal/child_process.js:718:10)
      at Pipe.channel.onread (internal/child_process.js:444:11)

Moreover, once I upgrade to [email protected], I cannot even start up my project since it always fails on SSR, error log:

/Users/cslinmiso/Documents/Repositories/runnerProject/node_modules/flatpickr/dist/flatpickr.js:2
(function(l, i, v, e) { v = l.createElement(i); v.async = 1; v.src = '//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; e = l.getElementsByTagName(i)[0]; e.parentNode.insertBefore(v, e)})(document, 'script');
                                                                                                                                                                                                                                 ^

ReferenceError: document is not defined
    at Object.<anonymous> (/Users/cslinmiso/Documents/Repositories/runnerProject/node_modules/flatpickr/dist/flatpickr.js:2:226)
    at Module._compile (module.js:541:32)
    at Module._extensions..js (module.js:550:10)

I had tried using version 4.1.0 and it worked with no error. Not sure why and I wonder if anyone meets this issue since 4.1.1 released 4 hours ago...

Thanks.

incrementing date range selection buttons,

Hello guys,

I've been in a constant struggle with flatpickr for the last few days as I'm trying to push custom buttons on your body.

I know the right thing would be to create a plugin for Flatpickr (I confess I tried), but because of my level of experience and a lack of documentation for this kind of development, I ended up going to the HARDCODE side.

However, I was able to do something visual of what I want to do, but it is not working, see what I did:

<Flatpickr
  data-mode='range'
  data-allow-input='true'
  options={{
    altInput: true, 
    altFormat: this.state.format, 
    onOpen: (selectedDates, dateStr, instance) => {                      
      if(!document.getElementById('selectRanges')) {
        
        let _elem = document.getElementsByClassName(instance.calendarContainer.classList.value)[0]
        let elemClone = _elem.cloneNode(true)
        
        function createMarkup() {
          return {__html: elemClone.innerHTML};
        }
        const ElemFinal = (props) => (
          <Fragment >
            <div dangerouslySetInnerHTML={createMarkup()}></div>
            <div id='selectRanges'>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastYear')}>Last Year</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastMonth')}>Last Month</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastWeek')}>Last Week</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('today')}>Today</Button>
            </div>
          </Fragment>
        )

        ReactDOM.render(<ElemFinal/>, document.getElementsByClassName(instance.calendarContainer.classList.value)[0])
      }
    },
  }}
  value={this.state.date}
  onChange={date => { this.getData(this.state.data, date) }}
  className='form-control'
  placeholder='Select a period'/>

VERY GOOD, visually perfect for me

But all of Flatpickr's own buttons (months prev and next, years, days) do not work, just my custom buttons.

Analyzing the problem, I noticed the generated HTML has a div like child, maybe it is it, or maybe not.

<div class="flatpickr-calendar rangeMode animate open arrowTop" tabindex="-1" style="top: 289px; left: 499.5px; right: auto;">
  <div>
    <div class="flatpickr-months">
      <span class="flatpickr-prev-month">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
          <g></g>
          <path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path>
        </svg>
      </span>
      <div class="flatpickr-month">
        <div class="flatpickr-current-month">
          <span class="cur-month" title="Scroll to increment">June </span>
          <div class="numInputWrapper"><input class="numInput cur-year" type="text" pattern="\d*" tabindex="-1" title="Scroll to increment" aria-label="Year"><span class="arrowUp"></span><span class="arrowDown"></span></div>
        </div>
      </div>
      <span class="flatpickr-next-month">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
          <g></g>
          <path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path>
        </svg>
      </span>
    </div>
    <div class="flatpickr-innerContainer">
      <div class="flatpickr-rContainer">
        <div class="flatpickr-weekdays">
          <div class="flatpickr-weekdaycontainer">
            <span class="flatpickr-weekday">
            Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
            </span>
          </div>
        </div>
        <div class="flatpickr-days" tabindex="-1">
          <div class="dayContainer"><span class="flatpickr-day prevMonthDay" aria-label="May 27, 2018" tabindex="-1">27</span><span class="flatpickr-day prevMonthDay" aria-label="May 28, 2018" tabindex="-1">28</span><span class="flatpickr-day prevMonthDay" aria-label="May 29, 2018" tabindex="-1">29</span><span class="flatpickr-day prevMonthDay" aria-label="May 30, 2018" tabindex="-1">30</span><span class="flatpickr-day prevMonthDay" aria-label="May 31, 2018" tabindex="-1">31</span><span class="flatpickr-day " aria-label="June 1, 2018" tabindex="-1">1</span><span class="flatpickr-day " aria-label="June 2, 2018" tabindex="-1">2</span><span class="flatpickr-day " aria-label="June 3, 2018" tabindex="-1">3</span><span class="flatpickr-day " aria-label="June 4, 2018" tabindex="-1">4</span><span class="flatpickr-day today" aria-label="June 5, 2018" aria-current="date" tabindex="-1">5</span><span class="flatpickr-day " aria-label="June 6, 2018" tabindex="-1">6</span><span class="flatpickr-day " aria-label="June 7, 2018" tabindex="-1">7</span><span class="flatpickr-day " aria-label="June 8, 2018" tabindex="-1">8</span><span class="flatpickr-day " aria-label="June 9, 2018" tabindex="-1">9</span><span class="flatpickr-day " aria-label="June 10, 2018" tabindex="-1">10</span><span class="flatpickr-day " aria-label="June 11, 2018" tabindex="-1">11</span><span class="flatpickr-day " aria-label="June 12, 2018" tabindex="-1">12</span><span class="flatpickr-day " aria-label="June 13, 2018" tabindex="-1">13</span><span class="flatpickr-day " aria-label="June 14, 2018" tabindex="-1">14</span><span class="flatpickr-day " aria-label="June 15, 2018" tabindex="-1">15</span><span class="flatpickr-day " aria-label="June 16, 2018" tabindex="-1">16</span><span class="flatpickr-day " aria-label="June 17, 2018" tabindex="-1">17</span><span class="flatpickr-day " aria-label="June 18, 2018" tabindex="-1">18</span><span class="flatpickr-day " aria-label="June 19, 2018" tabindex="-1">19</span><span class="flatpickr-day " aria-label="June 20, 2018" tabindex="-1">20</span><span class="flatpickr-day " aria-label="June 21, 2018" tabindex="-1">21</span><span class="flatpickr-day " aria-label="June 22, 2018" tabindex="-1">22</span><span class="flatpickr-day " aria-label="June 23, 2018" tabindex="-1">23</span><span class="flatpickr-day " aria-label="June 24, 2018" tabindex="-1">24</span><span class="flatpickr-day " aria-label="June 25, 2018" tabindex="-1">25</span><span class="flatpickr-day " aria-label="June 26, 2018" tabindex="-1">26</span><span class="flatpickr-day " aria-label="June 27, 2018" tabindex="-1">27</span><span class="flatpickr-day " aria-label="June 28, 2018" tabindex="-1">28</span><span class="flatpickr-day " aria-label="June 29, 2018" tabindex="-1">29</span><span class="flatpickr-day " aria-label="June 30, 2018" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="July 1, 2018" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="July 2, 2018" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="July 3, 2018" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="July 4, 2018" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="July 5, 2018" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="July 6, 2018" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="July 7, 2018" tabindex="-1">7</span></div>
        </div>
      </div>
    </div>
  </div>
  <div id="selectRanges"><button type="button" class="btn btn-link btn-sm">Last Year</button><button type="button" class="btn btn-link btn-sm">Last Month</button><button type="button" class="btn btn-link btn-sm">Last Week</button><button type="button" class="btn btn-link btn-sm">Today</button></div>
</div>

Code in:
https://codesandbox.io/s/ol4y35z26y

I would like to know someone's opinion on how I can solve this problem, in any way, either by improving this same code, or by putting together a plugin.

Regards

onChanged doesn't fire on changing times

onChange is not triggered after time input value update. This is an old issue in Flatpickr: flatpickr/flatpickr#1166

react-flatpickr uses an old version of flatpickr. From package.json:

    "flatpickr": "^4.3.2",

The last version of flatpickr is v4.5.2`.

Updating this dependency may solve this.

Be able to disable flatpickr input

We should be able to prevent toggling of flatpickr when disabled prop is passed

https://github.com/chmln/flatpickr/releases/tag/v1.7.1

Outdated dependency to Flatpickr

The dependency to Flatpickr is outdated. I think this might cause an error regarding setting localization globally. See flatpickr/flatpickr#937

Can't change hours and minutes normally.

When i am changing month or PM/AM, it changes perfectly, but when i am trying to change hours and minutes it changes it +1 and closes calendar. How to fix?

Using rangePlugin with react-flatpickr.?

Is there any way I can use rangePlugin with "react-flatpickr".?

https://chmln.github.io/flatpickr/plugins/#rangeplugin-beta

Allow "wrap" option

Hello and thanks for your work!

I'd like to use the wrap option but I can't figure how with the react-component.
I'm missing something or it is a feature do you plan to add in the future?

Thank you.

On mobile browser, it don`t turns the date input into a native input

First of all, thanks for your work!
We use react-flatpickr on our site(minskgo.by). And have a problem.
On iPhone react-flatpickr work very bad. We don`t see native input (like here https://chmln.github.io/flatpickr/mobile-support/).
Is it possible to solve this problem?

Uncaught exception when entering gibberish in the input field

Hi,

When putting anything (but not a valid date) in the input field and pressing "Enter", an exception is thrown in the dev console:

Error: Invalid date provided: toto
Stack trace:
parseDate@http://localhost:9876/main.js:80266:38
setSelectedDate@http://localhost:9876/main.js:80106:30
setDate@http://localhost:9876/main.js:80131:9
onKeyDown@http://localhost:9876/main.js:79661:17
EventListener.handleEvent*bind@http://localhost:9876/main.js:78942:9
bindEvents@http://localhost:9876/main.js:78975:13
init@http://localhost:9876/main.js:78824:9
FlatpickrInstance@http://localhost:9876/main.js:80478:5
…

I guess there is a check that the value is a correct date value here https://github.com/coderhaoxin/react-flatpickr/blob/master/lib/index.js#L74.

Thanks!

How to localize?

import 'flatpickr/dist/l10n/no.js';

<Flatpickr options={{ locale: 'no'}}/>

index_bundle.js:35038 flatpickr: invalid locale no