https://www.murrhardter-zeitung.de/UtilLib/jquery.ui.monthpicker/jquery.ui.monthpicker.js?_=5bd28a96

1/*
2* jQuery UI Monthpicker 2.0.0
3*
4* @licensed MIT <see below>
5* @licensed GPL <see below>
6*
7* @author René Pfeifer (base on work of Luciano Costa)
8*
9* Depends:
10*	jquery.ui.core.js
11*/
12
13/**
14* MIT License
15* Copyright (c) 2011, Luciano Costa
16* 
17* Permission is hereby granted, free of charge, to any person obtaining a copy 
18* of this software and associated documentation files (the "Software"), to deal 
19* in the Software without restriction, including without limitation the rights 
20* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
21* copies of the Software, and to permit persons to whom the Software is 
22* furnished to do so, subject to the following conditions:
23* 
24* The above copyright notice and this permission notice shall be included in
25* all copies or substantial portions of the Software.
26* 
27* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
28* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
29* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
30* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
31* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
32* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
33* THE SOFTWARE.
34*/
35/**
36* GPL LIcense
37* Copyright (c) 2011, Luciano Costa
38* 
39* This program is free software: you can redistribute it and/or modify it 
40* under the terms of the GNU General Public License as published by the 
41* Free Software Foundation, either version 3 of the License, or 
42* (at your option) any later version.
43* 
44* This program is distributed in the hope that it will be useful, but 
45* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 
46* or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License 
47* for more details.
48* 
49* You should have received a copy of the GNU General Public License along 
50* with this program. If not, see <http://www.gnu.org/licenses/>.
51*/
52(function ($) {
53
54	$.fn.monthpicker = function (method) {
55
56		// public methods
57		var methods = {
58
59			init: function (options) {
60				$.fn.monthpicker.settings = $.extend({}, this.monthpicker.defaults, options);
61				$.fn.monthpicker.settings.separator = $.fn.monthpicker.settings.pattern.replace(/(mm|m|yyyy|yy|y)/ig, '');
62
63				$('#ui-monthpicker-div').remove();
64				$.fn.monthpicker.widget = helpers.mount_widget(this.monthpicker.settings);
65				$.fn.monthpicker.widget.appendTo('body');
66				$('#ui-monthpicker-div').find('td[data-month] a')
67					.unbind('click.monthpicker')
68					.bind('click.monthpicker', helpers._selectMonth);
69				$('#ui-monthpicker-div').find('a.ui-datepicker-prev')
70					.unbind('click.monthpicker')
71					.bind('click.monthpicker', helpers._prevYear);
72				$('#ui-monthpicker-div').find('a.ui-datepicker-next')
73					.unbind('click.monthpicker')
74					.bind('click.monthpicker', helpers._nextYear);
75				$('#ui-monthpicker-div').find('a')
76					.unbind('mouseenter.monthpicker mouseleave.monthpicker')
77					.bind('mouseenter.monthpicker mouseleave.monthpicker', function () {
78						$(this).toggleClass('ui-state-hover');
79						$(this).filter('.ui-datepicker-prev').toggleClass('ui-datepicker-prev-hover');
80						$(this).filter('.ui-datepicker-next').toggleClass('ui-datepicker-next-hover');
81					});
82
83				return this.each(function () {
84					var $el = $(this); // ref to the jQuery version of the current DOM element
85					if (!$el.hasClass('hasMonthpicker')) {
86						$el.addClass('hasMonthpicker')
87							.keydown(helpers._doKeyDown)
88							.keyup(helpers._doKeyUp)
89							.unbind('focus.monthpicker', function (event) { helpers._showMonthpicker(event.target); })
90							.bind('focus.monthpicker', function (event) { helpers._showMonthpicker(event.target); });
91					}
92				});
93			},
94
95			show: function () {
96				$.fn.monthpicker.widget.css({ display: 'block' });
97				$(document)
98					.off('mousedown.monthpicker')
99					.on('mousedown.monthpicker', function (e) {
100						if (jQuery(e.target).closest('#ui-monthpicker-div').length == 0) {
101							$.fn.monthpicker('hide');
102							e.stopPropagation();
103						}
104					});

105			},
106
107			hide: function () {
108				$.fn.monthpicker.widget.css({ display: 'none' });
109				$(document)
110					.off('mousedown.monthpicker');
111			},
112
113			// tell the widget what input element to interact with
114			apply_to: function (el) {
115				$.fn.monthpicker.widget.css({
116					top: el.offset().top + el.outerHeight(),
117					left: el.offset().left
118				});
119				$.fn.monthpicker.widget.data('input', jQuery(el));
120				helpers._updateFromField(el);
121			},
122
123			formatDate: function (date) {
124				return helpers.apply_pattern(date.getMonth() + 1, date.getFullYear())
125			},
126
127			parseDate: function () {
128				var oData = helpers.extract_input_data(jQuery(this));
129				if (oData) {
130					if (oData.month < 1 || oData.month > 12) {
131						oData = null;
132					} else {
133						oData = new Date(oData.year, oData.month - 1, 1, 12, 0, 0);
134					}
135				}
136				return oData;
137			},
138
139			option: function (name, value) {
140				if (value != undefined) {
141					$.fn.monthpicker.settings[name] = value;
142				} else {
143					return $.fn.monthpicker.settings[name];
144				}
145			}
146		};
147
148		// private methods
149		var helpers = {
150
151			mount_widget: function (settings) {
152				var 

153						container = $('<div id="ui-monthpicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" />'),
154						header = $('<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all ui-monthpicker" />'),
155						prev = $('<a href="javascript:void(0)" class="ui-datepicker-prev ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-w"></span></a>')
156				next = $('<a href="javascript:void(0)" class="ui-datepicker-next ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-e"></span></a>')
157				combo = $('<div class="ui-datepicker-title"><span id="ui-monthpicker-year" class="ui-datepicker-year"></span></div>'),
158						table = $('<table class="ui-monthpicker" />'),
159						tbody = $('<tbody class="ui-monthpicker" />'),
160						tr = $('<tr class="ui-monthpicker" />'),
161						td = '';
162				year = $.fn.monthpicker.settings.year,
163                 option = null;
164
165				container.css({
166					position: 'absolute',
167					zIndex: 999999,
168					whiteSpace: 'nowrap',
169					width: '250px',
170					overflow: 'hidden',
171					textAlign: 'center',
172					display: 'none'
173				});
174
175				// mount years combo
176				header.append(prev).append(next).append(combo).appendTo(container);
177
178				// mount months table
179				for (var i = 1; i <= 12; i++) {
180					td = $('<td class="ui-monthpicker" style="padding:1px;"></td>').attr('data-month', i)
181					a = $('<a href="javascript:void(0)" class="ui-state-default" style="display:block; text-align:center"></a>')
182					a.append(settings.monthNames[i - 1]);
183					td.append(a);
184					tr.append(td).appendTo(tbody);
185					if (i % 3 === 0) {
186						tr = $('<tr class="ui-monthpicker" />');
187					}
188				}
189				table.append(tbody).appendTo(container)
190
191				return container;
192			},
193
194			apply_pattern: function (month, year) {
195				var 
196                 m = month,
197                 settings = $.fn.monthpicker.settings;
198				if (settings.pattern.indexOf('mm') >= 0 && month < 10) {
199					m = '0' + m;
200				}
201				if (settings.pattern.indexOf('y') > settings.pattern.indexOf(settings.separator)) {
202					return m + settings.separator + year;
203				} else {
204					return year + settings.separator + m;
205				}
206
207			},
208
209			extract_input_data: function (el) {
210				var val = $(el).val();
211				var settings = $.fn.monthpicker.settings;
212				var oData = {
213					month: new Date().getMonth(),
214					year: settings.year
215				};
216				jQuery.extend(oData, settings.currentValues);
217				if (val) {
218					var month = oData.month;
219					var year = oData.year;
220					if (settings.separator.length == 0) {
221						year = val.substr(settings.pattern.indexOf('y'), settings.pattern.split('y').length - 1);
222						month = val.substr(settings.pattern.indexOf('m'), settings.pattern.split('m').length - 1);
223					} else {
224						val = val.split(settings.separator);
225						if (settings.pattern.indexOf('y') > settings.pattern.indexOf('m')) {
226							month = val[0];
227							year = val[1];
228						} else {
229							month = val[1];
230							year = val[0];
231						}
232					}
233					if (parseInt(month, 10) >= 1 && parseInt(month, 10) <= 12) {
234						oData.month = parseInt(month, 10);
235					} else {
236						oData.month = -1;
237					}
238					if (parseInt(year, 10) >= 1000 && parseInt(year) <= 9999) {
239						oData.year = parseInt(year, 10);
240					}
241				} else {
242					oData.month = -1;
243				}
244				return oData;
245			},
246
247			_selectMonth: function (event) {
248				var $Month = $(this);
249				$.fn.monthpicker.widget.find('td[data-month] a').not($Month).removeClass('ui-state-active');
250				$Month.addClass('ui-state-active');
251				helpers._updateSelectedValue($.fn.monthpicker.widget.data('input'));
252				$.fn.monthpicker('hide');
253			},
254
255			_prevYear: function (event) {
256				year = Math.max(parseInt($.fn.monthpicker.widget.find('.ui-datepicker-year').html(), 10) - 1, 1000);
257				$.fn.monthpicker.widget.find('.ui-datepicker-year').html(year);
258				helpers._updateSelectedValue($.fn.monthpicker.widget.data('input'), true);
259			},
260
261			_nextYear: function (event) {
262				year = parseInt($.fn.monthpicker.widget.find('.ui-datepicker-year').html(), 10) + 1;
263				$.fn.monthpicker.widget.find('.ui-datepicker-year').html(year);
264				helpers._updateSelectedValue($.fn.monthpicker.widget.data('input'), true);
265			},
266
267			// mark an year as selected in the years combo
268			// try #1: data on input
269			// try #2: settings.year
270			select_year: function (el) {
271				var 
272					year = $.fn.monthpicker.settings.year,
273					input_data = helpers.extract_input_data(el);
274				if (input_data !== null) {
275					year = input_data.year;
276				}
277				if (!year) {
278					year = new Date().getFullYear();
279				}
280				$.fn.monthpicker.widget.find('.ui-datepicker-year').html(year);
281			},
282
283			_showMonthpicker: function (input) {
284				if (!$.fn.monthpicker.widget.is(':visible') && $(input).attr("readonly") === undefined) {
285					$.fn.monthpicker('apply_to', $(input));
286					$.fn.monthpicker('show');
287				}
288			},
289
290			_hideMonthpicker: function () {
291				if ($.fn.monthpicker.widget.is(':visible')) {
292					$.fn.monthpicker('hide');
293				}
294			},
295
296			_updateSelectedValue: function (input, bFocus) {

297				var month = $.fn.monthpicker.widget.find('td[data-month] a.ui-state-active').parent().attr('data-month');
298				var year = $.fn.monthpicker.widget.find('.ui-datepicker-year').html();
299				if (input) {
300					$(input).val(helpers.apply_pattern(month, year));
301					$(input).trigger('change');
302					if (bFocus) {
303						$(input).trigger('focus');
304					}
305				}
306			},
307
308			_updateFromField: function (input) {
309				var oData = helpers.extract_input_data(jQuery(input));
310				$.fn.monthpicker.settings.currentValues = oData;
311				// Set the month
312				var $Month = $.fn.monthpicker.widget.find('td[data-month="' + oData.month + '"] a');
313				$.fn.monthpicker.widget.find('td[data-month] a').not($Month).removeClass('ui-state-active');
314				$Month.addClass('ui-state-active');
315				// Set the year
316				$.fn.monthpicker.widget.find('.ui-datepicker-year').html(oData.year);
317			},
318
319			/* Handle keystrokes. */
320			_doKeyDown: function (event) {
321				var handled = true;
322				if ($.fn.monthpicker.widget.is(':visible')) {
323					switch (event.keyCode) {
324						case 9:
325							helpers._hideMonthpicker();
326							handled = false;
327							break; // hide on tab out
328						case 13:
329							helpers._updateSelectedValue(event.target);
330							handled = true;
331							break;
332						case 27:
333							helpers._hideMonthpicker();
334							break; // hide on escape
335						default:
336							handled = false;
337							break;
338					}
339				}
340				else if (event.keyCode == 36 && event.ctrlKey) { // display the time picker on ctrl+home
341					helpers._showMonthpicker(event.target);
342				}
343				else {
344					handled = false;
345				}
346				if (handled) {
347					event.preventDefault();
348					event.stopPropagation();
349				}
350			},
351

352			/* Update selected time on keyUp */
353			/* Added verion 0.0.5 */
354			_doKeyUp: function (event) {
355				if ($.fn.monthpicker.widget.is(':visible')) {
356					if (event.keyCode == 13) {
357						helpers._hideMonthpicker();
358						event.preventDefault();
359						event.stopPropagation();
360					}
361				}
362				helpers._updateFromField(event.target);
363			}
364		};
365
366		// method calling
367		if (methods[method]) {
368			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
369		} else if (typeof method === 'object' || !method) {
370			return methods.init.apply(this, arguments);
371		} else {
372			$.error('Method "' + method + '" does not exist in monthpicker plugin!');
373		}
374
375	};
376
377	$.fn.monthpicker.widget = null; // our widget is a singleton
378
379	$.fn.monthpicker.settings = {}; // will hold a merge of default settings and user provided ones
380
381	$.fn.monthpicker.defaults = {
382		pattern: 'mm/yyyy',
383		monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
384		year: (new Date()).getFullYear()
385	};
386
387})(jQuery);