Bootstrap+Jquery to achieve calendar effect

Bootstrap+Jquery to achieve calendar effect

This article shares the specific code of Bootstrap+Jquery to achieve the calendar effect for your reference. The specific content is as follows

1. Rendering

2. Code

Bootstrap and Jquery are used in this case, in addition to other ls and css files.

dateTime.css is as follows:

@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 is as follows:

(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(
      '<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">1924年</option><option value="1925">1925年</option><option value="1926">1926年</option><option value="1927">1927年</option><option value="1928">1928年</option><option value="1929">1929年</option><option value="1930">1930年</option><option value="1931">1931年</option><option value="1932">1932年</option><option value="1933">1933年</option><option value="1934">1934年</option><option value="1935">1935年</option><option value="1936">1936年</option><option value="1937">1937年</option><option value="1938">1938年</option><option value="1939">1939年</option><option value="1940">1940年</option><option value="1941">1941年</option><option value="1942">1942年</option><option value="1943">1943年</option><option value="1944">1944年</option><option value="1945">1945年</option><option value="1946">1946年</option><option value="1947">1947年</option><option value="1948">1948年</option><option value="1949">1949年</option><option value="1950">1950年</option><option value="1951">1951年</option><option value="1952">1952年</option><option value="1953">1953年</option><option value="1954">1954年</option><option value="1955">1955年</option><option value="1956">1956年</option><option value="1957">1957年</option><option value="1958">1958年</option><option value="1959">1959年</option><option value="1960">1960年</option><option value="1961">1961年</option><option value="1962">1962年</option><option value="1963">1963年</option><option value="1964">1964年</option><option value="1965">1965年</option><option value="1966">1966年</option><option value="1967">1967年</option><option value="1968">1968年</option><option value="1969">1969年</option><option value="1970">1970年</option><option value="1971">1971年</option><option value="1972">1972年</option><option value="1973">1973年</option><option value="1974">1974年</option><option value="1975">1975年</option><option value="1976">1976年</option><option value="1977">1977年</option><option value="1978">1978年</option><option value="1979">1979年</option><option value="1980">1980年</option><option value="1981">1981年</option><option value="1982">1982年</option><option value="1983">1983年</option><option value="1984">1984年</option><option value="1985">1985年</option><option value="1986">1986年</option><option value="1987">1987年</option><option value="1988">1988年</option><option value="1989">1989年</option><option value="1990">1990年</option><option value="1991">1991年</option><option value="1992">1992年</option><option value="1993">1993年</option><option value="1994">1994年</option><option value="1995">1995年</option><option value="1996">1996年</option><option value="1997">1997年</option><option value="1998">1998年</option><option value="1999">1999年</option><option value="2000">2000年</option><option value="2001">2001年</option><option value="2002">2002年</option><option value="2003">2003年</option><option value="2004">2004年</option><option value="2005">2005年</option><option value="2006">2006年</option><option value="2007">2007年</option><option value="2008">2008年</option><option value="2009">2009年</option><option value="2010">2010年</option><option value="2011">2011年</option><option value="2012">2012年</option><option value="2013">2013年</option><option value="2014">2014年</option><option value="2015">2015年</option><option value="2016">2016年</option><option value="2017">2017年</option><option value="2018">2018年</option><option value="2019">2019年</option><option value="2020">2020年</option><option value="2021">2021年</option><option value="2022">2022年</option><option value="2023">2023年</option><option value="2024">2024年</option><option value="2025">2025年</option><option value="2026">2026年</option><option value="2027">2027年</option><option value="2028">2028年</option><option value="2029">2029年</option><option value="2030">2030年</option><option value="2031">2031年</option><option value="2032">2032年</option><option value="2033">2033年</option><option value="2034">2034年</option><option value="2035">2035年</option><option value="2036">2036年</option><option value="2037">2037年</option><option value="2038">2038年</option><option value="2039">2039年</option><option value="2040">2040年</option><option value="2041">2041年</option><option value="2042">2042年</option><option value="2043">2043年</option><option value="2044">2044年</option><option value="2045">2045年</option><option value="2046">2046年</option><option value="2047">2047年</option><option value="2048">2048年</option><option value="2049">2049年</option><option value="2050">2050年</option></select><select class="month" name="monthSelect" id="monthSelect"><option value="0">一月</option><option value="1">二月</option><option value="2">三月</option><option value="3">四月</option><option value="4">五月</option><option value="5">六月</option><option value="6">七月</option><option value="7">八月</option><option value="8">九月</option><option value="9">十月</option><option value="10">十一月</option><option value="11">十二月</option></select></span><div class="changeMonth"><span id="pre"><</span> <span id="next">></span></div></div><div><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul id="dayDat"></ul></div><div class="dateTimeFoot"><span class="selTime">选择时间</span><span id="close">关闭</span><span id="selcurday">今天</span></div></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><div class="timeFooter"><span class="selTime">选择日期</span><span id="ensure">确定</span><span id="curTime">当前时间</span></div></div></div>'
     );
     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 += "<li></li>";
     for (u = 1; u <= i; u++) e = u == a ? "class = 'curDay'" : "", t += "<li " + e + ">" + u + "</li>";
     o("#dayDat").html(t)
    }
 
    function y() {
     for (var t = "", i = "", e = 0; e < 24; e++) e < 10 && (e = "0" + e), t += e == u ? "<li class='cur'>" + e +
      "</li>" : "<li>" + e + "</li>";
     for (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)
    }
 
    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() {
     "Select time" == 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("Parameter error"), !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
  }
 })
});

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>jQuery clicks the input box to pop up a calendar control</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/javascript" 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="Birthday" aria-describedby="sizing-addon1" id="date">
   </div>
  </div>
  <script type="text/javascript">
   $("#date").datetime({
    type: "date",
    value: [2021, 1, 1]
   })
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Bootstrap time calendar plug-in bootstrap-datetimepicker configuration and application summary
  • Detailed explanation of using daterangepicker, a calendar range selection plugin in bootstrap
  • Use of BootStrap's dual calendar time control
  • Detailed explanation of bootstrap daterangepicker dual calendar time period selection control
  • BootStrap daterangepicker dual calendar control
  • Bootstrap DateTime Picker calendar control simple application
  • How to use bootstrap calendar plugin datetimepicker
  • Implementing calendar sign-in function based on jQuery
  • jQuery EasyUI API Chinese Documentation - Calendar usage
  • 10 Best jQuery Calendar Plugins for Developers

<<:  How to install php7 + nginx environment under centos6.6

>>:  MySQL 8.0 New Features: Hash Join

Recommend

Using js to implement the two-way binding function of data in Vue2.0

Object.defineProperty Understanding grammar: Obje...

Detailed explanation of the use of shared memory in nginx

In the nginx process model, tasks such as traffic...

JavaScript to achieve window display effect

This article shares the specific code of JavaScri...

Optimized implementation of count() for large MySQL tables

The following is my judgment based on the data st...

How to write object and param to play flash in firefox

Copy code The code is as follows: <object clas...

How to communicate between WIN10 system and Docker internal container IP

1. After installing the Windows version of Docker...

Are you still Select *?

There are many reasons why an application is as s...

Tutorial on installing jdk1.8 on ubuntu14.04

1. Download jdk download address我下載的是jdk-8u221-li...

Complete code for implementing the vue backtop component

Effect: Code: <template> <div class=&quo...

VMware ESXi 5.5 deployment and configuration diagram process

Table of contents 1. Installation requirements 2....

JavaScript design pattern learning adapter pattern

Table of contents Overview Code Implementation Su...

Implementation of drawing audio waveform with wavesurfer.js

1. View the renderings Select forward: Select bac...

Detailed explanation of Linux index node inode

1. Introduction to inode To understand inode, we ...

Learn how to deploy and start multiple tomcats and migrate projects in one article

Table of contents Deploy tomcat 1. Download and d...

Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs

Table of contents Problem Description Principle A...