haoxins / react-flatpickr

flatpickr for React
MIT License
598 stars 102 forks source link

is there a way to use monthSelectPlugin , this doesnot seems to work ? #209

Open innv-imtinan opened 1 year ago

innv-imtinan commented 1 year ago
<script>
import Flatpickr from 'react-flatpickr'
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect';
import '@styles/react/libs/flatpickr/flatpickr.scss'
import 'flatpickr/dist/plugins/monthSelect/style.css'
</script>

<Flatpickr
                value={selectedDate}
                onChange={date => setSelectedDate(date[0])}
                options={{
                    plugin: [
                        new monthSelectPlugin({
                            shorthand: true, //defaults to false
                            dateFormat: "m.y", //defaults to "F Y"
                            altFormat: "F Y", //defaults to "F Y"
                        })
                    ]
                }}

            />
zavan commented 1 year ago

I was able to make it work, I think you're only missing the plugin CSS import and you have a typo, the option is called plugins, not plugin.

import "flatpickr/dist/flatpickr.min.css";
import "flatpickr/dist/plugins/monthSelect/style.css"; // <-----

import Flatpickr from 'react-flatpickr'
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";

<Flatpickr
  value={value}
  onChange={onChange}
  options={{
    plugins: [new monthSelectPlugin()],
  }}
/>
mrinmay7875 commented 10 months ago

Zavan, is correct. I was able to make it work by using the plugins instead plugin. I think we should go ahead and close this issue since it is working as designed.