Makes the next and previous buttons have a transparent background

and ajausts the unit tests.
KidSysco · KidSysco · Jan 20, 2016 · Nov 20, 2015 · Nov 21, 2015 · Nov 26, 2015
commit 1a7d29e08732552bce4c929bc8263d91b3d6676c
diff --git a/MonthPicker.js b/MonthPicker.js
@@ -169,18 +169,21 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
         }
     };
 
+    //<a class="ui-state-hover ui-corner-all" style="width:23px;height:23px;display:inline-block;"><span class="ui-icon ui-icon-circle-triangle-w"></span></a>
+
+
     var _markup =
         '<div class="ui-widget-header month-picker-header ui-corner-all">' +
             '<table class="month-picker-year-table" width="100%" border="0" cellspacing="1" cellpadding="2">' +
                 '<tr>' +
-                    '<td class="previous-year"><button /></td>' +
+                    '<td class="previous-year"><a /></td>' +
                     '<td class="year-container-all">' +
                         '<div id="year-container">' +
                             '<span class="year-title" />' +
                             '<span class="year" />' +
                         '</div>' +
                     '</td>' +
-                    '<td class="next-year"><button /></td>' +
+                    '<td class="next-year"><a /></td>' +
                 '</tr>' +
             '</table>' +
         '</div>' +
@@ -337,8 +340,9 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
 
             this._yearContainer = $('.year', _menu);
 
-            this._prevButton = $('.previous-year button', _menu).button({ text: false });
-            this._nextButton = $('.next-year button', _menu).button({ text: false });
+            this._prevButton = $('.previous-year a', _menu);
+            this._prevButton.button({ text: false }).removeClass('ui-state-default').css('cursor', 'default');
+            this._nextButton = $('.next-year a', _menu).button({ text: false }).removeClass('ui-state-default').css('cursor', 'default');
 
             this._setRTL(_opts.IsRTL); //Assigns icons to the next/prev buttons.
 
@@ -865,6 +869,12 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
             _year.text(parseInt(_year.text()) + amount, 10);
             this.element.focus();
 
+            var me = this;
+            setTimeout(function() {
+                var _btn = amount > 0 ? me._nextButton : me._prevButton;
+                _btn.addClass('ui-state-hover');
+            }, 1);
+
             this._decorateButtons();
 
             _event('OnAfter' + (amount > 0 ? 'Next' : 'Previous') + 'Year', this)();

diff --git a/css/MonthPicker.css b/css/MonthPicker.css
@@ -36,6 +36,10 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
 .month-picker-year-table .year-container {
     margin: 0 auto;
 }
+.month-picker-year-table a {
+    border: 1px solid transparent;
+}
+
 .month-picker-year-table .year-title {
     margin: 3px;
     font-size: 12px;
@@ -67,7 +71,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
     margin-right: 0;
 }
 
-.month-picker-year-table button {
+.month-picker-year-table /*button*/ a {
     width: 28px;
     width: 1.8em;
     height: 1.8em;

diff --git a/test/test.html b/test/test.html
@@ -3,7 +3,11 @@
 
 <head>
     <title>jQuery UI Month Picker tests</title>
+    <!--flick-->
     <link rel="stylesheet" type="text/css" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
+
+    <link rel="stylesheet" type="text/css" href="../bower_components/jquery-ui/
+    themes/smoothness/jquery.ui.theme.css">
     <link rel="stylesheet" type="text/css" href="../css/MonthPicker.css" />
     <link rel="stylesheet" type="text/css" href="test.css" />
     <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
@@ -19,7 +23,7 @@
 					"Welcome to the jQuery UI Month Picker project.\n" + 
 		            "\n" + 
 	                "jQuery UI and QUnit are required for testing.\n" +
-	                "Please download node.js, 'cd /jquery-ui-month-picker' and run 'npm install'.\n" + 
+	                "Please download node.js, 'cd ./jquery-ui-month-picker' and run 'npm install'.\n" + 
 	                "\n" + 
 	                "Tests can be ran from the command line using the 'grunt test' command.";
 

diff --git a/test/test.js b/test/test.js
@@ -404,7 +404,7 @@ QUnit.test('Inline menu', function(assert) {
 
 	assert.notOk($("#MonthPicker_Button_InlineMenuDiv").length, 'The default button was not created');
 
-	field.MonthPicker('destroy');
+	//field.MonthPicker('destroy');
 });
 
 QUnit.test('SelectedMonth option', function(assert) {
@@ -479,7 +479,7 @@ QUnit.test('Events and context', function (assert) { // A.k.a duplicate code tes
 		assert.equal( this, EventsField, 'OnAfterNextYear was called in the right context' );
 	});
 
-	var nextYearButton = menu.find('.next-year>button');
+	var nextYearButton = menu.find('.next-year>a');
     nextYearButton.trigger('click');
     assert.ok(OnAfterNextYearTriggered, 'Clicking the next button triggered OnAfterNextYear');
 
@@ -490,7 +490,7 @@ QUnit.test('Events and context', function (assert) { // A.k.a duplicate code tes
 		assert.equal( this, EventsField, 'OnAfterPreviousYear was called in the right context' );
 	});
 
-	var previousYearButton = menu.find('.previous-year>button');
+	var previousYearButton = menu.find('.previous-year>a');
 	previousYearButton.trigger('click');
 	assert.ok(OnAfterPreviousYearTriggerd, 'Clciking rhe previous button triggered OnAfterPreviousYear');
 
@@ -631,8 +631,8 @@ QUnit.test('Right to left', function (assert) {
 
     var menu = $(MonthPicker_RTLField);
 
-    var nextYearButton = menu.find('.next-year>button');
-    var previousYearButton = menu.find('.previous-year>button');
+    var nextYearButton = menu.find('.next-year>a');
+    var previousYearButton = menu.find('.previous-year>a');
 
     // Make sure the buttons are pointing in the right (opposite) direction.
     assert.ok(previousYearButton.find('span.ui-icon-circle-triangle-e').length, 'Previous button is pointed east');
@@ -945,8 +945,8 @@ QUnit.test('Month buttons are disabled', function (assert) {
 	field.MonthPicker('Open');
 
 	var menu = $(MonthPicker_RistrictMonthField);
-	var previousYearButton = menu.find('.previous-year>button');
-	var nextYearButton = menu.find('.next-year>button');
+	var previousYearButton = menu.find('.previous-year>a');
+	var nextYearButton = menu.find('.next-year>a');
 
 	// Try to click the disabled buttons.
 	var buttons = menu.find('.month-picker-month-table button');
@@ -1045,7 +1045,7 @@ QUnit.test('Year buttons are disabled', function (assert) {
     assert.ok(firstVisibleYear, "Clciking the disabled buttons didn't take us to month view");
 
     // Make sure the next years button is disabled.
-    var nextYearsButton = menu.find('.next-year>button');
+    var nextYearsButton = menu.find('.next-year>a');
     var isDisabled = nextYearsButton
         .trigger('click')
         .is('.ui-button-disabled');
@@ -1054,7 +1054,7 @@ QUnit.test('Year buttons are disabled', function (assert) {
     var newFirstYrar = parseInt($(buttons[0]).text(), 10);
     assert.equal(newFirstYrar, firstVisibleYear, "Clicking next year didn't change the year");
 
-    var previousYearsButton = menu.find('.previous-year>button');
+    var previousYearsButton = menu.find('.previous-year>a');
     // Keep going back until there are no disabled buttons.
     // We count to 10 to avoid an infinite loop in case there's
     // a bug where we are going back in time but the the buttons stay disabled.
@@ -1227,8 +1227,8 @@ QUnit.test('Today and selected months are highlighted', function (assert) {
 	var buttons = menu.find('.month-picker-month-table button');
 
 	var todaysButton = $(buttons[new Date().getMonth()]);
-	var nextYearButton = menu.find('.next-year>button');
-	var previousYearButton = menu.find('.previous-year>button');
+	var nextYearButton = menu.find('.next-year>a');
+	var previousYearButton = menu.find('.previous-year>a');
 
 	assert.ok(todaysButton.is('.ui-state-highlight'), "Today's month is highlighted");
 
@@ -1288,8 +1288,8 @@ QUnit.test('Number of months from today', function (assert) {
 
     // Make sure we are in years view.
     var buttons = menu.find('.month-picker-month-table button');
-    var nextYearButton = menu.find('.next-year>button');
-    var previousYearButton = menu.find('.previous-year>button');
+    var nextYearButton = menu.find('.next-year>a');
+    var previousYearButton = menu.find('.previous-year>a');
 
     var enabledMonths = 0;
 
@@ -1344,8 +1344,8 @@ QUnit.test('Relative month periods', function (assert) {
 
     // Make sure we are in years view.
     var buttons = menu.find('.month-picker-month-table button');
-    var nextYearButton = menu.find('.next-year>button');
-    var previousYearButton = menu.find('.previous-year>button');
+    var nextYearButton = menu.find('.next-year>a');
+    var previousYearButton = menu.find('.previous-year>a');
     var enabledMonths = 0;
 
     // Make sure that 18 buttons + 1 for today are disabled.