In search of JavaScript Month Picker

Question

I'm in search of a JavaScript month selection tool. I'm already using jQuery on the website, so if it were a jQuery plugin, that would fit nicely. I'm open to other options, as well.

Basically, I'm after a simplified version of the jQuery UI Date Picker. I don't care about the day of the month, just the month and year. Using the Date Picker control feels like overkill and a kludge. I know I could just use a pair of select boxes, but that feels cluttered, and then I also need a confirmation button.

I'm envisioning a grid of either two rows of six columns, or three rows of four columns, for month selection, and current and future years across the top. (Maybe the ability to list a few years? I can't see anyone ever needing to go more than a year or two ahead, so if I could list the current and next two years, that would be swell.)

It's really just a dumbed down version of the DatePicker. Does something like this exist?

What have you done in the meantime? I'm also looking for exactly the same right now. — markus, Jul 27 '09 at 14:18
I've had to put the entire project on hold, so for now the problem has been relegated to the back burner. — Adam Tuttle, Jul 28 '09 at 17:20
I've changed the accepted answer. The new one is actively maintained on GitHub. — Adam Tuttle, Feb 12 '16 at 02:47
@AdamTuttle Nice. I've also managed to get 6 of the worst answers nuked through mod flags or pestering their authors into self-deletion with comments and downvotes. I think the chance that this page will help Googlers landing on it has risen significantly as a result; may it evade the "questions asking us to recommend a tool or software library are off-topic" close reason for a while longer! — Mark Amery, Feb 20 '16 at 13:41
If you look for pure javascript snippet. check here to get it http://www.kvcodes.com/2018/04/simple-javascript-month-year-picker/ — Kvvaradha, Apr 26 '18 at 10:28

score 19 · Answer 1 · edited May 23 '17 at 12:34

Ben Koehler from this equivalent question offers a jquery ui hack that works decently. Quoted here for convenience, all credit is his.

JSFiddle of this solution

-- Here's a hack (updated with entire .html file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

The problem with this hack is that you can't use any other normal date pickers on the page, because their calendars will be hidden as well. — Brook, Oct 12 '11 at 13:36
It suffers from another rather important issue however (Chrome 32, but I suspect everywhere). After selecting a date, and then opening the picker again, it always goes to today's date. Thus, even tabbing across this field will change whatever date you had entered to today's date. Along the same lines, there's no way to cancel the datepicker - if you open it by accident, you must choose a new date. I've spent a bit of time trying to work around the problem, but so far no dice. — Julian, Jan 28 '14 at 19:14
itsaruns, I've been trying everything I could find, to add an id to the datepickers, so I could add the CSS to the individual datepickers, and not to all of them, but nothing seems to work. Please, if you (or anyone else) knows how to do this, could you post it here? — Ultroman the Tacoman, Sep 29 '14 at 19:20
You just can't use an ID, because the element already have one. Also, the element is recycled. Here is an example using a class: beforeShow: function(input, inst) { inst.dpDiv.addClass('monthpicker'); } onClose: function(input, inst) { inst.dpDiv.removeClass('monthpicker'); } — Asrail, Dec 07 '14 at 03:14

score 15 · Accepted Answer · answered Oct 15 '13 at 19:04

15

To anyone still looking forward into this (as I was), here is an beautiful, easy to use, jQuery UI compatible, well documented, tested alternative:

Month picker example

Its default usage is simple as doing the following:

$("input[type='month']").MonthPicker();

answered Oct 15 '13 at 19:04

gustavohenke

40,997
14
121
129

is there a way to configure the month/year format? So instead of May 2013 we see 2013-05 – a coder Nov 03 '20 at 15:36

Ramon Tayag · Answer 3 · 2016-02-13T05:17:03.557

9

Found one on lucianocosta.info. It looks pretty good:

Month Picker in action

UPDATED 2016-02-13: link that works

edited Feb 13 '16 at 05:17

answered Nov 12 '12 at 05:06

Ramon Tayag

15,224
9
43
69

just that it helps someone in future, u need atleast jquery 1.4.3 to make this work correctly. I got `undefined` value for month while using jquery 1.4.2 – redDevil May 24 '13 at 14:43

Paolo Bergantino · Answer 4 · 2008-10-12T21:10:45.423

3

I used this script in a program a while back. While it is ancient, it works on all browsers well. If you look down to "Month-select calendar" I believe that is what you are looking for. The example that is there has the calendar opening in a new window (ew) but 1 setting (like the 2nd example) makes it show ala jQuery. Good luck.

edited Oct 12 '08 at 21:10

answered Oct 12 '08 at 21:03

Paolo Bergantino

480,997
81
517
436

score 3 · Answer 5 · answered Sep 16 '15 at 16:03

3

Feel free to have a look on my own jQuery plugin :

Easy to use :

$("#myTextInput").Monthpicker();

There is not a lot of options yet, but you can bound the input to a restricted range of month.

There are also events that provide a way of coding interdependency between two monthpicker (start & end date)

You can find a live demo here : Codepen

You are free to take the source code from Github and change whatever you want : Github repository

answered Sep 16 '15 at 16:03

Apolo

3,844
1
21
51

HI can this be configured to post different month/year formats such as yyyy-MM? – a coder Nov 03 '20 at 15:37
it isn't but you can split and reverse the value to achieve the same effect – Apolo Nov 04 '20 at 10:08

score 0 · Answer 6 · answered May 12 '09 at 21:23

I just had a pick a date picker the other day. I found two other interesting examples that might help you out, but I'm not sure how you are going to do this without showing the calendar. Most "date pickers" just assume you are going to want to see a calendar. You might do better to look for a custom dropdown that has some custom buttons you can configure.

Here are the ones I looked at:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

I ended up using this one: http://jqueryui.com/demos/datepicker/

If you are any good with JQuery, you might have come up with a good little project.

In search of JavaScript Month Picker

6 Answers6

Linked