The first beta of version 3.0

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "0.12.4"
+before_install: npm install -g grunt-cli
+install: npm install
+before_script: grunt

README.md

@@ -1,12 +1,21 @@
-<h1>The jQuery UI Month Picker Version 2.8.3</h1>
+<h1>The jQuery UI Month Picker Version 3.0-beta1</h1>
+
+[![Build Status](https://travis-ci.org/benjamin-albert/jquery-ui-month-picker.svg?branch=3.0_prototype)](https://travis-ci.org/benjamin-albert/jquery-ui-month-picker)
+[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
+
 <p>The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input is
-required. Clicking on the year, allows the user to jump ahead or back 5 years at a time. Clicking anywhere on the
+required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere on the
 page, except on the month picker menu itself, will cause the month picker to hide. The Month Picker has lots of options
 for date validation, setting the start year, using an icon button, input masking, internationalization and localization and more.</p>
 
 -See a demo on jsFiddle at...
 -http://jsfiddle.net/kidsysco/JeZap/
 
+<h2>Upgrading from version 2.x.x?</h2>
+<p>
+Please read the <a href='UPGRADE.md'>3.x Upgrade Guide</a>
+</p>
+
 <h2>Prerequisites</h2>
 <p>This plugin has been tested using the following configuration.</p>
 <ul>
@@ -23,10 +32,10 @@ for date validation, setting the start year, using an icon button, input masking
 </ul>
 
 <h2>Installation</h2>
-<p>Attach all required css and js files to the web page as follows...</p>
+<p>Attach all required CSS and JS files to the web page as follows...</p>
 <pre>
 &lt;link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
-&lt;link href="css/MonthPicker.css" media="all" rel="stylesheet" type="text/css" />
+&lt;link href="css/MonthPicker.min.css" media="all" rel="stylesheet" type="text/css" />
 
 &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">&lt;/script>
 &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript">&lt;/script>

UPGRADE.md

@@ -0,0 +1,67 @@
+# 3.x Upgrade Guide
+
+Version 3.x features a redesigned Month Picker menu which:
+
+1. Looks more consistent with [jQuery UI Datepicker](https://jqueryui.com/datepicker/).
+2. Turns the Year title into a button which gives the user a "hint" about
+the Jump Years menu when they mouse over it.
+3. Allows the user to return to the year they clicked Jump years at.
+
+See it for yourself at the [demo on JSFiddle](http://jsfiddle.net/kidsysco/JeZap/).
+
+##  i18n property name changes
+If you changed out the buttons, labels or other text using the
+i18n support you should rename and translate `next5Years` to `next12Years`
+and `prev5Years` to `prev12Years`.
+
+You should also add the `backTo` property, which is used for the
+new *Back to 2016* button when the user enters the Jump Year menu.
+
+##  CSS changes
+Version 3.x uses `em` instead of `px` units.
+This means that the menu determines it's size according to the
+`body` element's `font-size`, instead of having a fixed width of `200px`.
+
+If you need to resize the menu, add this rule to your CSS:
+```
+/* Makes the Month Picker menu 20% bigger. */
+.month-picker {
+  font-size: 1.2em;
+}
+```
+
+Version 3.x removes:
+```
+.month-year-input {
+    width: 60px;
+}
+```
+
+If you still want the plugin to implicitly resize the input fields it's applied to you must add this rule to your own CSS.
+
+If you explicitly defined a rule that reverts the effects of this rule, it's no longer necessary and it can be deleted.
+
+##  Markup changes
+If you've applied custom CSS to the Month Picker menu, please note that:
+
+The following elements were removed:
+```
+<td class="year-container-all">
+  <div id="year-container">
+   <span class="year-title" />
+   <span class="year" />
+    </div>
+```
+They were replaces by `<td class='month-picker-title'><a /></td>`.
+The `<a>` tag is a [jQyery UI Button](https://jqueryui.com/button/).
+
+The following elements:
+```
+<td class="previous-year"><button /></td>
+<td class="next-year"><button /></td>
+```
+were replaced by:
+```
+<td class="month-picker-next"><a /></td>
+<td class="month-picker-previous"><a /></td>
+```

bower.json

@@ -1,13 +1,16 @@
 {
   "name": "jquery-ui-month-picker",
-  "version": "2.8.3",
+  "version": "3.0-beta1",
   "homepage": "https://github.com/KidSysco/jquery-ui-month-picker",
   "authors": [
     "Ryan Segura <kidsysco@gmail.com>",
     "Benjamin Albert <benjamin_a5@yahoo.com>"
   ],
   "description": "jQuery UI Month Picker plugin",
-  "main": "MonthPicker.js",
+  "main": [
+    "MonthPicker.js",
+    "css/MonthPicker.css"
+  ],
   "license": "MIT",
   "ignore": [
     "**/.*",

css/MonthPicker.css

@@ -1,6 +1,5 @@
 /*
-
-The jQuery UI Month Picker Version 2.8.3
+The jQuery UI Month Picker Version 3.0-beta1
 
 https://github.com/KidSysco/jquery-ui-month-picker/
 
@@ -17,8 +16,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
 */
 
 .month-picker {
-    width: 200px;
-    display: none;
+    display: inline-block;
     position: absolute;
     z-index: 9999;
 }
@@ -28,67 +26,120 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
   border-spacing: 2px 2px;
 }
 
-.month-year-input {
-    width: 60px;
-}
-.month-picker .year-container-all {
-    cursor: pointer;
+.month-picker td {
+    padding: 0px;
 }
-.month-picker-year-table .year-container-all {
-    text-align: center;
+
+/*
+Prevents the button labels from maving sligtly to the left
+when applying the width CSS property to the buttons.
+See: .month-picker-month-table button { width: 4.3em; }
+*/
+.month-picker .ui-button-text {
+  padding: .4em 0;
 }
-.month-picker-year-table .year-container {
-    margin: 0 auto;
+
+.month-picker-header {
+    margin: 3px 3px 0px 3px;
 }
-.month-picker-year-table .year-title {
-    margin: 3px;
-    font-size: 12px;
-    font-family: Verdana, Arial, sans-serif;
+
+.month-picker-year-table {
+    width: 100%;
+    /*
+    Makes sure the next/previous/jump years buttons are not unnecessarily
+    selected if the user clicks them a couple of times fast.
+    */
+    -ms-user-select: none; /* IE 10+ */
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
-.month-picker-year-table .year {
-    margin: 3px;
-    font-size: 12px;
-    font-family: Verdana, Arial, sans-serif;
+
+/*
+The plugin uses buttons with a transparent background in the year-table
+(aka header) in order to look consistent with jQuery UI datepicker and to
+make the year title a button that blends into the heading in the default state.
+
+The plugin does this by removing the .ui-state-default class from (in MonthPicker.js)
+the a tags (buttons) which also ends up removing the 1px border that it applies.
+
+To prevent the button from resizing and moving everything around when you hover
+in and out, we use a carefully constructed selector, which gets overroden by the
+more specific .ui-state-hover/actove class selectors in the jquery-ui.css
+that apply the visible borders that we want.
+
+This selector applies a 1px transparent border that keeps the button
+in the same size, but it doesen't hide the borders that .ui-state-hover/actove give us.
+*/
+.month-picker-year-table a {
+    border: 1px solid transparent;
 }
-.month-picker-year-table .year-container {
-    width: 50px;
+
+/*
+Sets the size of the next/previous buttons,
+and makes the buttons in the heading (year-table) sligtly bigger,
+and removes the pointer cursor from the buttons in the heading (year-table).
+*/
+.month-picker-year-table .ui-button {
+    font-size: 1.1em;
+    width: 1.5em;
+    height: 1.5em;
+    cursor: default;
+    margin: 0;
 }
-.month-picker-year-table .previous-year {
-    width: 35px;
-    /*
-	 In case the user's css reset the user agent stylesheet
-	 this is often done in RTL pages.
-	*/
-    text-align: left;
-}
-.month-picker-year-table .next-year {
-    width: 35px;
-    text-align: right;
-}
-.month-picker-year-table button {
-    width: 28px;
-    width: 1.8em;
-    height: 1.8em;
+
+.month-picker-year-table .month-picker-title {
     text-align: center;
-    cursor: pointer;
 }
-.month-picker-year-table .year-container {
-    text-align: center;
+
+.month-picker-year-table .month-picker-title .ui-button {
+    font-size: 1em;
+    padding: .1em 0;
+    width: 100%;
+    font-weight: bold;
 }
+
+/*
+The buttons in the heading (year-table) are slightly shrinked, but because jQuery ui and
+the .month-picker .ui-button-text rule at the top of this CSS file apply some
+padding which results in the button text being moved to the bottom of
+the button.
+
+This rule removes the unnecessary padding so the text in
+the jump years button will be vericaly centred.
+*/
+.month-picker-year-table .ui-button-text {
+    padding: 0;
+}
+
 .month-picker-month-table td {
     height: 35px;
     text-align: center;
-    font-size: 12px;
 }
+
+/*
+Makes sure the buttons stay in the same size when swithching
+to the Jump years menu.
+this also ensures that the entire menu dosen't resize itself
+in response to the slightly bigger buttons in the Jump years menu.
+ */
+.month-picker-month-table button {
+    width: 4.3em;
+    margin: .2em;
+}
+
 .month-picker-open-button {
     height: 20px;
     width: 20px;
     vertical-align: bottom;
 }
+
 .month-picker-invalid-message {
     display: none;
     background-color: Yellow;
 }
+
 .month-picker-disabled {
     background-color: #e1e1e1;
 }

gruntfile.js

@@ -7,25 +7,26 @@ module.exports = function (grunt) {
     qunit: {
     	all: ['test/test.html']
   	},
-    
+
     uglify: {
       production: {
         files: {
           'MonthPicker.min.js': 'MonthPicker.js'
         }
       },
-      
+
       demo: {
 	    files: {
 	      'demo/Demo.min.js': ['test/jquery.maskedinput.min.js', 'MonthPicker.js']
 	    }
       }
     },
-    
+
     cssmin: {
 	  demo: {
 	     files: {
-		   'demo/Demo.min.css': ['css/MonthPicker.css', 'test/test.css']
+		   'demo/Demo.min.css': ['css/MonthPicker.css', 'test/test.css'],
+           'css/MonthPicker.min.css': ['css/MonthPicker.css']
 	     }
 	  }
   	}
@@ -37,4 +38,4 @@ module.exports = function (grunt) {
 
   grunt.registerTask('default', ['qunit', 'uglify', 'cssmin']);
   grunt.registerTask('test', ['qunit']);
-};
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery-ui-month-picker",
   "description": "jQuery UI Month Picker Plugin",
-  "version": "2.8.3",  
+  "version": "3.0.0-beta1",  
 
   "scripts": {
     "postinstall" : "bower install"
@@ -10,7 +10,7 @@
   "devDependencies": {
     "grunt-contrib-uglify": "~0.6.0",
     "grunt-contrib-cssmin": "^0.14.0",
-    "grunt-contrib-qunit": "^0.7.0",
+    "grunt-contrib-qunit": "^0.6.0",
     "bower" : ""
   }
 }

test/test.css

@@ -1,6 +1,6 @@
 /******* ***************** ********/
 
-/* Unit Testing CSS */
+/* Unit Testing and demo aon JSFiddle CSS */
 
 /******* ***************** ********/
  body {
@@ -30,7 +30,7 @@
 .option-type {
     margin: 0 25px;
 }
-.demo {	
+.demo {
     background-color: #e1e1e1;
     padding: 8px;
     border: solid 1px Gray;
@@ -43,6 +43,5 @@
     width:100%;
 }
 .text-right{
-    text-align: right;   
+    text-align: right;
 }
-