monthpicker/jquery.monthpicker.js at master · ddiebel/monthpicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/**
 * monthPicker - a simple but useful month/year picker
 * this plugin creates two selectboxes where the user can can select month and year. afterwars a unix-timestamp is written into the
 * original input field.
 *
 * Copyright (c) Dirk Diebel <http://www.werzahltmehr.de/>.
 * Released under MIT License
 *
 *
 * <usage>
 *
 * $('#id-selector').monthpicker([options]);
 *
 * [options] accepts following JSON properties:
 *  minYear     - the minimum year the selectbox should show
 *  maxYear     - the maximum year the selectbox should show
 *  lang        - language in which all labels should be generated
 *  month       - a map of month labels (overrides the lang parameter if set)
 *  class       - a custom class of selectbox tags
 *  f.e. german months
 *   month : ['January','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']
 * </usage>
 *
 *
 * @author Dirk Diebel
 * @version 2.0.0
 * @date May 26, 2014
 *
 */
(function ($) {
    $.fn.monthpicker = function (options, language) {

        var month  = {
            "de" : {
                "month" :  ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ]
            },
            "at" : {
                "month" :  ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ]
            },
            "es" : {
                "month" : ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']
            },
            "fr" : {
                "month" : ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
            },
            "hu" : {
                "month" : ['január', 'február', 'március', 'április', 'május', 'június', 'július', 'augusztus', 'szeptember', 'október', 'november', 'december']
            },
            "it" : {
                "month" : ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre']
            },
            "nl" : {
                "month" : ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']
            },
            "pt-BR" : {
                "month" : ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
            }
        }, defaults = {
            minYear: "1980",
            maxYear: "2010",
            class: "",
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }, i, yearbox, monthbox, obj = $(this);

        if (!$.isEmptyObject(options)) {
            defaults = $.extend(defaults, month[options.lang]);
        }

        options = $.extend(defaults, options);

        obj.hide();

        if (options.minYear > options.maxYear) {
            for (i = options.minYear; i >= options.maxYear; i--) {
                yearbox += '<option value="' + i + '">' + i + '</option>';
            }
        } else {
            for (i = options.minYear; i <= options.maxYear; i++) {
                yearbox += '<option value="' + i + '">' + i + '</option>';
            }
        }

        $.map(options.month, function (n, i) {
            monthbox += '<option value="' + i + '">' + n + '</option>';
        });
        var yearElement = $('<select class="yearpick ' + options.class + '">' + yearbox + '</select>'),
            monthElement = $('<select class="monthpick ' + options.class + '">' + monthbox + '</select>');

        monthElement.insertBefore(obj);
        yearElement.insertAfter(obj);

        var createTimestamp = function () {
            obj.attr('value', Math.round(Date.UTC(yearElement.val(), monthElement.val(), 1)) / 1000);
        }

        yearElement.change(createTimestamp);
        monthElement.change(createTimestamp);

        if (obj.val()!= ""){
            var timestamp = new Date(parseInt(obj.val()) * 1000);
            yearElement.val(timestamp.getFullYear());
            monthElement.val(timestamp.getMonth());
        }
    };
})(jQuery);