Added monthSelect plugin.

[skatt]

It works similarly to the weekSelect plugin.

[coveralls]

Coverage remained the same at 86.299% when pulling 55e5add on skatt:monthSelect into 41ac3a8 on chmln:master.

[chmln]

Not sure if its necessary to display the days here.

I was thinking of something more like:

(without the range, that is)

[skatt]

I agree. I'm not extremely familiar with the code. If you could point me in the direction of overriding the calendar render, I'd be happy to complete the plugin. I have a pretty good idea of how to make the container for the months and everything, just no clue how to change the popup itself.

[coveralls]

Coverage remained the same at 85.098% when pulling 03f5982 on skatt:monthSelect into 7dcd64d on chmln:master.

[chmln]

@skatt just create some div and append it to fp.rContainer.

First, I'd add some class to fp.calendarContainer like "monthSelect".

Then, you could hide the month name and weekdays by

.flatpickr-calendar.monthSelect
    span.cur-month, div.flatpickr-weekdays
        display none

Second: hiding days - hook into onParseConfig and set fp.config.noCalendar = true.

Third: prevent arrows from changing months and change years instead

fp.prevMonthNav.removeEventListener("click", fp.prevMonthFn);
fp.nextMonthNav.removeEventListener("click", fp.nextMonthFn);

Then add your own listeners and just increase/decrease fp.currentYear.

The rest should be just a matter of styling.

[aseem2625]

Merge this please!

[chmln]

Hello,

Thank you for your work on the plugin.
I will soon convert it to typescript and merge into master.

[oller]

Looks great, will this support month range selection?

[eliteproxy7]

sorry if this sounds stupid but how can I use this?

[oller]

@eliteproxy7, this is an unmerged pull request, so it's not in the released version yet.

[eliteproxy7]

I downloaded from this pull I placed the monthSelect folder in my plugins directory.

I also incldued the monthSelect.js & monthSelect.css in my Gulp script.

here is my code

if ($('.date-picker-my')[0]) {
        $('.date-picker-my').flatpickr({
            plugins: new monthSelect({}),
            onChange: function(selectedDates, dateStr, instance) {
                var elment = instance.element.getAttribute('data-credititem');       
            },
            enableTime: false,
           // dateFormat: "m-d-Y",
            nextArrow: '<i class="zmdi zmdi-long-arrow-right" />',
            prevArrow: '<i class="zmdi zmdi-long-arrow-left" />'
        });
    }

i get this error
ReferenceError: monthSelect is not defined

[eliteproxy7]

I got it running.. sort of

flatpickr(".date-picker-my", {
plugins: [new monthSelectPlugin({ })]
});

but its showing the dateRange functionality and I do not have the daterange included anywhere

[MamesPalmero]

Does anyone know if this will be merged soon?

[ghost]

I would also like to know if this will be merged.. hopefully soon.

[mankinchi]

How is the progress on adding this to master?

[chmln]

Hey all,

This is what the plugin looks like:

I may work on this plugin further in the future, but you can have it now :)

[gr8tushar]

Hi,
Is the month selection merged in the main branch. If so, do we have the updated documentation for the same ?