`

bootstrap插件之bootstrap-datepicker

bootstrap 
阅读更多

日期选择框

<!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菜单项navbar
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics