{"id":526,"date":"2024-10-31T15:46:53","date_gmt":"2024-10-31T06:46:53","guid":{"rendered":"https:\/\/support.three-meister.com\/techwiki\/?p=526"},"modified":"2024-10-31T21:38:51","modified_gmt":"2024-10-31T12:38:51","slug":"%e3%80%90bootstrap5%e3%80%91%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95tempusdominus-v6","status":"publish","type":"post","link":"https:\/\/support.three-meister.com\/techwiki\/?p=526","title":{"rendered":"\u3010BootStrap5\u3011\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u8868\u793a\u3059\u308b\u65b9\u6cd5(tempusdominus v6)"},"content":{"rendered":"

BootStrap\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u6a5f\u80fd\u3092\u8a2d\u7f6e\u3059\u308b\u305f\u3081\u306e\u624b\u9806\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002(ASP.NET GridView\u3000\u5bfe\u5fdc)<\/p>\n

\u6982\u8981<\/h2>\n

BootStrap\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u3059\u308b\u306b\u306f\u4ee5\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002
\n\u3053\u306e\u8a18\u8f09\u65b9\u6cd5\u3067Class\u306b\u300cdatePicker\u300d\u3092\u8a2d\u5b9a\u3057\u305f\u8981\u7d20\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t
\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc<\/th>\u30d0\u30fc\u30b8\u30e7\u30f3<\/th>\n<\/tr>\n<\/thead>\n
bootstrap 5<\/td>5.3.3(latest)<\/td>\n<\/tr>\n
popper.js<\/td>2.11.6<\/td>\n<\/tr>\n
font awesome<\/td>6.5.1<\/td>\n<\/tr>\n
tempus-dominus<\/td>6.9.4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

\u3010\u6e96\u5099\u3011\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u30ea\u30f3\u30af<\/h2>\n

CDN\uff08\u5916\u90e8\u30b5\u30a4\u30c8\u3092\u76f4\u63a5\u53c2\u7167\u3059\u308b\uff09\u5834\u5408<\/h3>\n

CDN\u65b9\u5f0f\u3067\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u5229\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u30d8\u30c3\u30c0\u30fc\u90e8\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n

\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8<\/span><\/h4>\n
<head>\r\n--------------------\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\u4e2d\u7565>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0-----------------------------\r\n<!--\u00a0 \u00a0 \u00a0 BootStrap5\u00a0 (latest)\u00a0 \u00a0 -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/css\/bootstrap.min.css\">\r\n<!--\u00a0 \u00a0 \u00a0 tempus dominus 6.9.4\u00a0 \u00a0 -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@eonasdan\/tempus-dominus@6.9.4\/dist\/css\/tempus-dominus.min.css\">\r\n<!--\u00a0 \u00a0 \u00a0 font-awesome 6.5.1\u00a0 \u00a0 -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<style>\r\n    .date-container-days div.dow {\r\n    color: #000 !important;\r\n    font-weight: bold;\r\n    }\r\n        .date-container-days div.dow:first-child {\r\n        color: #f00 !important;\r\n        }\r\n        .date-container-days div.dow:nth-child(7) {\r\n        color: #00f !important;\r\n        }\r\n    .date-container-days div.day.weekend {\r\n    color: #f00;\r\n    }\r\n    .date-container-days div.day:nth-child(7n) {\r\n    color: #00f;\r\n    }\r\n    .date-container-days div.day.old.weekend,\r\n    .date-container-days div.day.new.weekend {\r\n    color: #00000060;\r\n    }\r\n<\/style>\r\n--------------------\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\u4e2d\u7565>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0-----------------------------\r\n<\/head><\/pre>\n
JavaScript<\/span><\/h4>\n
JavaScript\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u306b\u8a18\u8f09\u3044\u305f\u3057\u307e\u3059\u3002
\n\u203bJavaScript\u306e\u8a18\u8f09\u306fBody\u306e\u4e00\u756a\u4e0b\u306b\u8a18\u8f09\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u4e0a\u306b\u66f8\u304f\u3068\u52d5\u4f5c\u3057\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
<body>\r\n--------------------\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\u4e2d\u7565>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0-----------------------------\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@latest\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.11.6\/dist\/umd\/popper.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@eonasdan\/tempus-dominus@6.9.4\/dist\/js\/tempus-dominus.min.js\"><\/script>\r\n<script id=\"rendered-js\">\r\n    var elements = document.getElementsByClassName('datePicker');\r\n\r\n    for (var i = 0; i < elements.length; i++) {\r\n        var eleName = elements[i].getAttribute(\"id\");\r\n\r\n        var element = document.getElementById(eleName);\r\n\r\n        const picker = new tempusDominus.TempusDominus(element, {\r\n            localization: {\r\n                format: 'yyyy\/MM\/dd',\r\n                dayViewHeaderFormat: { year: 'numeric', month: 'long' },\r\n                today: '\u672c\u65e5',\r\n                close: '\u9589\u3058\u308b',\r\n                selectMonth: '\u6708\u3092\u9078\u629e',\r\n                previousMonth: '\u524d\u6708',\r\n                nextMonth: '\u6b21\u6708',\r\n                selectYear: '\u5e74\u3092\u9078\u629e',\r\n                previousYear: '\u524d\u5e74',\r\n                nextYear: '\u6b21\u5e74',\r\n                selectDecade: '\u671f\u9593\u3092\u9078\u629e',\r\n                previousDecade: '\u524d\u671f\u9593',\r\n                nextDecade: '\u6b21\u671f\u9593',\r\n                previousCentury: '\u524d\u4e16\u7d00',\r\n                nextCentury: '\u6b21\u4e16\u7d00'\r\n            },\r\n\r\n            display: {\r\n                components: {\r\n                    clock: false\r\n                },\r\n\r\n                buttons: {\r\n                    close: true\r\n                }\r\n            }\r\n        });\r\n    }\r\n<\/script>\r\n<\/body><\/pre>\n
Web\u30da\u30fc\u30b8\u3078\u306e\u8a2d\u5b9a<\/h2>\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u8868\u793a\u3057\u305f\u3044\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u4ee5\u4e0b\u306e\u8868\u8a18\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002
\n\"\"<\/p>\n
<div runat=\"server\" class=\"input-group date mb-3 datePicker\" id=\"datetimepicker\" data-target-input=\"nearest\">\r\n    <asp:TextBox runat=\"server\" type=\"text\" class=\"form-control datetimepicker-input\" data-target=\".datePicker\" \/>\r\n    <div class=\"input-group-text\" data-target=\".datePicker\" data-toggle=\"datetimepicker\">\r\n        <i class=\"far fa-calendar-alt\"><\/i>\r\n    <\/div>\r\n<\/div><\/pre>\n
\u25c7\u305d\u308c\u305e\u308c\u306e\u8981\u7d20\u306e\u610f\u5473<\/div>\n
\n\n\n\n\t\n\t\n\t\n\t
1\u884c\u76ee\u3000Class \"datePicker\"<\/td>\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u3066\u3044\u308b\u30af\u30e9\u30b9\u3002
\n\u3053\u306e\u540d\u524d\u3067JavaScript\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u5c55\u958b\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u8868\u793a\u3057\u305f\u3044\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u56f2\u3046Div\u8981\u7d20\u306b\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
\uff12\u884c\u76ee Class \"datetimepicker-input\"<\/td>BootStrap5\u3088\u308a\u5fc5\u8981\u3068\u306a\u3063\u305f\u3082\u306e\u3067\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u5165\u529b\u3092\u884c\u3046\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\uff08\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\uff09\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n
\uff12\u884c\u76ee data-target \".datepicker\"<\/td>\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u52d5\u4f5c\u3055\u305b\u308b\u30af\u30e9\u30b9\u306b\u7d10\u3065\u3051\u308b\u8a2d\u5b9a\u3067\u3059\u3002<\/td>\n<\/tr>\n
\uff13\uff5e\uff15\u884c\u76ee\u3000\u5168\u822c<\/td>\u30ab\u30ec\u30f3\u30c0\u30fc\u30a2\u30a4\u30b3\u30f3\u3092\u8868\u793a\u3055\u305b\u3066\u3001\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306e\u8981\u7d20\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u3059\u3002
\ni\u30bf\u30b0\u304c\u30a2\u30a4\u30b3\u30f3\u3092\u6307\u5b9a\u3001\u305d\u306e\u5916\u306ediv\u30bf\u30b0\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u52d5\u4f5c\u3068\u7d10\u3065\u3051\u3066\u3044\u307e\u3059\u3002
\n

\n<\/i>
\n<\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n
\n
\"\"<\/p>\n
\u30aa\u30d7\u30b7\u30e7\u30f3<\/h2>\n
\u884c\u8ffd\u52a0\u30dc\u30bf\u30f3\u7b49\u3001Updatepanel\u3092\u4f7f\u7528\u3057\u3066\u753b\u9762\u63cf\u753b\u304c\u5909\u66f4\u3055\u308c\u308b\u5834\u5408\u306f\u4e0a\u8a18\u306b\u52a0\u3048\u3066\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092JavaScript\u306e\u300crendered-js\u300d\u306b\u8a18\u8f09\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u2606\u306e\u3064\u3044\u3066\u3044\u308b\u51e6\u7406\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u753b\u9762\u63cf\u753b\u5f8c\u306b\u518d\u5ea6JavaScript\u306e\u8a2d\u5b9a\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u305f\u3081\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3067\u304d\u308b<\/div>\n<\/div>\n
function pageLoad() {\r\n    \/\/ \u753b\u9762\u521d\u671f\u5316\u6642\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u30bb\u30c3\u30c8\u2605\r\n    SetShowCalc();\r\n\r\n    \/\/ PageRequestManager\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u2606\r\n    var manager = Sys.WebForms.PageRequestManager.getInstance();\r\n\r\n    \/\/ \u975e\u540c\u671f\u30dd\u30b9\u30c8\u30d0\u30c3\u30af\u5b8c\u4e86\u5f8c\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u518d\u30bb\u30c3\u30c8\u2606\r\n    manager.add_endRequest(\r\n        function (sender, args) {\r\n            SetShowCalc();\r\n        }\r\n    );\r\n}\r\nfunction SetShowCalc() {\r\n    var elements = document.getElementsByClassName('datePicker');\r\n\r\n    for (var i = 0; i < elements.length; i++) {\r\n        var eleName = elements[i].getAttribute(\"id\");\r\n\r\n        var element = document.getElementById(eleName);\r\n\r\n        const picker = new tempusDominus.TempusDominus(element, {\r\n            localization: {\r\n                format: 'yyyy\/MM\/dd',\r\n                dayViewHeaderFormat: { year: 'numeric', month: 'long' },\r\n                today: '\u672c\u65e5',\r\n                close: '\u9589\u3058\u308b',\r\n                selectMonth: '\u6708\u3092\u9078\u629e',\r\n                previousMonth: '\u524d\u6708',\r\n                nextMonth: '\u6b21\u6708',\r\n                selectYear: '\u5e74\u3092\u9078\u629e',\r\n                previousYear: '\u524d\u5e74',\r\n                nextYear: '\u6b21\u5e74',\r\n                selectDecade: '\u671f\u9593\u3092\u9078\u629e',\r\n                previousDecade: '\u524d\u671f\u9593',\r\n                nextDecade: '\u6b21\u671f\u9593',\r\n                previousCentury: '\u524d\u4e16\u7d00',\r\n                nextCentury: '\u6b21\u4e16\u7d00'\r\n            },\r\n\r\n            display: {\r\n                components: {\r\n                    clock: false\r\n                },\r\n\r\n                buttons: {\r\n                    close: true\r\n                }\r\n            }\r\n        });\r\n    }\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"BootStrap\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u6a5f\u80fd\u3092\u8a2d\u7f6e\u3059\u308b\u305f\u3081\u306e\u624b\u9806\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002(ASP.NET GridView\u3000\u5bfe\u5fdc) \u6982\u8981 BootStrap\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u3059\u308b\u306b\u306f\u4ee5\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[],"class_list":["post-526","post","type-post","status-publish","format-standard","hentry","category-bootstrap5"],"_links":{"self":[{"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/posts\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=526"}],"version-history":[{"count":20,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=\/wp\/v2\/posts\/526\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.three-meister.com\/techwiki\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}