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

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值