Best IT Recipes

Looking for JavaScript Month Picker

I am looking for a JavaScript month selection tool. I already use jQuery on the website, so if it were a jQuery plugin that would fit nicely. I am also open to other options.

Basically, I am after a simplified version of jQuery UI Date Picker . I don’t care about the day of the month, only the month and year. Using a date picker control seems redundant and shredded. I know that I can just use a couple of selected boxes, but this feeling is cluttered, and then I also need a confirmation button.

I present a grid of two rows of six columns or three rows of four columns, for the choice of the month, as well as current and future years at the top. (Maybe an opportunity to list a few years? I don’t see anyone ever need more than a year or two, so if I could list the current and the next two years, it would swell.)

This is really just a dead end version of DatePicker. Does something like this exist?

+43
javascript jquery
Oct 12 '08 at 17:46
source share
6 answers

For those who are still looking ahead (like me), here is a beautiful, easy to use, jQuery UI compatible, well-documented, tested alternative:

Month picker example

Its use by default is simple, as it is done:

$("input[type='month']").MonthPicker();
+9
Oct 15 '13 at 19:04 on
source share

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

Jsfiddle of this solution

- Hacked here (updated the 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>
+18
Jul 27 '10 at 21:37
source share

Found one on lucianocosta.info . This looks good:

Month Picker in action

UPDATED 2016-02-13: link that works

+9
Nov 12
source share

I used this script in a program a while ago. Although it is ancient, it works well on all browsers. If you look down at the Monthly Pick Calendar, I think this is what you are looking for. In the example that is, there is the opening of the calendar in a new window (ew), but 1 setting (for example, the second example) makes it show ala jQuery. Good luck.

+3
Oct 12 '08 at 21:03
source share

Remember to see my own jQuery plugin:

Monthpicker screenshot

Easy to use:

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

There are not many options yet, but you can bind the entry to a limited month range.

There are also events that provide a way to code the interdependence between two periods (beginning and end of the date)

Here you can find a live demo: Codepen

You can take the source code from Github and change whatever you want: Github repository

+1
Sep 16 '15 at 16:03
source share

The other day, I just chose a date. I found two other interesting examples that may help you, but I'm not sure how you are going to do this without showing a calendar. Most "date pickers" simply assume that you want to see the calendar. You may need to find a custom drop-down menu that has some custom buttons that you can customize.

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 good at jQuery, you may have created a small project.

0
May 12, '09 at 21:23
source share


More articles:


All Articles