Home » Jquery » In search of JavaScript Month Picker

In search of JavaScript Month Picker

Posted by: admin November 30, 2017 Leave a comment

Questions:

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?

Answers:

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();
Questions:
Answers:

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>

Questions:
Answers:

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

Month Picker in action

UPDATED 2016-02-13: link that works

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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.