1.引入js库文件

window.lCalendar = function () {
    var e = function () {
        this.gearDate, this.minY = 1940, this.minM = 1, this.minD = 1, this.maxY = 2019, this.maxM = 12, this.maxD = 31, this.type = 1
    };
    return e.prototype = {
        init: function (e) {
            this.trigger = document.querySelector(e), this.bindEvent("date")
        },
        bindEvent: function (e) {
            function t(e) {
                document.activeElement.blur(), b.gearDate = document.createElement("div"), b.gearDate.className = "gearDate", b.gearDate.innerHTML = '<div class="date_ctrl slideInUp"><div class="date_info_box lcalendar_info">2016年12月29日</div><div class="date_class_box"><div class="date_class lcalendar_gongli">公历</div><div class="date_class lcalendar_nongli">农历</div></div><div class="date_roll_mask"><div class="date_roll"><div><div class="gear date_yy" data-datetype="date_yy"></div><div class="date_grid"></div></div><div><div class="gear date_mm" data-datetype="date_mm"></div><div class="date_grid"></div></div><div><div class="gear date_dd" data-datetype="date_dd"></div><div class="date_grid"></div></div></div></div><div class="date_btn_box"><div class="date_btn lcalendar_cancel">取消</div><div class="date_btn lcalendar_finish">确定</div></div></div>', document.body.appendChild(b.gearDate), r();
                var t = "ontouchstart" in window,
                    n = b.gearDate.querySelector(".lcalendar_cancel");
                n.addEventListener(t ? "touchstart" : "click", p);
                var i = b.gearDate.querySelector(".lcalendar_finish");
                i.addEventListener(t ? "touchstart" : "click", w);
                var d = b.gearDate.querySelector(".lcalendar_gongli"),
                    s = b.gearDate.querySelector(".lcalendar_nongli");
                d.addEventListener(t ? "touchstart" : "click", function () {
                    a("gongli")
                }, !1), s.addEventListener(t ? "touchstart" : "click", function () {
                    a("nongli")
                }, !1);
                var l = b.gearDate.querySelector(".date_yy"),
                    o = b.gearDate.querySelector(".date_mm"),
                    y = b.gearDate.querySelector(".date_dd");
                l.addEventListener("touchstart", v), o.addEventListener("touchstart", v), y.addEventListener("touchstart", v), l.addEventListener("mousedown", m), o.addEventListener("mousedown", m), y.addEventListener("mousedown", m), l.addEventListener("touchmove", u), o.addEventListener("touchmove", u), y.addEventListener("touchmove", u), l.addEventListener("touchend", _), o.addEventListener("touchend", _), y.addEventListener("touchend", _), navigator.userAgent.indexOf("Firefox") > 0 ? (b.gearDate.addEventListener("DOMMouseScroll", function (e) {
                    e.preventDefault()
                }, !1), l.addEventListener("DOMMouseScroll", c, !1), o.addEventListener("DOMMouseScroll", c, !1), y.addEventListener("DOMMouseScroll", c, !1)) : (b.gearDate.onmousewheel = function (e) {
                    return !1
                }, l.onmousewheel = c, o.onmousewheel = c, y.onmousewheel = c)
            }

            function a(e) {
                var t = b.gearDate.querySelector(".lcalendar_nongli"),
                    a = b.gearDate.querySelector(".lcalendar_gongli"),
                    r = 0;
                if ("nongli" == e && 1 != b.type ? (t.className = t.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "") + " active", a.className = a.className.replace(/active/, ""), b.type = 1, r = 1) : "gongli" == e && 0 != b.type && (t.className = t.className.replace(/active/, ""), a.className = a.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "") + " active", b.type = 0, r = 1), r) {
                    var i = b.maxY - b.minY + 1,
                        d = parseInt(Math.round(b.gearDate.querySelector(".date_yy").getAttribute("val"))),
                        l = parseInt(Math.round(b.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1,
                        o = parseInt(Math.round(b.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1,
                        c = d % i + b.minY,
                        e = b.type ? 0 : 1,
                        m = D[d].Intercalation ? D[d].Intercalation : 0;
                    !b.type && m && (m == l - 1 ? l = -(l - 1) : m < l - 1 ? l -= 1 : l = l);
                    var v = s(e, c, l, o),
                        u = D[v.yy - b.minY].Intercalation ? D[v.yy - b.minY].Intercalation : 0;
                    u && b.type && (v.mm < 0 ? v.mm = -v.mm + 1 : v.mm > u && (v.mm = v.mm + 1)), b.gearDate.querySelector(".date_yy").setAttribute("val", v.yy - b.minY), b.gearDate.querySelector(".date_mm").setAttribute("val", v.mm - 1), b.gearDate.querySelector(".date_dd").setAttribute("val", v.dd - 1), b.gearDate.querySelector(".date_yy").setAttribute("top", ""), n()
                }
            }

            function r() {
                var e = new Date,
                    t = {
                        yy: 1986,
                        mm: e.getMonth(),
                        dd: e.getDate() - 1
                    };
                if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(b.trigger.getAttribute("data-date")) ? (rs = b.trigger.getAttribute("data-date").match(/(^|-)\d{1,4}/g), t.yy = rs[0] - b.minY, t.mm = rs[1].replace(/-/g, "") - 1, t.dd = rs[2].replace(/-/g, "") - 1) : t.yy = t.yy + 1900 - b.minY, b.gearDate.querySelector(".date_yy").setAttribute("val", t.yy), b.gearDate.querySelector(".date_mm").setAttribute("val", t.mm), b.gearDate.querySelector(".date_dd").setAttribute("val", t.dd), parseInt(b.trigger.getAttribute("data-type"))) {
                    b.type = 1;
                    var a = b.gearDate.querySelector(".lcalendar_nongli");
                    a.className = a.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "") + " active";
                    var r = b.maxY - b.minY + 1,
                        i = t.yy % r + b.minY,
                        d = t.mm + 1,
                        l = t.dd + 1,
                        o = s(0, i, d, l);
                    o.mm < 0 && (o.mm = -o.mm + 1), b.gearDate.querySelector(".date_yy").setAttribute("val", o.yy - b.minY), b.gearDate.querySelector(".date_mm").setAttribute("val", o.mm - 1), b.gearDate.querySelector(".date_dd").setAttribute("val", o.dd - 1)
                } else {
                    b.type = 0;
                    var c = b.gearDate.querySelector(".lcalendar_gongli");
                    c.className = c.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "") + " active"
                }
                n()
            }

            function n() {
                var e = b.maxY - b.minY + 1,
                    t = b.gearDate.querySelector(".date_yy"),
                    a = "";
                if (t && t.getAttribute("val")) {
                    for (var r = parseInt(t.getAttribute("val")), n = 0; n <= e - 1; n++) a += "<div class='tooth'>" + (b.minY + n) + "</div>";
                    t.innerHTML = a;
                    var s = Math.floor(parseFloat(t.getAttribute("top")));
                    if (isNaN(s)) t.style["-webkit-transform"] = "translate3d(0," + (8 - 2 * r) + "em,0)", t.setAttribute("top", 8 - 2 * r + "em");
                    else {
                        s % 2 == 0 ? s = s : s += 1, s > 8 && (s = 8);
                        var l = 8 - 2 * (e - 1);
                        s < l && (s = l), t.style["-webkit-transform"] = "translate3d(0," + s + "em,0)", t.setAttribute("top", s + "em"), r = Math.abs(s - 8) / 2, t.setAttribute("val", r)
                    }
                    var o = b.gearDate.querySelector(".date_mm");
                    if (o && o.getAttribute("val")) {
                        a = "";
                        var c = parseInt(o.getAttribute("val")),
                            m = D[r].Intercalation ? D[r].Intercalation : 0;
                        if (m && b.type) var v = 12;
                        else var v = 11;
                        var u = 0;
                        r == e - 1 && (v = b.type ? b.maxM - 2 : b.maxM - 1), 0 == r && (u = b.type ? b.minM - 1 : b.minM);
                        for (var n = 0; n < v - u + 1; n++) {
                            var _ = u + n + 1;
                            b.type && (_ = m && m == n ? d("rm", _ - 1) : m && m < n ? d("mm", _ - 1) : d("mm", _)), a += "<div class='tooth'>" + _ + "</div>"
                        }
                        o.innerHTML = a, c > v ? (c = v, o.setAttribute("val", c)) : c < u && (c = v, o.setAttribute("val", c)), o.style["-webkit-transform"] = "translate3d(0," + (8 - 2 * (c - u)) + "em,0)", o.setAttribute("top", 8 - 2 * (c - u) + "em");
                        var y = b.gearDate.querySelector(".date_dd");
                        if (y && y.getAttribute("val")) {
                            a = "";
                            var g = parseInt(y.getAttribute("val")),
                                p = i(r, c),
                                w = p - 1,
                                h = 0;
                            r == e - 1 && 11 == c + 1 && (w = b.type ? b.maxD - 7 : b.maxD - 2), 0 == r && 2 == c + 1 && (h = b.type ? b.minD - 1 : b.minD + 6);
                            for (var n = 0; n < w - h + 1; n++) {
                                var _ = b.type ? d("dd", h + n + 1) : h + n + 1;
                                a += "<div class='tooth'>" + _ + "</div>"
                            }
                            y.innerHTML = a, g > w ? (g = w, y.setAttribute("val", g)) : g < h && (g = h, y.setAttribute("val", g)), y.style["-webkit-transform"] = "translate3d(0," + (8 - 2 * (g - h)) + "em,0)", y.setAttribute("top", 8 - 2 * (g - h) + "em"), f()
                        }
                    }
                }
            }

            function i(e, t) {
                return 1 == b.type ? D[e].MonthDays[t] ? 30 : 29 : 1 == t ? (e += b.minY, e % 4 == 0 && e % 100 != 0 || e % 400 == 0 && e % 4e3 != 0 ? 29 : 28) : 3 == t || 5 == t || 8 == t || 10 == t ? 30 : 31
            }

            function d(e, t) {
                var a = ["闰正月", "闰二月", "闰三月", "闰四月", "闰五月", "闰六月", "闰七月", "闰八月", "闰九月", "闰十月", "闰冬月", "闰腊月"],
                    r = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    n = ["初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十", "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十", "三十一"];
                return "rm" == e ? a[t - 1] : "mm" == e ? r[t - 1] : "dd" == e ? n[t - 1] : void 0
            }

            function s(e, t, a, r) {
                var n = t,
                    i = a,
                    d = r,
                    s = 1940,
                    o = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
                    c = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365, 396, 0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366, 397];
                if (0 == e) {
                    var m = parseInt(n),
                        v = parseInt(i),
                        u = parseInt(d),
                        _ = v - 1,
                        y = l(m),
                        g = (1 == _ ? y + 28 : o[_], m - s),
                        p = c[14 * y + _] + u,
                        w = p + D[g].BaseKanChih,
                        f = w % 60;
                    if (f = f < 22 ? 22 - f : 82 - f, f += 3, f < 10 && (f += 60), p <= D[g].BaseDays) {
                        g--;
                        var b = m - 1;
                        y = l(b), _ += 12, p = c[14 * y + _] + u
                    } else var b = m;
                    var h = D[g].BaseDays;
                    for (E = 0; E < 13; E++) {
                        var A = h + D[g].MonthDays[E] + 29;
                        if (p <= A) break;
                        h = A
                    }
                    var M = E + 1,
                        I = p - h,
                        S = D[g].Intercalation;
                    return 0 != S && M > S && (M--, M == S && (M = -S)), M > 12 && (M -= 12), {
                        yy: b,
                        mm: M,
                        dd: I
                    }
                }
                var b = parseInt(n),
                    M = parseInt(i),
                    I = parseInt(d),
                    g = b - s,
                    S = D[g].Intercalation,
                    q = M;
                0 != S && (q > S ? q++ : q == -S && (q = S + 1)), q--;
                for (var p = 0, E = 0; E < q; E++) p += D[g].MonthDays[E] + 29;
                p += D[g].BaseDays + I;
                for (var y = l(b), E = 13; E >= 0 && !(p > c[14 * y + E]) ; E--);
                var u = p - c[14 * y + E];
                if (E <= 11) var m = b,
                    v = E + 1;
                else var m = b + 1,
                    v = E - 11;
                return {
                    yy: m,
                    mm: v,
                    dd: u
                }
            }

            function l(e) {
                return e % 400 == 0 ? 1 : e % 100 == 0 ? 0 : e % 4 == 0 ? 1 : 0
            }

            function o(e, t, a, r, n, i, d, s, l, o, c, m, v, u, _, y, g) {
                this.BaseDays = e, this.Intercalation = t, this.BaseWeekday = a, this.BaseKanChih = r, this.MonthDays = [n, i, d, s, l, o, c, m, v, u, _, y, g]
            }

            function c(e) {
                var e = e || event,
                    t = !0;
                t = e.wheelDelta ? e.wheelDelta > 0 : e.detail < 0;
                var a = t ? 21 : -21;
                e.preventDefault();
                for (var r = e.target; ;) {
                    if (r.classList.contains("gear")) break;
                    r = r.parentElement
                }
                clearInterval(r["int_" + r.id]), r["old_" + r.id] = 0, r["o_t_" + r.id] = (new Date).getTime();
                var n = r.getAttribute("top");
                n ? r["o_d_" + r.id] = parseFloat(n.replace(/em/g, "")) : r["o_d_" + r.id] = 0, r["new_" + r.id] = a, r["n_t_" + r.id] = (new Date).getTime() + 360;
                var i = 18 * (r["new_" + r.id] - r["old_" + r.id]) / 370;
                r["pos_" + r.id] = r["o_d_" + r.id] + i, r.setAttribute("top", r["pos_" + r.id] + "em");
                var d = (r["new_" + r.id] - r["old_" + r.id]) / (r["n_t_" + r.id] - r["o_t_" + r.id]);
                return Math.abs(d) <= .2 ? r["spd_" + r.id] = d < 0 ? -.08 : .08 : Math.abs(d) <= .5 ? r["spd_" + r.id] = d < 0 ? -.16 : .16 : r["spd_" + r.id] = d / 2, r["pos_" + r.id] || (r["pos_" + r.id] = 0), e.preventDefault && e.preventDefault(), y(r), !1
            }

            function m(e) {
                e.preventDefault();
                for (var t = e.target, a = t, r = !1; ;) {
                    if (t.classList.contains("gear")) break;
                    t = t.parentElement
                }
                clearInterval(t["int_" + t.id]), t["old_" + t.id] = e.screenY, t["o_t_" + t.id] = (new Date).getTime();
                var n = t.getAttribute("top");
                n ? t["o_d_" + t.id] = parseFloat(n.replace(/em/g, "")) : t["o_d_" + t.id] = 0, document.onmousemove = function (e) {
                    r = !0, e = e || window.event, e.preventDefault();
                    for (var t = a; ;) {
                        if (t.classList.contains("gear")) break;
                        t = t.parentElement
                    }
                    t["new_" + t.id] = e.screenY, t["n_t_" + t.id] = (new Date).getTime();
                    var n = 18 * (t["new_" + t.id] - t["old_" + t.id]) / 370;
                    t["pos_" + t.id] = t["o_d_" + t.id] + n, t.style["-webkit-transform"] = "translate3d(0," + t["pos_" + t.id] + "em,0)", t.setAttribute("top", t["pos_" + t.id] + "em")
                }, document.onmouseup = function (e) {
                    if (!r) return document.onmousemove = null, document.onmouseup = null, !1;
                    e = e || window.event, e.preventDefault();
                    for (var t = a; ;) {
                        if (t.classList.contains("gear")) break;
                        t = t.parentElement
                    }
                    var n = (t["new_" + t.id] - t["old_" + t.id]) / (t["n_t_" + t.id] - t["o_t_" + t.id]);
                    Math.abs(n) <= .2 ? t["spd_" + t.id] = n < 0 ? -.08 : .08 : Math.abs(n) <= .5 ? t["spd_" + t.id] = n < 0 ? -.16 : .16 : t["spd_" + t.id] = n / 2, t["pos_" + t.id] || (t["pos_" + t.id] = 0), y(t), document.onmousemove = null, document.onmouseup = null
                }
            }

            function v(e) {
                e.preventDefault();
                var t = e.target;
                for (t.touchTip = !1; ;) {
                    if (t.classList.contains("gear")) break;
                    t = t.parentElement
                }
                clearInterval(t["int_" + t.id]), t["old_" + t.id] = e.targetTouches[0].screenY, t["o_t_" + t.id] = (new Date).getTime();
                var a = t.getAttribute("top");
                a ? t["o_d_" + t.id] = parseFloat(a.replace(/em/g, "")) : t["o_d_" + t.id] = 0
            }

            function u(e) {
                e.preventDefault();
                var t = e.target;
                for (t.touchTip = !0; ;) {
                    if (t.classList.contains("gear")) break;
                    t = t.parentElement
                }
                t["new_" + t.id] = e.targetTouches[0].screenY, t["n_t_" + t.id] = (new Date).getTime();
                var a = 18 * (t["new_" + t.id] - t["old_" + t.id]) / 370;
                t["pos_" + t.id] = t["o_d_" + t.id] + a, t.style["-webkit-transform"] = "translate3d(0," + t["pos_" + t.id] + "em,0)", t.setAttribute("top", t["pos_" + t.id] + "em")
            }

            function _(e) {
                e.preventDefault();
                var t = e.target;
                if (!t.touchTip) return !1;
                for (; ;) {
                    if (t.classList.contains("gear")) break;
                    t = t.parentElement
                }
                var a = (t["new_" + t.id] - t["old_" + t.id]) / (t["n_t_" + t.id] - t["o_t_" + t.id]);
                Math.abs(a) <= .2 ? t["spd_" + t.id] = a < 0 ? -.08 : .08 : Math.abs(a) <= .5 ? t["spd_" + t.id] = a < 0 ? -.16 : .16 : t["spd_" + t.id] = a / 2, t["pos_" + t.id] || (t["pos_" + t.id] = 0), y(t)
            }

            function y(e) {
                var t = 0,
                    a = !1,
                    r = b.maxY - b.minY + 1;
                clearInterval(e["int_" + e.id]), e["int_" + e.id] = setInterval(function () {
                    var n = e["pos_" + e.id],
                        d = e["spd_" + e.id] * Math.exp(-.03 * t);
                    if (n += d, Math.abs(d) > .1);
                    else {
                        d = .1;
                        var s = 2 * Math.round(n / 2);
                        Math.abs(n - s) < .02 ? a = !0 : n > s ? n -= d : n += d
                    }
                    switch (n > 8 && (n = 8, a = !0), e.dataset.datetype) {
                        case "date_yy":
                            var l = 8 - 2 * (r - 1);
                            if (n < l && (n = l, a = !0), a) {
                                var o = Math.abs(n - 8) / 2;
                                g(e, o), clearInterval(e["int_" + e.id])
                            }
                            break;
                        case "date_mm":
                            var c = b.gearDate.querySelector(".date_yy"),
                                m = parseInt(c.getAttribute("val")),
                                v = D[m].Intercalation ? D[m].Intercalation : 0;
                            if (v && b.type) var u = 12;
                            else var u = 11;
                            var _ = 0;
                            m == r - 1 && (u = b.type ? b.maxM - 2 : b.maxM - 1), 0 == m && (_ = b.type ? b.minM - 1 : b.minM);
                            var l = 8 - 2 * (u - _);
                            if (n < l && (n = l, a = !0), a) {
                                var o = Math.abs(n - 8) / 2 + _;
                                g(e, o), clearInterval(e["int_" + e.id])
                            }
                            break;
                        case "date_dd":
                            var c = b.gearDate.querySelector(".date_yy"),
                                y = b.gearDate.querySelector(".date_mm"),
                                m = parseInt(c.getAttribute("val")),
                                p = parseInt(y.getAttribute("val")),
                                w = i(m, p),
                                f = w - 1,
                                h = 0;
                            m == r - 1 && 11 == p + 1 && (f = b.type ? b.maxD - 7 : b.maxD - 2), 0 == m && 2 == p + 1 && (h = b.type ? b.minD - 1 : b.minD + 6);
                            var l = 8 - 2 * (f - h);
                            if (n < l && (n = l, a = !0), a) {
                                var o = Math.abs(n - 8) / 2 + h;
                                g(e, o), clearInterval(e["int_" + e.id])
                            }
                    }
                    e["pos_" + e.id] = n, e.style["-webkit-transform"] = "translate3d(0," + n + "em,0)", e.setAttribute("top", n + "em"), t++
                }, 6)
            }

            function g(e, t) {
                t = Math.round(t), e.setAttribute("val", t), n()
            }

            function p(e) {
                e.preventDefault();
                var t = new CustomEvent("input");
                b.trigger.dispatchEvent(t), document.body.removeChild(b.gearDate)
            }

            function w(e) {
                var t = f();
                b.trigger.setAttribute("data-date", t.yy + "-" + t.mm + "-" + t.dd);
                var a = b.trigger.getAttribute("data-input-id");
                if (a && (document.getElementById(a).value = t.yy + "-" + t.mm + "-" + t.dd), b.type) {
                    var r = t._mm < 0 ? d("rm", -t._mm) : d("mm", t._mm);
                    b.trigger.value = "农历:" + t._yy + "年" + r + d("dd", t._dd)
                } else b.trigger.value = "公历:" + t.yy + "-" + t.mm + "-" + t.dd;
                p(e)
            }

            function f() {
                var e = b.maxY - b.minY + 1,
                    t = parseInt(Math.round(b.gearDate.querySelector(".date_yy").getAttribute("val"))),
                    a = t % e + b.minY,
                    r = parseInt(Math.round(b.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1,
                    n = parseInt(Math.round(b.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1,
                    i = D[t].Intercalation ? D[t].Intercalation : 0;
                b.type && i && (i == r - 1 ? r = -(r - 1) : i < r - 1 ? r -= 1 : r = r);
                var l = s(b.type, a, r, n),
                    o = b.gearDate.querySelector(".lcalendar_info");
                if (b.type) {
                    b.trigger.setAttribute("data-type", 1);
                    var c = r < 0 ? d("rm", -r) : d("mm", r);
                    return o.innerHTML = "农历:" + a + "年" + c + d("dd", n), {
                        yy: l.yy,
                        mm: l.mm,
                        dd: l.dd,
                        _yy: a,
                        _mm: r,
                        _dd: n
                    }
                }
                return b.trigger.setAttribute("data-type", 0), o.innerHTML = "公历:" + a + "年" + r + "月" + n + "日", {
                    _yy: l.yy,
                    _mm: l.mm,
                    _dd: l.dd,
                    yy: a,
                    mm: r,
                    dd: n
                }
            }
            var b = this,
                D = [new o(38, 0, 0, 38, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(26, 6, 2, 44, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0), new o(45, 0, 3, 49, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new o(35, 0, 4, 54, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new o(24, 4, 5, 59, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), new o(43, 0, 0, 5, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1), new o(32, 0, 1, 10, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1), new o(21, 2, 2, 15, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new o(40, 0, 3, 20, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new o(28, 7, 5, 26, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(47, 0, 6, 31, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1), new o(36, 0, 0, 36, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new o(26, 5, 1, 41, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), new o(44, 0, 3, 47, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1), new o(33, 0, 4, 52, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0), new o(23, 3, 5, 57, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), new o(42, 0, 6, 2, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), new o(30, 8, 1, 8, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0), new o(48, 0, 2, 13, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0), new o(38, 0, 3, 18, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1), new o(27, 6, 4, 23, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0), new o(45, 0, 6, 29, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0), new o(35, 0, 0, 34, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new o(24, 4, 1, 39, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), new o(43, 0, 2, 44, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), new o(32, 0, 4, 50, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new o(20, 3, 5, 55, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), new o(39, 0, 6, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0), new o(29, 7, 0, 5, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1), new o(47, 0, 2, 11, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new o(36, 0, 3, 16, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0), new o(26, 5, 4, 21, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1), new o(45, 0, 5, 26, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), new o(33, 0, 0, 32, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1), new o(22, 4, 1, 37, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new o(41, 0, 2, 42, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1), new o(30, 8, 3, 47, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1), new o(48, 0, 5, 53, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1), new o(37, 0, 6, 58, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new o(27, 6, 0, 3, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0), new o(46, 0, 1, 8, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0), new o(35, 0, 3, 14, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1), new o(24, 4, 4, 19, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1), new o(43, 0, 5, 24, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1), new o(32, 10, 6, 29, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1), new o(50, 0, 1, 35, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new o(39, 0, 2, 40, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1), new o(28, 6, 3, 45, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0), new o(47, 0, 4, 50, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new o(36, 0, 6, 56, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0), new o(26, 5, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1), new o(45, 0, 1, 6, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0), new o(34, 0, 2, 11, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0), new o(22, 3, 4, 17, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new o(40, 0, 5, 22, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new o(30, 8, 6, 27, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1), new o(49, 0, 0, 32, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1), new o(37, 0, 2, 38, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new o(27, 5, 3, 43, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1), new o(46, 0, 4, 48, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1), new o(35, 0, 5, 53, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1), new o(23, 4, 0, 59, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(42, 0, 1, 4, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(31, 0, 2, 9, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0), new o(21, 2, 3, 14, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1), new o(39, 0, 5, 20, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new o(28, 7, 6, 25, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), new o(48, 0, 0, 30, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1), new o(37, 0, 1, 35, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1), new o(25, 5, 3, 41, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new o(44, 0, 4, 46, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new o(33, 0, 5, 51, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(22, 4, 6, 56, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new o(40, 0, 1, 2, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new o(30, 9, 2, 7, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), new o(49, 0, 3, 12, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1), new o(38, 0, 4, 17, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0), new o(27, 6, 6, 23, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), new o(46, 0, 0, 28, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0), new o(35, 0, 1, 33, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), new o(24, 4, 2, 38, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new o(42, 0, 4, 44, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1), new o(31, 0, 5, 49, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0), new o(21, 2, 6, 54, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), new o(40, 0, 0, 59, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new o(28, 6, 2, 5, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), new o(47, 0, 3, 10, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1), new o(36, 0, 4, 15, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new o(25, 5, 5, 20, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), new o(43, 0, 0, 26, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1), new o(32, 0, 1, 31, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0)];
            b.trigger.addEventListener("click", {
                date: t
            }[e], !1)
        }
    }, e
}();

2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
    <script src="./1.js"></script>
</head>

<body>
    <li>
        <span>出生日期</span>
        <span>
            <input type="text" class="Js_date animated input" id="birthday"
                data-input-id="b_input" data-type="0" data-date="1990-01-01"
                placeholder="请选择(必填)">
            <input type="hidden" name="birthday" id="b_input" value=""
                data-date="1990-01-01">
        </span>
    </li>

    <script>
        window.onload = function () {
            new lCalendar().init('#birthday');
        }
    </script>
</body>

</html>

3.css

<style type="text/css">
        .date_btn,.date_grid {
            box-sizing:border-box
        }
        .date_btn,.date_class,.gear {
            cursor:pointer
        }
        .date_btn,.date_class,.date_class_box,.date_info_box,.tooth {
            text-align:center
        }
        .gearDate {
            font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size:10px;
            background-color:rgba(0,0,0,.6);
            display:block;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:9900;
            overflow:hidden;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
        }
        .date_ctrl {
            vertical-align:middle;
            background-color:#F0F0F0;
            border:1px solid #a5a5a5;
            border-radius:5px;
            color:#363837;
            margin:0;
            height:auto;
            width:90%;
            max-width:600px;
            position:absolute;
            left:50%;
            top:12%;
            z-index:9902;
            overflow:hidden;
            -webkit-transform:translate(-50%,0);
            transform:translate(-50%,0);
            -ms-transform:translate(-50%,0);
            -moz-transform:translate(-50%,0)
        }
        .date_roll,.date_roll>div {
            background-color:transparent;
            overflow:hidden
        }
        .date_grid,.date_info_box {
            border-bottom:1px solid #d4d4d4
        }
        .slideInUp {
            animation:slideInUp .3s ease-in;
            -webkit-animation:slideInUp .3s ease-in
        }
        @-webkit-keyframes slideInUp {
            from {
            -webkit-transform:translate(-50%,-100%);
            transform:translate(-50%,-100%);
            -moz-transform:translate(-50%,-100%);
            -ms-transform:translate(-50%,-100%);
            -o-transform:translate(-50%,-100%)
        }
        to {
            -webkit-transform:translate(-50%,0);
            transform:translate(-50%,0);
            -moz-transform:translate(-50%,0);
            -o-transform:translate(-50%,0);
            -ms-transform:translate(-50%,0)
        }
        }.date_roll {
            position:relative;
            width:100%;
            height:auto;
            font-weight:700;
            -webkit-mask:-webkit-gradient(linear,0 50%,0 100%,from(#debb47),to(rgba(36,142,36,0)));
            -webkit-mask:-webkit-linear-gradient(top,#debb47 50%,rgba(36,142,36,0))
        }
        .date_roll>div {
            font-size:2.3em;
            height:6em;
            float:left;
            position:relative;
            width:33.33%
        }
        .date_roll_mask {
            padding:0 2em;
            -webkit-mask:-webkit-gradient(linear,0 40%,0 0,from(#debb47),to(rgba(36,142,36,0)));
            -webkit-mask:-webkit-linear-gradient(bottom,#debb47 50%,rgba(36,142,36,0))
        }
        .date_grid {
            position:relative;
            top:2em;
            width:100%;
            height:2em;
            margin:0;
            z-index:0;
            background-color:#E8E8E8;
            border-top:1px solid #d4d4d4
        }
        .date_grid>div {
            color:#000;
            position:absolute;
            right:0;
            top:0;
            font-size:.8em;
            line-height:2.5em
        }
        .date_info_box {
            color:#000;
            font-size:1.8em;
            padding:.6em 1em;
            font-weight:700
        }
        .date_class_box {
            padding:1em 2em
        }
        .date_class {
            display:inline-block;
            font-size:1.4em;
            width:40%;
            padding:.4em 0;
            color:#bb1b21;
            border:1px solid #bb1b21
        }
        .date_class_box .date_class:first-child {
            border-top-left-radius:.2em;
            border-bottom-left-radius:.2em
        }
        .date_class_box .date_class:last-child {
            border-top-right-radius:.2em;
            border-bottom-right-radius:.2em
        }
        .date_class_box .active {
            background-color:#bb1b21;
            color:#fff
        }
        .date_btn_box {
            overflow:hidden;
            position:relative;
            border-top:1px solid #d4d4d4
        }
        .date_btn {
            color:#000;
            font-size:1.6em;
            line-height:1em;
            padding:.8em 1em;
            float:left;
            width:50%
        }
        .date_btn:first-child {
            border-right:1px solid #d4d4d4
        }
        .gear {
            float:left;
            position:absolute;
            z-index:9902;
            width:5.5em;
            margin-top:-6em
        }
        .date_roll>div .gear {
            width:100%
        }
        .tooth {
            height:2em;
            line-height:2em
        }
    </style>

4.初始化插件

$(function () { 
    new lCalendar().init('#birthday');
})