Skip to content

Feature Request: Months and Years only picker #269

New issue
New issue
Open
Open
Feature Request: Months and Years only picker#269
Assignees
viorelsfetea
Labels
[status] pending releaseimprovement
@dev4press

Description

@dev4press
dev4press
opened on Aug 26, 2016
Contributor

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

Activity

chmln

chmln commented on Sep 16, 2016

@chmln
chmln
on Sep 16, 2016
Member

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

chmln
closed this as completedon Sep 16, 2016
thejae

thejae commented on Mar 28, 2017

@thejae
thejae
on Mar 28, 2017

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

Guoxweii

Guoxweii commented on Jul 13, 2017

@Guoxweii
Guoxweii
on Jul 13, 2017
  • 1
heyange2002

heyange2002 commented on Jul 24, 2017

@heyange2002
heyange2002
on Jul 24, 2017

+1

havgry
mentioned this on Aug 28, 2017
RedShift1

RedShift1 commented on Nov 14, 2017

@RedShift1
RedShift1
on Nov 14, 2017

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

davestewart

davestewart commented on Aug 15, 2018

@davestewart
davestewart
on Aug 15, 2018

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
reopened this on Aug 15, 2018
chmln

chmln commented on Aug 15, 2018

@chmln
chmln
on Aug 15, 2018
Member

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

davestewart

davestewart commented on Aug 15, 2018

@davestewart
davestewart
on Aug 15, 2018

That's great news! The team is stoked 😁

davestewart

davestewart commented on Aug 28, 2018

@davestewart
davestewart
on Aug 28, 2018 · edited by 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

ngstwr commented on Oct 3, 2018

@ngstwr
ngstwr
on Oct 3, 2018

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

chmln

chmln commented on Oct 3, 2018

@chmln
chmln
on Oct 3, 2018
Member

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

paolog22 commented on Nov 20, 2018

@paolog22
paolog22
on Nov 20, 2018

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

28 remaining items

mordekasg

mordekasg commented on Jun 3, 2019

@mordekasg
mordekasg
on Jun 3, 2019

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

croane commented on Jun 4, 2019

@croane
croane
on Jun 4, 2019

Thanks, @mordekasg! This config worked:

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

Kinjalbagaria commented on Jun 5, 2019

@Kinjalbagaria
Kinjalbagaria
on Jun 5, 2019

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

abriginets

abriginets commented on Jun 15, 2019

@abriginets
abriginets
on Jun 15, 2019

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

mikes-gh

mikes-gh commented on Jun 17, 2019

@mikes-gh
mikes-gh
on Jun 17, 2019 · edited by mikes-gh
Contributor

@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

#1826

el-mark

el-mark commented on Jun 20, 2019

@el-mark
el-mark
on Jun 20, 2019 · edited by 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

mikes-gh commented on Jun 20, 2019

@mikes-gh
mikes-gh
on Jun 20, 2019
Contributor

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

techouse
mentioned this on Jul 13, 2019
rzueger
mentioned this on Oct 15, 2019
rlue
mentioned this on Sep 9, 2020
artur79

artur79 commented on Mar 11, 2021

@artur79
artur79
on Mar 11, 2021

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')
ameerjohn

ameerjohn commented on Nov 3, 2021

@ameerjohn
ameerjohn
on Nov 3, 2021

import "./styles.css";
import Flatpickr from "react-flatpickr";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
require("flatpickr/dist/plugins/monthSelect/style.css");
require("flatpickr/dist/flatpickr.css");

export default function App() {
const options = {
plugins: [
new monthSelectPlugin({
// shorthand: true, //defaults to false
// dateFormat: "F Y", //defaults to "F Y"
// altFormat: "F Y", //defaults to "F Y"
// theme: "light" // defaults to "light"
})
]
};
return (


<Flatpickr options={options} value={new Date()} />

);
}

ameerjohn

ameerjohn commented on Nov 3, 2021

@ameerjohn
ameerjohn
on Nov 3, 2021

import "./styles.css"; import Flatpickr from "react-flatpickr"; import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect"; require("flatpickr/dist/plugins/monthSelect/style.css"); require("flatpickr/dist/flatpickr.css");1635942764127>
export default function App() { const options = { plugins: [ new monthSelectPlugin({ // shorthand: true, //defaults to false // dateFormat: "F Y", //defaults to "F Y" // altFormat: "F Y", //defaults to "F Y" // theme: "light" // defaults to "light" }) ] }; return (

<Flatpickr options={options} value={new Date()} />

);
}

#

carltongibson

carltongibson commented on Jul 19, 2023

@carltongibson
carltongibson
on Jul 19, 2023

The provided monthselectplugin resolves this issue. I think it could be closed. 🤔

https://flatpickr.js.org/plugins/#monthselectplugin

nmauludina

nmauludina commented on Aug 6, 2023

@nmauludina
nmauludina
on Aug 6, 2023

The provided monthselectplugin resolves this issue. I think it could be closed. 🤔

https://flatpickr.js.org/plugins/#monthselectplugin

How to use it with cdn?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

[status] pending releaseimprovement

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @carltongibson@davestewart@artur79@dev4press@torlokken

      Issue actions
        Feature Request: Months and Years only picker · Issue #269 · flatpickr/flatpickr