カレンダー効果を実現するための Bootstrap+JQuery

@文字セット "utf-8";
*{
マージン:0; パディング:0;
}
本文、html 本文 {
    色: #262626;
    フォント: 12px/1.5 Microsoft YaHei、tahoma、arial、Hiragino Sans GB、sans-serif;
}
body、div、dl、dt、dd、ul、ol、li、h1、h2、h3、h4、h5、h6、pre、code、form、fieldset、legend、input、button、textarea、p、blockquote、th、td { margin: 0; padding: 0; font-family: "微软雅黑"; }
フィールドセット、img { 境界線: 0; }
ul、ol、li { リストスタイル: なし; フォントファミリ: 'Microsoft YaHei'; }
address、caption、cite、code、dfn、em、strong、th、var、optgroup { font-style: normal; font-weight: normal; }
h1、h2、h3、h4、h5、h6 { フォントサイズ: 100%; フォントの太さ: 通常; }
input、button、textarea、select、optgroup、option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}
a{テキスト装飾:なし;}
ホバー{
テキスト装飾: なし;
}
入力、ボタン、テキストエリア{ *フォントサイズ: 100%;}
ol, ul { リストスタイル: なし; }
/* テーブルにはマークアップで 'cellspacing="0"' が必要です */
テーブル、tr、td { 境界線の折りたたみ: 折りたたみ; 境界線の間隔: 0; 余白:0; パディング:0;}
キャプション、th { text-align: left; }
.clearfix { クリア: 両方; ズーム: 1;}
.clearfix:after { display: block; clear: both; content: "\0020"; visibility: hidden; height: 0; }
.mycontainer{
 幅:960ピクセル;
 マージン:40px 自動;
}
.dateTimeWrap{
    表示: なし;
    -webkit-user-select:なし;
    -moz-ユーザー選択:なし;
    -ms-ユーザー選択:なし;
    -o-ユーザー選択:なし;
    ユーザー選択:なし;
    背景: #494a4a;
    パディング:10px;
    位置: 固定;
    左:0;
    トップ:0;
    zインデックス:999;
    フォントサイズ:14px;
    色:#e2e2e2;
    幅:240ピクセル;
}
.datePart li.curDay{
    カラー:#1ea0fa;
}
#dayDat li:hover{
    境界線:2px ダブル #fff;
    背景: #1ea0fa;
    色:#fff;
}
#日付時刻{
    *float:左;
 色: #000000;
}
.dateTimeHead{
    *オーバーフロー:非表示;
    パディング:8px 0px 4px;
}
.datePart li{
    border:2px 二重透明;
    フロート: 左;
    カーソル: デフォルト;
    垂直位置合わせ: 中央;
    幅: 30ピクセル;
    高さ: 26px;
    テキスト配置: 中央;
    行の高さ: 26px;
}
.datePart ul{
    オーバーフロー: 非表示;
}
.changeMonth{
    フロート: 右
}
.changeMonth #pre、.changeMonth #next{
    表示: インラインブロック;
    幅:20px;
    高さ:20px;
    カーソル: デフォルト;
    色:#333;
    背景: #fff;
    テキスト配置: 中央;
    行の高さ:20px;
}
.changeMonth #next{
    左マージン: 10px;
}
.dateTimeFoot スパン、.timeFooter スパン {
    カーソル: ポインタ;
    表示: インラインブロック;
    背景: #fff;
    色: #333;
    高さ:20px;
    行の高さ: 20px;
    幅:50px;
    テキスト配置: 中央;
    左マージン: 6px;
    フロート:右;
}
.timePart{
    テキスト配置:中央;
    色:#333;
    行の高さ: 22px;
}
.timePart p,.timePart ul{
    背景: #fff;
}
.timePart>ul>li{
    フロート: 左;
    幅:119ピクセル;
    背景: #fff;
    色:#333;
    境界線:1px実線 #ccc;
    右境界線:なし;
}
.timePart ul{
    オーバーフロー: 非表示;
}
.timePart>ul>li p{
    行の高さ: 30px;
    ボーダー下部:1px 実線 #ccc;
}
.timePart ol{
    高さ:180ピクセル;
    オーバーフロー-y: 非表示;
    *オーバーフロー-y: 自動;
    オーバーフロー-x:非表示;
}
.timePart ol:hover{
    オーバーフロー-y:自動;
}
.timePart ol:hover li{
    パディング左:17px;
    *左パディング:0;
}
.timePart ol li{
    行の高さ: 30px;
}
.timePart ol li.cur{
    背景: #1ea0fa;
    色: #fff
}
.dateTimeFoot、.timeFooter{
    オーバーフロー:非表示;
    上マージン: 10px;
    高さ: 20px;
}
.timeFooter スパン{
    幅:80ピクセル;
}
.timeFooter #ensure{
    幅:50px;
}
.dateTimeFoot .selTime、.timeFooter .selTime{
    フロート:左;
    左マージン:0;
    表示:なし;
}
.selTime{
    幅:80px!重要;
}
#年を選択{
    右マージン: 6px;
}
.ダークグレー{
    色:#d0d0d0 !重要;
}
 
.mycontainer 入力{
 境界線:1px実線 #ccc;
 パディング:6px 10px;
}

(関数(o) {
 「厳密な使用」;
 "function" == typeof define && define.amd ? define(["jquery"], o) : o(jQuery)
})(関数(o) {
 var t, i = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 31],
  e = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 31],
  n = 新しい日付、
  p = n.getFullYear(),
  l = n.getMonth(),
  a = n.getDate(),
  u = n.getHours()、
  v = n.getMinutes(),
  s = ヌル、
  r = {
   タイプ: "日付",
   背景: "#494a4a"
  },
  1 = !1;
 o.extend(o.fn, {
  日付時刻: 関数(d) {
   this.each(function() { を返します。
    関数h(){
     var t = o(
      '<div class = "datetimewrap"> <div class = "datepart"> <div class = "dateTimehead"> <span year = "2021" month = "1" id = "dateTime =" year "name =" yearect "=" yearelect "> <option値=" 1921 > 1922 </option> <option値= "1923"> 1923 > <Option Value = "1929"> 1929 1935 </option> <option値= "1936"> 1936 <オプション値= "1942"> 1942 </option> <option value = "1943"> 1943 > 1948オプション値= "1955"> 1955 </option> <オプション値= "1962"> 1962 </option> <option値= "1963"> 1963年</option> <option value = "1964"> 1964 > <オプション値= "1969"> 1969 = "1976">1976年</option> <option value = "1977"> 1977 "> 1983 </option> <option value =" 1984 "> 1984年</option> <option value =" 1985 "> 1985年</option> <option value =" 1986 "> 1986年</option> <option value">1987年</option> <option value = "1988"年</option> <option値= "1991">1991年</option> <option値= "1992"> 1992年</option> <option value = "1993"> 1993オプション> <オプション値= "1998"> 1998 Value = "2005">2005年</option> <option value = "2006"> 2006年</option> <option値> <オプション値= "2007"> 2007年</option> <option value = "2008">2008年</option> <option値> <オプション値> " </option> <option値= "2013"> 2013 </option> <option value = "2014"> 2014 </option> <option value = "2015"> 2015 </option> <option value = "2016" > <Option Value = "2020"> 2020 2026 </option> <option value = "2027"> 2027 Value = "2033"> 2033 > 2039 </option> <option value = "2040"> 2040 > <オプション値= "2046"> 2046 </option> <option value = "2047"> 2047 "" ">一月</option> <option値=" 1 ">二月</option> <option値=" 2 ">三月</option> <option値=" 3 ">四月</option> <option値> <オプション値> <オプション値> <オプション値> <オプション値> <オプション値> <オプション値> <オプション値> <5">六月</option> <option> <option> <option value = "6”オプション値= "9">十月</option> <オプション値= "10">十一月</option> <option値= "11">十二月</option> </select> </span> <div class = "changemonth"> <span id = "pre"> <</span> <span id = "next" >> </span> </div> div> <> < /li> <li> </li> <li>四</li> <li> </li> <li>六</li> </ul> <ul id = "daydat"> </ul> </div> <div class = "dateTimefoot"> <span class = "seltime"> span> span> <span <"> </<"> </<> <> <> <> <> </<> <> <> <> <> <> <> <> <> </</>> </</</<> </</>> </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确定</span> <span id = "curtime">当前时间</span> </div> </div> </div> '
     );
     o("本文").append(t), c = !0
    }
 
    関数m(o, t) {
     var i = 新しい Date(t, o, 1);
     i.getDay() を返す
    }
 
    関数 f(o, t) {
     var n = t % 4,
      p = t % 100、
      l = t % 400;
     0 == n && 0 != p || 0 == l ? i[o] : e[o] を返す
    }
 
    関数g(){
     var t = "",
      i = f(l, p);
     a > i && (a = i)、console.log(a);
     (var e, n = m(l, p), u = 0; u < n; u++) t += "<li></li>";
     (u = 1; u <= i; u++) の場合、e = u == a ? "class = 'curDay'" : "", t += "<li " + e + ">" + u + "</li>";
     o("#dayDat").html(t)
    }
 
    関数y() {
     (var t = "", i = "", e = 0; e < 24; e++) e < 10 && (e = "0" + e), t += e == u ? "<li class='cur'>" + e + の場合
      "</li>" : "<li>" + e + "</li>";
     (e = 0; e < 60; e++) e < 10 && (e = "0" + e) の場合、i += e == v ? "<li class='cur'>" + e + "</li>" : "<li>" +
      e + "</li>";
     o("#selHour ol").html(t)、o("#selMinute ol").html(i)
    }
 
    関数T() {
     o(".dateTimeWrap").show();
     var i = t.type;
     if ("日付" != i) {
      y()、o(".datePart").hide().siblings(".timePart").show();
      var e = o("#selHour .cur");
      o("#selHour ol").scrollTop(e.offset().top - o("#selHour ol").offset().top + o("#selHour ol").scrollTop() -
       e.outerHeight();
      var n = o("#selMinute .cur");
      o("#selMinute ol").scrollTop(n.offset().top - o("#selMinute ol").offset().top + o("#selMinute ol").scrollTop() -
       n.outerHeight())
     }
     "time" != i && (g(), o(".datePart").show().siblings(".timePart").hide(), o("#yearSelect").val(p), o(
      "#monthSelect").val(l))、"datetime" == i ? o(".selTime").show() : o(".selTime").hide()
    }
 
    関数M() {
     var o = t.type,
      i = t.値、
      0 です。
     戻り値 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)、"日付" ==
      o && (3 != i.length || i[0] > 2050 || i[0] < 1920 || i[1] > 12 || i[1] < 1 || i[2] > 31 || i[2] < 1) && (e = !
       1)、"時間" == o && (2 != i.length || i[0] > 23 || i[0] < 1 || i[1] > 59 || i[1] < 1) && (e = !1))、e
    }
 
    関数P() {
     var i, e, n = t.type;
     (i = "日付" == n ? p + "-" + (parseInt(l) + 1) + "-" + a : "時間" == n ? u + ":" + v : p + "-" + (parseInt(l) +
       1) + "-" + a + " " + u + ":" + v, s.val(i), o(".dateTimeWrap").hide(), t.success && "function" == typeof t
      .success) && (e = "date" == n ? [p, parseInt(l) + 1, parseInt(a)] : "time" == n ? [u, v] : [p, parseInt(l) +
      1、parseInt(a)、u、v
     ]、t.成功(e))
    }
    var S = o(これ);
    t = o.extend(!0, {}, r, d), c || h(), o("#selcurday,#close,#dayDat,.changeMonth span,.selTime").unbind(
     "クリック"), o("#yearSelect,#monthSelect").unbind("変更"), o("#yearSelect,#monthSelect").change(function() {
     l = o("#monthSelect").val()、p = o("#yearSelect").val()、g()
    }), o(".changeMonth span").click(function() {
     "pre" == this.id ? (l -= 1, -1 == l && (l = 11, p -= 1)) : (l += 1, 12 == l && (l = 0, p += 1)), g(), o(
      "#yearSelect").val(p)、o("#monthSelect").val(l)
    })、o("#selcurday").click(function() {
     var i = 新しい日付;
     p = i.getFullYear()、l = i.getMonth()、a = i.getDate()、g()、o("#yearSelect").val(p)、o("#monthSelect").val(
      l)、"datetime" != t.type ? P() : o(".datePart").hide().siblings(".timePart").show()
    })、o("#close").click(function() {
     o(".dateTimeWrap").hide()
    })、o("#dayDat").on("click", "li", function() {
     a = o(this).html(), "datetime" != t.type ? P() : o(".datePart").hide().siblings(".timePart").show()
    })、o(".selTime").click(function() {
     「時間を選択」 == o(this).html() ? o(".datePart").hide().siblings(".timePart").show() : o(".datePart").show().siblings(
      ".timePart").hide()
    }), o(".timePart ol",.timeFooter #ensure,.timeFooter #curTime").unbind("click"), o(".timePart ol").on("click",
     「リ」、
     関数（） {
      o(this).addClass("cur").siblings("li").removeClass("cur");
      var t = o(this).parent();
      t.animate({
       scrollTop: o(this).offset().top - t.offset().top + t.scrollTop() - o(this).outerHeight()
      }, 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("パラメータエラー"), !1;
     var i = this.value;
     もし（i）{
      i = i.replace(/-/g, "/");
      var e = 新しい日付(i)
     }
     "date" == t.type ? this.value ? (l = e.getMonth(), p = e.getFullYear(), a = e.getDate()) : (l = t.value[1] -
      1、p = t.value[0]、a = t.value[2]) : "time" == t.type ? this.value ? (u = this.value.split(":")[0]、v =
      this.value.split(":")[1]) : (v = t.value[1], u = t.value[0]) : this.value ? (l = e.getMonth(), p = e.getFullYear(),
      a = e.getDate(), u = e.getHours(), v = e.getMinutes()) : (l = t.value[1] - 1, p = t.value[0], a = t.value[
      2]、v = t.value[4]、u = t.value[3])、s = o(これ)、T();
     var n = S.offset().left,
      c = S.offset().top + S.outerHeight() + 4;
     o(".dateTimeWrap").css({
      背景: t.background、
      上: c,
      左: n
     })
    })
   }）、 これ
  }
 })
});

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>jQuery は入力ボックスをクリックしてカレンダー コントロールをポップアップします</title>
  <link rel="スタイルシート" href="css/dateTime.css" >
  <link rel="スタイルシート" 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>
 </head>
 <本文>
  <div class="row" style="margin-top: 50px;">
   <div class="input-group 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="誕生日" aria-describedby="sizing-addon1" id="日付">
   </div>
  </div>
  <script type="text/javascript">
   $("#date").datetime({
    タイプ: "日付",
    値: [2021, 1, 1]
   })
  </スクリプト>
 </本文>
</html>