欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

bootstrap插件之bootstrap-datepicker

程序员文章站 2022-03-04 17:20:57
...

日期选择框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-datepicker.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<script src="../bootstrap-3.3.7/plugin/bootstrap-datepicker.js"></script>
<script src="../bootstrap-3.3.7/plugin/locale/bootstrap-datepicker.zh-CN.min.js"></script>

<script>
function getValues(){
alert($("#createDate").val());
}
</script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <form role="form" class="form-vertical">
    <div class="form-group"  >
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="">
    </div>
   
    <div class="form-group"  >
        <label for="createDate">创建日期</label>
        <input type="text" class="form-control datepicker" id="createDate" data-dateformat="yyyy-mm-dd" placeholder="请输入时间">
    </div>
</form>
      </div>
     
      <script>
          $("#createDate").datepicker({
              language: 'zh-CN', //语言
              autoclose: true, //选择后自动关闭
              clearBtn: true,//清除按钮
              format: "yyyy-mm-dd"//日期格式
          });
      </script>
</div>
</div>

<a onclick="getValues()" style="margin-left: 150px;">获取时间</a>
</body>
</html>
相关标签： bootstrap

上一篇： python中md5\aes加密\base编码

下一篇： bootstrap网格布局

推荐阅读