MonthPicker RTL
HTML
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<body dir='rtl'> <!-- This is required for RTL support to work --->
.This demonstrates RTL support in the hebrew i18n localization
<p>
דוגמה:
<input id='example' />
</body>
CSS
body {
text-align:center;
}
.month-picker-month-table button {
width: 45px;
}
/*
The jQuery UI Month Picker Version 2.5
https://github.com/KidSysco/jquery-ui-month-picker/
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation;
version 3.0. This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, visit
http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
*/
.month-picker {
width: 200px;
display: none;
position: absolute;
z-index: 9999;
}
.month-year-input {
width: 60px;
}
.month-picker .year-container-all {
cursor: pointer;
}
.month-picker-year-table .year-container-all {
text-align: center;
}
.month-picker-year-table .year-container {
margin: 0 auto;
}
.month-picker-year-table .year-title {
margin: 3px;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.month-picker-year-table .year {
margin: 3px;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.month-picker-year-table .year-container {
width: 50px;
}
.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;
text-align: center;
cursor: pointer;
}
.month-picker-year-table .year-container {
text-align: center;
}
.month-picker-month-table td {
height: 35px;
text-align: center;
font-size:...
JavaScript
/*
https://github.com/KidSysco/jquery-ui-month-picker/
Version 2.5
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation;
version 3.0. This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, visit
http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt.
*/
;
(function ($, window, document) {
var _speeds = $.fx.speeds;
var _eventsNs = '.MonthPicker';
var _disabledClass = 'month-picker-disabled';
var _defaultPos = { my: 'left top+1', at: 'left bottom' };
var _RTL_defaultPos = { my: 'right top+1', at: 'right bottom' };
var _setupErr = 'MonthPicker Setup Error: ';
var _posErr = _setupErr + 'The jQuery UI position plug-in must be loaded in order to specify a position.';
var _badOptValErr = _setupErr + 'Unsupported % option value, supported (case sensitive) values are: ';
var _animVals = {
Animation: ['slideToggle', 'fadeToggle', 'none'],
ShowAnim: ['fadeIn', 'slideDown', 'none'],
HideAnim: ['fadeOut', 'slideUp', 'none']
};
var $noop = $.noop;
var $datepicker = $.datepicker;
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>')
.button({
text: false,
icons: {
// Defaults to 'ui-icon-calculator'.
primary: options.ButtonIcon
}
});
}
$.MonthPicker = {
i18n: {
year:...