Bootstrap+Jquery zum Erreichen eines Kalendereffekts

@Zeichensatz "utf-8";
*{
Rand: 0; Polsterung: 0;
}
Textkörper, HTML-Textkörper {
    Farbe: #262626;
    Schriftart: 12px/1,5 Microsoft YaHei, Tahoma, Arial, Hiragino Sans GB, serifenlos;
}
Body, Div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, Pre, Code, Formular, Feldsatz, Legende, Eingabe, Schaltfläche, Textbereich, p, Blockzitat, th, td { Rand: 0; Polsterung: 0; Schriftfamilie: "微软雅黑"; }
Feldsatz, Bild { Rahmen: 0; }
ul, ol, li { Listenstil: keiner; Schriftfamilie: 'Microsoft YaHei'; }
Adresse, Beschriftung, Zitat, Code, dfn, em, strong, th, var, optgroup { Schriftstil: normal; Schriftstärke: normal; }
h1, h2, h3, h4, h5, h6 { Schriftgröße: 100 %; Schriftstärke: normal; }
Eingabe, Schaltfläche, Textbereich, Auswahl, Optionsgruppe, Option { Schriftfamilie: erben; Schriftgröße: erben; Schriftstil: erben; Schriftstärke: erben; Hintergrundfarbe: #fff; Rahmen: keiner;}
ein {text-decoration:none;}
ein:schweben{
Textdekoration: keine;
}
Eingabe, Schaltfläche, Textbereich { *Schriftgröße: 100 %;}
ol, ul { Listenstil: keine; }
/* Tabellen benötigen noch immer 'cellspacing="0"' im Markup */
Tabelle, tr, td { Rahmen-Collapse: Collapse; Rahmen-Abstand: 0; Rand: 0; Polsterung: 0;}
Beschriftung, th { Textausrichtung: links; }
.clearfix { löschen: beide; zoom:1;}
.clearfix:after { Anzeige: Block; Löschen: beides; Inhalt: "\0020"; Sichtbarkeit: ausgeblendet; Höhe: 0; }
.meinContainer{
 Breite: 960px;
 Rand: 40px automatisch;
}
.dateTimeWrap{
    Anzeige: keine;
    -webkit-Benutzerauswahl: keine;
    -moz-Benutzerauswahl: keine;
    -ms-Benutzerauswahl: keine;
    -o-Benutzerauswahl: keine;
    Benutzerauswahl: keine;
    Hintergrund: #494a4a;
    Polsterung: 10px;
    Position: fest;
    links: 0;
    oben: 0;
    z-Index:999;
    Schriftgröße: 14px;
    Farbe: #e2e2e2;
    Breite: 240px;
}
.datePart li.curDay{
    Farbe: #1ea0fa;
}
#dayDat li:hover{
    Rahmen: 2px doppelt #fff;
    Hintergrund: #1ea0fa;
    Farbe: #fff;
}
#Datum/Uhrzeit{
    *float:links;
 Farbe: #000000;
}
.dateTimeHead{
    *Überlauf: versteckt;
    Polsterung: 8px 0px 4px;
}
.datePart li{
    Rand: 2px doppelt transparent;
    schweben: links;
    Cursor: Standard;
    vertikale Ausrichtung: Mitte;
    Breite: 30px;
    Höhe: 26px;
    Textausrichtung: zentriert;
    Zeilenhöhe: 26px;
}
.datePart ul{
    Überlauf: versteckt;
}
.changeMonth{
    schweben: rechts
}
.changeMonth #vor, .changeMonth #next{
    Anzeige: Inline-Block;
    Breite: 20px;
    Höhe: 20px;
    Cursor: Standard;
    Farbe: Nr. 333;
    Hintergrund: #fff;
    Textausrichtung: zentriert;
    Zeilenhöhe: 20px;
}
.changeMonth #nächster{
    Rand links: 10px;
}
.dateTimeFoot-Spanne, .timeFooter-Spanne {
    Cursor: Zeiger;
    Anzeige: Inline-Block;
    Hintergrund: #fff;
    Farbe: #333;
    Höhe: 20px;
    Zeilenhöhe: 20px;
    Breite: 50px;
    Textausrichtung: zentriert;
    Rand links: 6px;
    schweben: rechts;
}
.timePart{
    Textausrichtung: zentriert;
    Farbe: Nr. 333;
    Zeilenhöhe: 22px;
}
.timePart p,.timePart ul{
    Hintergrund: #fff;
}
.timePart>ul>li{
    schweben: links;
    Breite: 119px;
    Hintergrund: #fff;
    Farbe: Nr. 333;
    Rand: 1px durchgezogen #ccc;
    Rand rechts: keine;
}
.timePart ul{
    Überlauf: versteckt;
}
.timePart>ul>li p{
    Zeilenhöhe: 30px;
    Rahmen unten: 1px durchgezogen #ccc;
}
.timePart ol{
    Höhe: 180px;
    Überlauf-y: versteckt;
    *Überlauf-y: automatisch;
    Überlauf-x: versteckt;
}
.timePart ol:hover{
    Überlauf-y:auto;
}
.timePart ol:hover li{
    Polsterung links: 17px;
    *Auffüllung links:0;
}
.timePart ol li{
    Zeilenhöhe: 30px;
}
.timePart ol li.cur{
    Hintergrund: #1ea0fa;
    Farbe: #fff
}
.dateTimeFoot,.timeFooter{
    Überlauf: versteckt;
    Rand oben: 10px;
    Höhe: 20px;
}
.timeFooter span{
    Breite: 80px;
}
.timeFooter #sicherstellen{
    Breite: 50px;
}
.dateTimeFoot .selTime, .timeFooter .selTime{
    schweben: links;
    Rand links: 0;
    Anzeige: keine;
}
.selTime{
    Breite: 80px!wichtig;
}
#JahrAuswählen{
    Rand rechts: 6px;
}
.dunkelgrau{
    Farbe: #d0d0d0 !wichtig;
}
 
.mycontainer Eingabe{
 Rand: 1px durchgezogen #ccc;
 Polsterung: 6px 10px;
}

(Funktion(o) {
 "streng verwenden";
 "Funktion" == Typ der Definition und Definition.amd ? Definition(["jquery"], o) : o(jQuery)
})(Funktion(o) {
 var t, i = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31],
  e = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  n = neues Datum,
  p = n.getFullYear(),
  l = n.getMonth(),
  a = n.getDate(),
  u = n.getHours(),
  v = n.getMinutes(),
  s = null,
  r = {
   Typ: "Datum",
   Hintergrund: "#494a4a"
  },
  c = !1;
 o.erweitern(o.fn, {
  Datum/Uhrzeit: Funktion(d) {
   returniere dies.jedes(Funktion() {
    Funktion h() {
     var t = o(
      '<div class="dateTimeWrap"><div class="datePart"><div class="dateTimeHead"><span year="2021" month="1" id="dateTime"><select class="year" name="yearSelect" id="yearSelect"><option value="1920">1920年</option><option value="1921">1921年</option><option value="1922">1922年</option><option value="1923">1923年</option><option value="1924">1924年</option><option value="1925">1925年</option><option value="1926">1926年</option><option value="1927">1927年</option><option value="1928">1928年</option><option value="1929">1929年</option><option value="1930">1930年</option><option value="1931">1931年</option><option value="1932">1932年</option><option value="1933">1933年</option><option value="1934">1934年</option><option value="1935">1935年</option><option value="1936">1936年</option><option value="1937">1937年</option><option value="1938">1938年</option><option value="1939">1939年</option><option value="1940">1940年</option><option value="1941">1941年</option><option value="1942">1942年</option><option value="1943">1943年</option><option value="1944">1944年</option><option value="1945">1945年</option><option value="1946">1946年</option><option value="1947">1947年</option><option value="1948">1948年</option><option value="1949">1949年</option><option value="1950">1950年</option><option value="1951">1951年</option><option value="1952">1952年</option><option value="1953">1953年</option><option value="1954">1954年</option><option value="1955">1955年</option><option value="1956">1956年</option><option value="1957">1957年</option><option value="1958">1958年</option><option value="1959">1959年</option><option value="1960">1960年</option><option value="1961">1961年</option><option value="1962">1962年</option><option value="1963">1963年</option><option value="1964">1964年</option><option value="1965">1965年</option><option value="1966">1966年</option><option value="1967">1967年</option><option value="1968">1968年</option><option value="1969">1969年</option><option value="1970">1970年</option><option value="1971">1971年</option><option value="1972">1972年</option><option value="1973">1973年</option><option value="1974">1974年</option><option value="1975">1975年</option><option value="1976">1976年</option><option value="1977">1977年</option><option value="1978">1978年</option><option value="1979">1979年</option><option value="1980">1980年</option><option value="1981">1981年</option><option value="1982">1982年</option><option value="1983">1983年</option><option value="1984">1984年</option><option value="1985">1985年</option><option value="1986">1986年</option><option value="1987">1987年</option><option value="1988">1988年</option><option value="1989">1989年</option><option value="1990">1990年</option><option value="1991">1991年</option><option value="1992">1992年</option><option value="1993">1993年</option><option value="1994">1994年</option><option value="1995">1995年</option><option value="1996">1996年</option><option value="1997">1997年</option><option value="1998">1998年</option><option value="1999">1999年</option><option value="2000">2000年</option><option value="2001">2001年</option><option value="2002">2002年</option><option value="2003">2003年</option><option value="2004">2004年</option><option value="2005">2005年</option><option value="2006">2006年</option><option value="2007">2007年</option><option value="2008">2008年</option><option value="2009">2009年</option><option value="2010">2010年</option><option value="2011">2011年</option><option value="2012">2012年</option><option value="2013">2013年</option><option value="2014">2014年</option><option value="2015">2015年</option><option value="2016">2016年</option><option value="2017">2017年</option><option value="2018">2018年</option><option value="2019">2019年</option><option value="2020">2020年</option><option value="2021">2021年</option><option value="2022">2022年</option><option value="2023">2023年</option><option value="2024">2024年</option><option value="2025">2025年</option><option value="2026">2026年</option><option value="2027">2027年</option><option value="2028">2028年</option><option value="2029">2029年</option><option value="2030">2030年</option><option value="2031">2031年</option><option value="2032">2032年</option><option value="2033">2033年</option><option value="2034">2034年</option><option value="2035">2035年</option><option value="2036">2036年</option><option value="2037">2037年</option><option value="2038">2038年</option><option value="2039">2039年</option><option value="2040">2040年</option><option value="2041">2041年</option><option value="2042">2042年</option><option value="2043">2043年</option><option value="2044">2044年</option><option value="2045">2045年</option><option value="2046">2046年</option><option value="2047">2047年</option><option value="2048">2048年</option><option value="2049">2049年</option><option value="2050">2050年</option></select><select class="month" name="monthSelect" id="monthSelect"><option value="0">一月</option><option value="1">二月</option><option value="2">三月</option><option value="3">四月</option><option value="4">五月</option><option value="5">六月</option><option value="6">七月</option><option value="7">八月</option><option value="8">九月</option><option value="9">十月</option><option value="10">十一月</option><option value="11">十二月</option></select></span><div class="changeMonth"><span id="pre"><</span> <span id="next">></span></div></div><div><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul id="dayDat"></ul></div><div class="dateTimeFoot"><span class="selTime">选择时间</span><span id="close">关闭</span><span id="selcurday">今天</span></div></div><div class="timePart" style="display:none"><ul><li id="selHour"><p>时</p><ol></ol></li><li id="selMinute"><p>分</p><ol></ol></li></ul><div class="timeFooter"><span class="selTime">选择日期</span><span id="ensure">确定</span><span id="curTime">当前时间</span></div></div></div>'
     );
     o("body").anhängen(t), c = !0
    }
 
    Funktion m(o, t) {
     var i = neues Datum(t, o, 1);
     returniere i.getDay()
    }
 
    Funktion f(o, t) {
     var n = t % 4,
      p = t % 100,
      l = t % 400;
     return 0 == n und 0 != p || 0 == l ?
    }
 
    Funktion g() {
     var t = "",
      i = f(l, p);
     a > i && (a = i), console.log(a);
     für (var e, n = m(l, p), u = 0; u < n; u++) t += "<li></li>";
     für (u = 1; u <= i; u++) e = u == a ? "Klasse = 'aktuellerTag'" : "", t += "<li " + e + ">" + u + "</li>";
     o("#dayDat").html(t)
    }
 
    Funktion y() {
     für (var t = "", i = "", e = 0; e < 24; e++) e < 10 und (e = "0" + e), t += e == u ? "<li class='cur'>" + e +
      "</li>" : "<li>" + e + "</li>";
     für (e = 0; e < 60; e++) e < 10 und (e = "0" + e), i += e == v ? "<li class='cur'>" + e + "</li>" : "<li>" +
      e + "</li>";
     o("#selHour ol").html(t), o("#selMinute ol").html(i)
    }
 
    Funktion T() {
     o(".dateTimeWrap").anzeigen();
     var i = t.Typ;
     wenn ("Datum" != i) {
      y(), o(".datePart").ausblenden().geschwister(".timePart").anzeigen();
      var e = o("#selHour .cur");
      o("#selHour ol").scrollTop(e.offset().top - o("#selHour ol").offset().top + o("#selHour ol").scrollTop() -
       e.äußereHöhe());
      var n = o("#selMinute .cur");
      o("#selMinute ol").scrollTop(n.offset().top - o("#selMinute ol").offset().top + o("#selMinute ol").scrollTop() -
       n.äußereHöhe())
     }
     "Zeit" != i && (g(), o(".datePart").show().siblings(".timePart").hide(), o("#yearSelect").val(p), o(
      "#Monatsauswahl").val(l)), "Datum/Uhrzeit" == i ? o(".selTime").anzeigen() : o(".selTime").ausblenden()
    }
 
    Funktion M() {
     var o = t.Typ,
      i = t.Wert,
      e = !0;
     return i && i.length > 0 && ("datetime" == o && (5 != i.length || i[0] > 2050 || i[0] < 1920 || i[1] > 12 ||
       i[1] < 1 || i[2] > 31 || i[2] < 1 || i[3] > 23 || i[3] < 1 || i[4] > 59 || i[4] < 1) && (e = !1), "Datum" ==
      o && (3 != i.Länge || i[0] > 2050 || i[0] < 1920 || i[1] > 12 || i[1] < 1 || i[2] > 31 || i[2] < 1) && (e = !
       1), "Zeit" == o && (2 != i.Länge || i[0] > 23 || i[0] < 1 || i[1] > 59 || i[1] < 1) && (e = !1)), e
    }
 
    Funktion P() {
     var i, e, n = t.Typ;
     (i = "Datum" == n ? p + "-" + (parseInt(l) + 1) + "-" + a : "Uhrzeit" == n ? u + ":" + v : p + "-" + (parseInt(l) +
       1) + "-" + a + " " + u + ":" + v, s.val(i), o(".dateTimeWrap").hide(), t.success && "Funktion" == Typ von t
      .success) && (e = "Datum" == n ? [p, parseInt(l) + 1, parseInt(a)] : "Uhrzeit" == n ? [u, v] : [p, parseInt(l) +
      1, parseInt(a), u, v
     ], t.Erfolg(e))
    }
    var S = o(dies);
    t = o.extend(!0, {}, r, d), c || h(), o("#selcurday,#close,#dayDat,.changeMonth span,.selTime").unbind(
     "klicken"), o("#Jahresauswahl,#Monatsauswahl").aufheben("ändern"), o("#Jahresauswahl,#Monatsauswahl").ändern(Funktion() {
     l = o("#Monatsauswahl").val(), p = o("#Jahresauswahl").val(), g()
    }), o(".changeMonth span").click(function() {
     "pre" == diese.id ? (l -= 1, -1 == l && (l = 11, p -= 1)) : (l += 1, 12 == l && (l = 0, p += 1)), g(), o(
      "#JahrAuswahl").val(p), o("#MonatAuswahl").val(l)
    }), o("#selcurday").click(function() {
     var i = neues Datum;
     p = i.getFullYear(), l = i.getMonth(), a = i.getDate(), g(), o("#Jahresauswahl").val(p), o("#Monatsauswahl").val(
      l), "Datum/Uhrzeit" != t.Typ ? P() : o(".datePart").hide().siblings(".timePart").show()
    }), o("#schließen").click(function() {
     o(".dateTimeWrap").ausblenden()
    }), o("#dayDat").on("klicken", "li", function() {
     a = o(diese).html(), "Datum/Uhrzeit" != t.Typ ? P() : o(".datePart").hide().siblings(".timePart").show()
    }), o(".selTime").klick(function() {
     "Zeit auswählen" == o(this).html() ? o(".datePart").hide().siblings(".timePart").show() : o(".datePart").show().siblings(
      ".timePart").hide()
    }), o(".timePart ol,.timeFooter #ensure,.timeFooter #curTime").unbind("klicken"), o(".timePart ol").on("klicken",
     "li",
     Funktion() {
      o(diese).addClass("aktuell").geschwister("li").removeClass("aktuell");
      var t = o(dieses).übergeordnetesElement();
      t.animieren({
       scrollTop: o(diese).offset().top - t.offset().top + t.scrollTop() - o(diese).äußereHeight()
      }, 100)
     }), o(".timeFooter #ensure").click(function() {
     u = o("#selHour ol .cur").html(), v = o("#selMinute ol .cur").html(), P(), o(".dateTimeWrap").hide()
    }), o(".timeFooter #curTime").click(function() {
     u = n.getHours(), v = n.getMinutes(), parseInt(u) < 10 && (u = "0" + u), parseInt(v) < 10 && (v = "0" + v),
      y(u, v), P()
    }), S.click(function() {
     if (t = o.extend(!0, {}, r, d), !M()) return alert("Parameterfehler"), !1;
     var i = dieser.Wert;
     wenn (i) {
      i = i.replace(/-/g, "/");
      var e = neues Datum(i)
     }
     "Datum" == t.Typ ? dieser.Wert ? (l = e.getMonth(), p = e.getFullYear(), a = e.getDate()) : (l = t.Wert[1] -
      1, p = t.Wert[0], a = t.Wert[2]) : "Zeit" == t.Typ ? dieser.Wert ? (u = dieser.Wert.split(":")[0], v =
      dieser.Wert.split(":")[1]) : (v = t.Wert[1], u = t.Wert[0]) : dieser.Wert ? (l = e.getMonth(), p = e.getFullYear(),
      a = e.getDate(), u = e.getHours(), v = e.getMinutes()) : (l = t.Wert[1] - 1, p = t.Wert[0], a = t.Wert[
      2], v = t.Wert[4], u = t.Wert[3]), s = o(dieser), T();
     var n = S.offset().links,
      c = S.offset().oben + S.äußereHöhe() + 4;
     o(".dateTimeWrap").css({
      Hintergrund: t.background,
      oben: c,
      links: n
     })
    })
   }), Das
  }
 })
});

<!DOCTYPE html>
<html lang="de">
 <Kopf>
  <meta charset="UTF-8">
  <title>jQuery klickt auf das Eingabefeld, um ein Kalendersteuerelement einzublenden</title>
  <link rel="stylesheet" href="css/dateTime.css" >
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  <script src="js/jquery-3.5.1.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/dateTime.min.js"></script>
 </Kopf>
 <Text>
  <div Klasse="Zeile" Stil="margin-top: 50px;">
   <div Klasse="Eingabegruppe col-sm-4 col-sm-offset-3">
    <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i></span>
    <input type="text" class="form-control" placeholder="Geburtstag" aria-describedby="sizing-addon1" id="date">
   </div>
  </div>
  <Skripttyp="text/javascript">
   $("#date").datumzeit({
    Typ: "Datum",
    Wert: [2021, 1, 1]
   })
  </Skript>
 </body>
</html>