49

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?

5
  • What have you done in the meantime? I'm also looking for exactly the same right now.
    – markus
    Jul 27, 2009 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. Jul 28, 2009 at 17:20
  • I've changed the accepted answer. The new one is actively maintained on GitHub. Feb 12, 2016 at 2: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, 2016 at 13:41
  • If you look for pure javascript snippet. check here to get it kvcodes.com/2018/04/simple-javascript-month-year-picker
    – Kvvaradha
    Apr 26, 2018 at 10:28

6 Answers 6

19

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>
4
  • 4
    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, 2011 at 13:36
  • 1
    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, 2014 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? Sep 29, 2014 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 7, 2014 at 3:14
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();
1
  • is there a way to configure the month/year format? So instead of May 2013 we see 2013-05
    – a coder
    Nov 3, 2020 at 15:36
9

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

Month Picker in action

UPDATED 2016-02-13: link that works

1
  • 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, 2013 at 14:43
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.

0
3

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

Monthpicker screenshot

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

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

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.