Flatpickr: Feature Request: Months and Years only picker

[dev4press]

Check out datetime picker that offers method for picking only month or only year: http://t1m0n.name/air-datepicker/docs/#example-months.

It would be great to have something like that available in Flatpickr.

Milan

[chmln]

Hello,

To be honest, I don't find this a necessary, or even very usable to be worth the effort of implementing.
Also, a lot of clicking there, and no options of direct input.

A couple of selects would be much easier to use

[thejae]

+1 for this feature. May suggest the implementation of year range selection as well. For eg; Jan 2001 - Dec 2010

[Guoxweii]

• 1

[heyange2002]

+1

[RedShift1]

+1 Seems like a nice usability improvement in cases where you're working with months and selecting a day wouldn't make sense.

[davestewart]

A couple of selects would be much easier to use

@chmln

We've just started using this at a bank, and choosing by month is something we do a lot.

It's a perfectly valid use case, especially when we only want to rely on a single configurable date-picker component.

[chmln]

Now that scrolling is removed, let's make this happen :)

[davestewart]

That's great news! The team is stoked 😁

[davestewart]

@chmln - of course, we're interested to track the progress of any work on this.

Is there an ETA, or some way for us to do this?

I'd be happy to work on this myself, though my knowledge of Flatpickr is minimal.

Just checking out the docs, it seems that in the first instance, the time picker JS and UI could be repurposed.

{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
}

I might get one of our guys to look at this next week...

[ngstwr]

@chmln Is there a timeline for this or is it already implemented? I couldn't find any option or mention on documentation.

[chmln]

Hey all, I wish I could provide an ETA but I can't at the moment. It will be as soon as I can get some chunk of free time, within a month or two. Extremely busy at the moment in my final year at university.

If anyone wants to work on this - please go ahead, but keep it plugin-based as flatpickr core should not get any larger.

Thank you all for patience. :)

[paolog22]

+1 for this user make the Month and Year Select/Dropdown for easy navigation, rather than clicking multiple times just to navigate

[emotec1]

+1

[gr8tushar]

+1

[torlokken]

+1

[mordekasg]

+1

[stebrl]

+1

[DarkMikey]

@chmln Any news on this?

[dzfiqar]

+1

[rafalolszewski94]

Now that scrolling is removed, let's make this happen :)

Anything happened since then ? Kind of a crucial aspect if you consider this library as a multi-tool for dates and time (like I do)

[davestewart]

Kind of a crucial aspect if you consider this library as a multi-tool for dates and time (like I do)

Just to put how critical this is into context, we moved on to the very capable Element UI date picker in the end:

• https://element.eleme.io/#/en-US/component/date-picker#other-measurements

[viorelsfetea]

Just wanted to write a small update about the months selector, since so many people are waiting for the feature: work is under way and this will soon be available as a separate plugin.

Here's a small preview of the current progress:

[fernahh]

Hi, @viorelsfetea!

I've seen that you removed the label "will-implement", but reading the pull request https://github.com/flatpickr/flatpickr/pull/1699, it's just about month selection and not is about year selection.

The year picker will be implemented? :thinking:

[viorelsfetea]

Hi @fernahh,

That is correct. Flatpickr comes with its own type of year selector and, at this point, we feel that it offers a better UX and it's more intuitive than clicking on the year to show a list of other years

[catalinred]

That is correct. Flatpickr comes with its own type of year selector and, at this point, we feel that it offers a better UX and it's more intuitive than clicking on the year to show a list of other years

Hi @viorelsfetea,

I'm looking forward to playing w/ the new picker, but noticed it wasn't released yet: https://github.com/flatpickr/flatpickr/releases

When to expect the release? Also, is there a way/link/playground to see how this month/year picker works?

Thanks!

[croane]

After spending hours playing with other options for a simple month + year selector, I am getting desperate. I'm already using flatpickr for normal date selections, and this will be a massive timesaver for me. Looking forward to testing this out!

[peyobr]

+1 please save my life!!!

[kmluc]

+1

[chmln]

Guys, v4.6 is out and includes a basic month selector. A fancier version (what most of you expect, I think) will be in the next release :)

[croane]

I can't seem to get this to work. I used the code that was included in the pull request and included the index.js plugin file, but it can't find the JS class monthSelect. How can I get this working?

[mordekasg]

I can't seem to get this to work. I used the code that was included in the pull request and included the index.js plugin file, but it can't find the JS class monthSelect. How can I get this working?

Use: monthSelectPlugin.

[croane]

Thanks, @mordekasg! This config worked:

{
  static: true,
  altInput: true,
  plugins: [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
}

[Kinjalbagaria]

@chmln : Is there any option available to disable this monthSelect? coz I dont want this functionality by default.

[abriginets]

@chmln I agree with @Kinjalbagaria. Please, make new functionality disabled by default. I want a simple text, not ugly <select>.

[mikes-gh]

@Kinjalbagaria @JamesJGoodwin

I think this thread is about the month select plugin which is different to the <SELECT> month function which was added recently. As you have found out <SELECT> doesnt look great in a lot of browsers and cant be styled.

I think you are looking for this issue

https://github.com/flatpickr/flatpickr/issues/1826

[el-mark]

Thanks, @mordekasg! This config worked:

{
  static: true,
  altInput: true,
  plugins: [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
}

Should I need to import the monthSelectPlugin on the component? I see this error "Uncaught ReferenceError: monthSelectPlugin is not defined". If some can help please.

[mikes-gh]

You need

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">

in your HEAD section

and

<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

in your scripts section

[artur79]

If anyone struggling with it, here's how to load that plugin in Rails' webpacker

import flatpickr from 'flatpickr'
require("flatpickr/dist/flatpickr.css")

import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
require('flatpickr/dist/plugins/monthSelect/style.css')