在jquery datepicker插件中需要帮助

Question

我需要一些帮助，我在jquery中制作了一个简单的datepicker插件。一切正常。可以选择日期，更改日期等，但是如果调用插件进行多次输入并选择一个日期，则它将在每个字段中填写相同的日期。

请检查代码样式，我缺少什么或做错了什么，我还想在单击输入字段时调用初始化函数功能

Js:


<script>
'use strict';
!(function($) {
    $.fn.calender = function(options) {
        var element = $(this);
        this.elementId = element.attr("id")
        let j_container = "jcalender-container";
        let main_container = '';

        var defaults = {
            color: "white",
            BackgroundColor: "#556b2f",
            date: new Date(),
            top_month: "short",
            format: "d/m/Y",
            getDate: function() {}
        };

        defaults.day = defaults.date.getDay();
        defaults.month = defaults.date.getMonth();
        defaults.IMonth = defaults.date.getMonth();
        defaults.year = defaults.date.getFullYear();
        let a = 0;
        var utils = {
            dates: {
                days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
                daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
                months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            isLeapYear: function(year) {
                return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
            },
            getDaysInMonth: function(year, month) {
                return [31, (utils.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
            },
            parseMonth: function(options) {
                let obj = {
                        year: options.year
                    },
                    lmonth = "",
                    smonth = "",
                    month = options.month;
                if (!isNaN(parseInt(month))) {
                    obj.IMonth = month;
                    if (settings.top_month == "short") {
                        obj.month = utils.dates.monthsShort[month];
                    } else if (settings.top_month == "long") {
                        obj.month = utils.dates.months[month];
                    }
                } else {
                    smonth = utils.dates.monthsShort.indexOf(month);
                    lmonth = utils.dates.months.indexOf(month);
                    obj.month = month;
                    if (smonth != -1) {
                        obj.IMonth = smonth;
                    } else if (lmonth != -1) {
                        obj.IMonth = lmonth;
                    }
                }
                return obj;
            },
            parseFormat: function(format) {
                let separator = format.match(/[.\/\-\s].*?/),
                    parts = format.split(/\W+/);
                if (!separator || !parts || parts.length === 0) {
                    throw new Error("Invalid date format.");
                }
                return {
                    separator: separator,
                    parts: parts
                };
            },
            parseDate: function(date) {
                let dates = new Date(date)
                let format = settings.format;
                let parsed = utils.parseFormat(format);
                let Fdate = [];
                let parts = parsed.parts;
                let separator = parsed.separator;

                for (let i = 0; i < parts.length; i++) {
                    switch (parts[i]) {
                        case 'm':
                        case 'mm':
                            Fdate.push(dates.getMonth() + 1)
                            break;
                        case 'M':
                            Fdate.push(utils.dates.monthsShort[dates.getMonth() + 1])
                            break;
                        case 'MM':
                            Fdate.push(utils.dates.months[dates.getMonth() + 1])
                            break;
                        case 'd':
                            Fdate.push(dates.getDate())
                            break;
                        case 'dd':
                            Fdate.push(utils.dates.daysMin[dates.getDay()])
                            break;
                        case 'D':
                            Fdate.push(utils.dates.daysShort[dates.getDay()])
                            break;
                        case 'DD':
                            Fdate.push(utils.dates.days[dates.getDay()])
                            break;
                        case 'Y':
                        case 'YY':
                            Fdate.push(dates.getFullYear())
                            break;
                        case 'y':
                        case 'yy':
                            Fdate.push(dates.getYear())
                            break;
                    }
                }
                return Fdate.join(separator)
            }
        };

        var settings = $.extend({}, defaults, options);
        if (this.length > 1) {
            this.each(function() {
                $(this).calender(options)
            });
            return this;
        }
        var _this = this;
        switch (settings.top_month) {
            case "short":
            default:
                settings.month = utils.dates.monthsShort[settings.month];
                break;
            case "long":
                settings.month = utils.dates.months[settings.month];
                break;
        }
        let j_month_control = "jmonth-control";
        let get_date = "get-date";
        this.initialize = function() {
            // $("head").append(this.css);
            main_container = $("body").find("." + j_container);
            if (main_container.length == 0) {
                $("body").append(`<div class="${j_container}"></div>`)
                main_container = $("body").find("." + j_container);
            }
            this.render(settings);
            return this;
        };

        this.populateDay = function(year, month) {
            var firstDay = new Date(year, month, 1);
            var lastDay = new Date(year, month + 1, 0);
            var offset = firstDay.getDay();
            var total_days = utils.getDaysInMonth(year, month);
            total_days = total_days + offset;
            var html = "";
            var td = "";
            var td = new Array();
            let b = 1;
            for (let a = 0; a < total_days; a++) {
                if (a < offset) {
                    td.push("<td><div></div></td>")
                } else {
                    td.push("<td><div data-month=" + month + " data-year=" + year + "  class='" + get_date + "'>" + b + "</div></td>")
                    b++;
                }
            }
            for (let a = 0; a < total_days; a = a + 7) {
                let tr = td.slice(a, a + 7)
                html += "<tr>" + tr.join("") + "<tr>";
            }
            return html;
        };
        /*hide/show calender*/

        element.on("click", function() {
            let main_css = {
                "position": "absolute",
                "z-index": 1,
                "left": element.offset().left,
                "top": (element.offset().top + element.outerHeight() + 5)
            };
            main_container.css(main_css)
            main_container.show();
        });
        /* change left right month */
        $(document).on("click", "." + j_month_control, function() {
            let type = $(this).attr("type");
            let year = $(this).parent().find(".jyear");
            let get_year = parseInt(year.text());
            let month = $(this).parent().find("label.jmonth");
            let get_month = month.text();
            let date = utils.parseMonth({
                "year": get_year,
                "month": get_month
            });
            let set_year = date.year;
            let set_month = "";
            if (type == "prev") {
                if (date.IMonth == 0) {
                    set_month = 11;
                    set_year = date.year - 1;
                } else {
                    set_month = date.IMonth - 1;
                }
            } else if (type == "next") {
                // set_month = date.IMonth + 1;
                if (date.IMonth == 11) {
                    set_month = 0;
                    set_year = date.year + 1;
                } else {
                    set_month = date.IMonth + 1;
                }
            }
            _this.render({
                "month": set_month,
                "year": set_year
            })
        });
        /* get current date */
        $(document).on("click", "." + get_date, function() {
            let year = parseInt($(this).data("year"))
            let month = parseInt($(this).data("month"))
            let day = parseInt($(this).text())
            let date = utils.parseDate(year + "-" + month + "-" + day);
            element.val(date)
            main_container.hide();
        })

        this.render = function(options) {
            options = utils.parseMonth(options)
            let content = `<div class="jheader-container">
            <div class="j-left-arrow ${j_month_control}" type="prev"><</div>
            <div class="j-center-date">
                <label class="jmonth">${options.month}</label>
                <label class="jyear">${options.year}</label>
            </div>
            <div class="j-right-arrow ${j_month_control}" type="next">></div>
        </div>
        <div class="j-table-container">
            <div class="jweek-name">
            <table>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </table>
            </div>
            <div class="j-calender-days"><table class="jmonth-days">${_this.populateDay(options.year,options.IMonth)}</table>
            </div>
        </div>`;
            main_container.html(content)
        }
        return this.initialize();
    }
})(jQuery);
<script>
</pre>