Bootstrap+Jquery实现日历效果 Bootstrap+Jquery实现日历效果

本文实例为大家分享了Bootstrap+Jquery实现日历效果的具体代码，供大家参考，具体内容如下
一、效果图

文章图片

二、代码
本案例中用到了Bootstrap和Jquery，除此之外还有其他的ls和css文件。
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, ol, li { list-style: none; font-family:'Microsoft YaHei'; }address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }input, button, textarea, 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, button, 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.js如下：

(function(o) { "use strict"; "function" == typeof define && define.amd ? define(["jquery"], o) : o(jQuery)})(function(o) { var t, i = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],e = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],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('< >
日
一
二
三
四
五
六
选择时间关闭今天
时

分

选择日期确定当前时间'); o("body").append(t), c = !0} function m(o, t) {var i = new Date(t, o, 1); return i.getDay()} function f(o, t) {var n = t % 4,p = t % 100,l = t % 400; return 0 == n && 0 != p || 0 == l ? i[o] : e[o]} function g() {var t = "",i = f(l, p); a > i && (a = i), console.log(a); for (var e, n = m(l, p), u = 0; u < n; u++) t += "
"; for (u = 1; u <= i; u++) e = u == a ? "class = 'curDay'" : "", t += "
" + u + "
"; o("#dayDat").html(t)} function y() {for (var t = "", i = "", e = 0; e < 24; e++) e < 10 && (e = "0" + e), t += e == u ? "
" + e +"
" : "
" + e + "
"; for (e = 0; e < 60; e++) e < 10 && (e = "0" + e), i += e == v ? "
" + e + "
" : "
" +e + "
"; o("#selHour ol").html(t), o("#selMinute ol").html(i)} function T() {o(".dateTimeWrap").show(); var i = t.type; if ("date" != 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()} function M() {var o = t.type,i = t.value,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), "date" ==o && (3 != i.length || i[0] > 2050 || i[0] < 1920 || i[1] > 12 || i[1] < 1 || i[2] > 31 || i[2] < 1) && (e = !1), "time" == o && (2 != i.length || i[0] > 23 || i[0] < 1 || i[1] > 59 || i[1] < 1) && (e = !1)), e} function P() {var i, e, n = t.type; (i = "date" == n ? p + "-" + (parseInt(l) + 1) + "-" + a : "time" == 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.success(e))}var S = o(this); t = o.extend(!0, {}, r, d), c || h(), o("#selcurday,#close,#dayDat,.changeMonth span,.selTime").unbind("click"), o("#yearSelect,#monthSelect").unbind("change"), 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 = new Date; 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","li",function() {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; if (i) {i = i.replace(/-/g, "/"); var e = new Date(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(this), T(); var n = S.offset().left,c = S.offset().top + S.outerHeight() + 4; o(".dateTimeWrap").css({background: t.background,top: c,left: n})})}), this} })});