bootStrap--5.js插件-1.时间、日期格式化

来源：互联网发布：人工智能对于社会坏处编辑：程序博客网时间：2024/05/29 08:46

1 基本引入

<html>      <head>            <meta charset="utf-8" />            <title></title>            <!--<引入样式 Bootstrap ${pageContext.request.contextPath } -->            <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" />      </head>      <body>            <!--引入jquery static/js/jquery-1.12.4.min.js -->            <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>            <!--引入js Bootstrap -->            <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>      </body></html>

2 显示

3 日期控件

3.1 引入

3.2 Html

3.3 Js

3.4 Code

<!DOCTYPE html><html>     <head>       <meta charset="utf-8" />       <title></title>       <!-- 1.基本：引入样式 Bootstrap ${pageContext.request.contextPath } -->       <link rel="stylesheet"href="static/bootstrap/css/bootstrap.min.css"/>        <link rel="stylesheet"href="static/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.min.css"/>     </head>     <body>        <div class="col-xs-4">           <div class="input-groupinput-daterange">              <div class="input-group-addon">注册时间</div>              <input type="text" class="form-control" id="beginDate">              <div class="input-group-addon">至</div>              <input type="text" class="form-control" id="endDate">           </div>       </div>        <div class="col-xs-12">       </div>        <div class="col-xs-3">           <div class="input-groupdate">              <div class="input-group-addon">出生日期</div>              <input type="text" class="form-control" id="birthday">              <div class="input-group-addon">                  <span class="glyphiconglyphicon-th"></span>              </div>           </div>       </div>        <!-- 1.基本：引入jquery static/js/jquery-1.12.4.min.js -->       <script type="text/javascript"src="static/js/jquery-1.12.4.min.js"></script>       <!-- 1.基本：引入js Bootstrap -->       <script type="text/javascript"src="static/bootstrap/js/bootstrap.min.js"></script>        <script type="text/javascript"src="static/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js"></script>       <script type="text/javascript"src="static/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>        <script type="text/javascript">           //格式化时间控件           $('#beginDate').datepicker({              language: 'zh-CN',              format: 'yyyy-mm-dd'           });           $('#endDate').datepicker({              language: 'zh-CN',              format: 'yyyy-mm-dd'           });            $('#birthday').datepicker({              language: 'zh-CN',              format: 'yyyy-mm-dd',           });       </script>    </body> </html>

官网：http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

4 日期时间

4.1 引入

官网：

http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

5 其他控件

阅读全文

0 0