Bootstrap+Jquery實現日曆效果
阿新 • • 發佈：2021-08-11
本文例項為大家分享了Bootstrap+實現日曆效果的具體程式碼，供大家參考，具體內容如下
一、效果圖
二、程式碼
本案例中用到了Bootstrap和Jquery，除此之外還有其他的ls和檔案。
dateTime.css如下：
@charset "utf-8";
*{
margin:0; padding:0;
}
body,html body {
color: #262626;
font: 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: "微軟雅黑"; }
fieldset,img { border: 0; }
ul,li { list-style: none; font-family:'Microsoft YaHei'; }
address,caption,cite,dfn,em,strong,var,optgroup { font-style: normal; font-weight: normal; }
h1,h6 { font-size: 100%; font-weight: normal; }
input,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}
a{text-decoration:none;}
a:hover{
text-decoration: none;
}
input,textarea{ *font-size: 100%;}
ol,ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table,tr,td { border-collapse: collapse; border-spacing: 0; margin:0;padding:0;}
caption,th { text-align: left; }
.clearfix { clear: both; zoom:1;}
.clearfix:after { display: block; clear: both; content: "\0020"; visibility: hidden; height: 0; }
.mycontainer{
width:960px;
margin:40px auto;
}
.dateTimeWrap{
display: none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
background: #494a4a;
padding:10px;
position: fixed;
left:0;
top:0;
z-index:999;
font-size:14px;
color:#e2e2e2;
width:240px;
}
.datePart li.curDay{
color:#1ea0fa;
}
#dayDat li:hover{
border:2px double #fff;
background: #1ea0fa;
color:#fff;
}
#dateTime{
*float:left;
color: #000000;
}
.dateTimeHead{
*overflow:hidden;
padding:8px 0px 4px;
}
.datePart li{
border:2px double transparent;
float: left;
cursor: default;
vertical-align: middle;
width: 30px;
height: 26px;
text-align: center;
line-height: 26px;
}
.datePart ul{
overflow: hidden;
}
.changeMonth{
float: right
}
.changeMonth #pre,.changeMonth #next{
display: inline-block;
width:20px;
height:20px;
cursor: default;
color:#333;
background: #fff;
text-align: center;
line-height:20px;
}
.changeMonth #next{
margin-left: 10px;
}
.dateTimeFoot span,.timeFooter span{
cursor: pointer;
display: inline-block;
background: #fff;
color: #333;
height:20px;
line-height: 20px;
width:50px;
text-align: center;
margin-left: 6px;
float:right;
}
.timePart{
text-align:center;
color:#333;
line-height: 22px;
}
.timePart p,.timePart ul{
background: #fff;
}
.timePart>ul>li{
float: left;
width:119px;
background: #fff;
color:#333;
border:1px solid #ccc;
border-right:none;
}
.timePart ul{
overflow: hidden;
}
.timePart>ul>li p{
line-height: 30px;
border-bottom:1px solid #ccc;
}
.timePart ol{
height:180px;
overflow-y: hidden;
*overflow-y: auto;
overflow-x: hidden;
}
.timePart ol:hover{
overflow-y:auto;
}
.timePart ol:hover li{
padding-left:17px;
*padding-left:0;
}
.timePart ol li{
line-height: 30px;
}
.timePart ol li.cur{
background: #1ea0fa;
color: #fff
}
.dateTimeFoot,.timeFooter{
overflow:hidden;
margin-top: 10px;
height: 20px;
}
.timeFooter span{
width:80px;
}
.timeFooter #ensure{
width:50px;
}
.dateTimeFoot .selTime,.timeFooter .selTime{
float:left;
margin-left:0;
display:none;
}
.selTime{
width:80px!important;
}
#yearSelect{
margin-right: 6px;
}
.darkgrey{
color:#d0d0d0 !important;
}
.mycontainer input{
border:1px solid #ccc;
padding:6px 10px;
}dateTime.min.如下：
(function(o) {
"use strict";
"function" == typeof define && define.amd ? define(["jquery"],o) : o(jQuery)
})(function(o) {
var t,i = [31,29,31,30,31],e = [31,28,n = new Date,p = n.getFullYear(),l = n.getMonth(),a = n.getDate(),u = n.getHours(),v = n.getMinutes(),s = null,r = {
type: "date",background: "#494a4a"
},c = !1;
o.extend(o.fn,{
datetime: function(d) {
return this.each(function() {
function 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">
完整版程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery點選輸入框彈出日曆控制元件</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/" src="js/dateTime.min.js"></script>
</head>
<body>
<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="date">
</div>
</div>
<script type="text/script">
$("#date").datetime({
type: "date",value: [2021,1,1]
})
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。