Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for jqueryUI 1.12 #73

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Fix for jqueryUI 1.12 #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0d36c99
Fix for jquery.UI 1.12
wallenium Mar 17, 2017
87cbe7c
Update demo
wallenium Mar 17, 2017
723b2ad
Better implementation with less code
wallenium Mar 23, 2017
b66eb7b
Fixed some bugs with implementation for ui 1.12
wallenium Mar 23, 2017
23184a1
fix button disable problem
wallenium Mar 23, 2017
c6c433f
Revert "Update demo"
wallenium Mar 23, 2017
7b3eb33
fix glitch with jqUI 1.12 button themes
wallenium Mar 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/MonthPicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,9 @@ 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 {
.month-picker-year-table .ui-button-text, .month-picker-year-table .ui-button {
padding: 0;
background: transparent;
}

.month-picker-month-table td {
Expand Down
75 changes: 48 additions & 27 deletions src/MonthPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,12 @@ along with this program. If not, see
// conflict with Bootstrap.js button (#35)
$.widget.bridge('jqueryUIButton', $.ui.button);

var _isNewApi = $.ui.version >= '1.12';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests are paling because this tests is incorrect.

The unit tests are using version 1.9.2 of jQuery UI and this test returns true because the number 1.9 is greater than 1.12.

I pushed a fix for this to my jquery_1.12_support branch.

var _speeds = $.fx.speeds;
var _eventsNs = '.MonthPicker';
var _textfieldClass = 'month-year-input';
var _clearHint = 'month-picker-clear-hint';
var _iconClass = '.ui-button-icon-primary';
var _iconClass = (_isNewApi) ? '.ui-button-icon' : '.ui-button-icon-primary';
var _disabledClass = 'month-picker-disabled';
var _todayClass = 'ui-state-highlight';
var _selectedClass = 'ui-state-active';
Expand Down Expand Up @@ -141,23 +142,39 @@ along with this program. If not, see
}
}

function _prepareButtonOptions(opts) {
if (_isNewApi || opts == undefined) {
var newOpts = opts;
}else{
var newOpts = {};
if (opts.showLabel !== void 0) newOpts.text = opts.showLabel;
if (opts.icon !== void 0) newOpts.icons = {primary: opts.icon };
if (opts.label !== void 0) newOpts.label = opts.label;
if (opts.disabled !== void 0) newOpts.disabled = opts.disabled;
}
return newOpts;
}

$.fn.monthPickerButton = function(opts) {
return this.jqueryUIButton(_prepareButtonOptions(opts));
};

$.fn.monthPickerButtonOption = function(opts) {
return this.jqueryUIButton('option', _prepareButtonOptions(opts))
};

function _makeDefaultButton(options) {
// this refers to the associated input field.
return $('<span id="MonthPicker_Button_' + this.id + '" class="month-picker-open-button">' + options.i18n.buttonText + '</span>')
.jqueryUIButton({
text: false,
icons: {
// Defaults to 'ui-icon-calculator'.
primary: options.ButtonIcon
}
.monthPickerButton({
showLabel: false,
icon: options.ButtonIcon
});
}

function _applyArrowButton($el, dir) {
$el.jqueryUIButton('option', {
icons: {
primary: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e')
}
$el.monthPickerButtonOption({
icon: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e')
});
}

Expand Down Expand Up @@ -256,7 +273,7 @@ along with this program. If not, see

function _setDisabled(_button, _value) {
var _btnWidget = _button.data('ui-button');
if (_btnWidget.option('disabled') !== _value) {
if (_value !== null && _btnWidget.option('disabled') !== _value) {
_btnWidget.option('disabled', _value);
}
}
Expand Down Expand Up @@ -410,19 +427,19 @@ along with this program. If not, see
this._titleButton =
$('.month-picker-title', _menu)
.click($proxy(this._showYearsClickHandler, this))
.find('a').jqueryUIButton()
.find('a').monthPickerButton()
.removeClass(_defaultClass);

this._applyJumpYearsHint();
this._createValidationMessage();

this._prevButton = $('.month-picker-previous>a', _menu)
.jqueryUIButton({ text: false })
.removeClass(_defaultClass);
.monthPickerButton({ showLabel: false })
.removeClass(_defaultClass);

this._nextButton = $('.month-picker-next>a', _menu)
.jqueryUIButton({ text: false })
.removeClass(_defaultClass);
.monthPickerButton({ showLabel: false })
.removeClass(_defaultClass);

this._setRTL(_opts.IsRTL); //Assigns icons to the next/prev buttons.

Expand All @@ -438,7 +455,7 @@ along with this program. If not, see
$tr.append('<td><a class="button-' + (i + 1) + '" /></td>');
}

this._buttons = $('a', $table).jqueryUIButton();
this._buttons = $('a', $table).monthPickerButton();

_menu.on('mousedown' + _eventsNs, function (event) {
event.preventDefault();
Expand Down Expand Up @@ -696,8 +713,8 @@ along with this program. If not, see
// a function. See Button option: Img tag tests for
// more details.
var _button = this._monthPickerButton;
try {
_button.jqueryUIButton('option', 'disabled', isDisabled);
try {
_button.monthPickerButtonOption({'disabled': isDisabled});
} catch (e) {
_button.filter('button,input').prop('disabled', isDisabled);
}
Expand Down Expand Up @@ -847,7 +864,11 @@ along with this program. If not, see

_setPickerYear: function (year) {
this._pickerYear = year || new Date().getFullYear();
this._titleButton.jqueryUIButton({ label: this._i18n('year') + ' ' + this._pickerYear });
if(_isNewApi){
this._titleButton.monthPickerButton({ label: '<span class="ui-button-text">' +this._i18n('year') + ' ' + this._pickerYear + '</span>' });
}else{
this._titleButton.monthPickerButton({ label: this._i18n('year') + ' ' + this._pickerYear });
}
},

// When calling this method with a falsy (undefined) date
Expand Down Expand Up @@ -903,7 +924,7 @@ along with this program. If not, see
$.each(_months, function(index, monthName) {
$(me._buttons[index])
.on(click, {month: index+1}, _onMonthClick )
.jqueryUIButton('option', 'label', monthName);
.monthPickerButtonOption({'label': monthName});
});

this._decorateButtons();
Expand All @@ -916,7 +937,7 @@ along with this program. If not, see
this._showYears();

var _label = this._i18n('backTo') + ' ' + this._getPickerYear();
this._titleButton.jqueryUIButton({ label: _label }).data( _clearHint )();
this._titleButton.monthPickerButton({ label: _label }).data( _clearHint )();

_event('OnAfterChooseYears', this)();
} else {
Expand Down Expand Up @@ -948,8 +969,8 @@ along with this program. If not, see
.off(click)
.on(click, $proxy(this._addToYears, this, AMOUNT_TO_ADD));

_setDisabled(this._prevButton, _minYear && (_firstYear - 1) < _minYear);
_setDisabled(this._nextButton, _maxYear && (_firstYear + 12) -1 > _maxYear);
_setDisabled(this._prevButton, _minYear > 0 && (_firstYear - 1) < _minYear);
_setDisabled(this._nextButton, _maxYear > 0 && (_firstYear + 12) -1 > _maxYear);

this._buttons.off(_eventsNs);

Expand All @@ -963,7 +984,7 @@ along with this program. If not, see
for (var _counter = 0; _counter < 12; _counter++) {
var _year = _currYear + _yearDifferential;

var _btn = $( this._buttons[_counter] ).jqueryUIButton({
var _btn = $( this._buttons[_counter] ).monthPickerButton({
disabled: !_between(_year, _minYear, _maxYear),
label: _year
})
Expand Down Expand Up @@ -1039,7 +1060,7 @@ along with this program. If not, see
var _month = (_curYear * 12) + i, _isBetween = _between(_month, _minDate, _maxDate);

$(this._buttons[i])
.jqueryUIButton({ disabled: !_isBetween })
.monthPickerButton({ disabled: !_isBetween })
.toggleClass(_todayClass, _isBetween && _month == _todaysMonth); // Highlights today's month.
}
}
Expand Down