この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 1. レンダリング2. コードこの場合、他の ls ファイルと css ファイルに加えて、Bootstrap と Jquery が使用されます。 dateTime.cssは次のとおりです。 @文字セット "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; } dateTime.min.js は次のとおりです。 (関数(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> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Hyper-V なしで Windows 10 を動作させるソリューション
mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...
背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...
多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...
<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...
背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...
この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...
ログポイントベースのレプリケーション1. マスターデータベースとスレーブデータベースに専用のレプリケ...
目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...
シナリオ 1: サーバーの制限により、外部に開かれているポートは 1 つだけですが、別の外部ネットワ...
目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...
まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...
この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...