`

bootstrap插件之bootstrap-datepicker

阅读更多

日期选择框

<!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-datepicker-1.9.0_bootstrap源码_

    在本资源中,我们关注的是`bootstrap-datepicker-1.9.0`,这是一个针对Bootstrap框架的日期选择器插件。这个插件允许用户以美观、易用的方式选择日期,常见于各种表单输入和日历应用。 Bootstrap Datepicker是基于...

    bootstrap-datepicker.zh-CN.js

    解决bootstrap时间控件显示中文问题~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    bootstrap-datepicker1.9.0.zip

    Bootstrap Datepicker是一个流行的JavaScript插件,它为网页应用提供了优雅的日期选择器功能。这个压缩包"bootstrap-datepicker1.9.0.zip"包含了版本1.9.0的源代码和其他相关资源,使得开发者能够轻松地在Bootstrap...

    bootstrap-datepicker实现只能选择每一年的某一个月份

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。它包含了一系列组件和插件,帮助开发者快速创建美观且功能丰富的网页界面。在本篇中,我们将详细探讨如何利用Bootstrap的日期...

    bootstrap-datetimepicker-简单好用的日历时间插件

    bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...

    bootstrap-datepicker-master.zip

    在"bootstrap-datepicker-master.zip"压缩包中,包含了该插件的源码、示例、文档等资源。 1. **Bootstrap框架**:首先,我们需要了解Bootstrap是Twitter推出的一款开源的前端开发框架,提供了丰富的UI组件,如网格...

    bootstrap-datepicker.js

    bootstrap-datepicker 日期插件

    bootstrap-datepicker-1.6.4

    Bootstrap Datepicker是一个流行的JavaScript插件,它为网页应用提供了优雅的日期选择功能。这个插件是基于Bootstrap框架设计的,因此它可以无缝地融入Bootstrap样式化的网页中,提供一致且友好的用户体验。版本...

    bootstrap-datetimepicker.zh-CN.js

    时间控件 中文 可以设置日历为中文 帮助开发 * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung &lt;advanimal@gmail.com&gt;

    bootstrap-datepicker日期选择插件

    bootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepicker

    bootstrap-datepicker

    Bootstrap-datepicker 是一个基于 Bootstrap 框架的日期选择器插件,它为 Web 应用提供了美观且功能丰富的日历组件。这个插件在设计时考虑了良好的浏览器兼容性,使得开发者可以方便地在多种设备和浏览器上实现一致...

    bootstrap-datetimepicker时间组件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件,它提供了美观、易用的用户界面,用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本,确保了与不同Bootstrap设计...

    bootStarp-datepicker.js下载

    bootstrap 时间控件

    Bootstrap日期选择器插件bootstrap-datepicker

    Bootstrap日期选择器插件`bootstrap-datepicker`是一款广泛应用于前端开发中的组件,它是基于流行的Bootstrap框架设计的,旨在为用户提供简洁、美观且易于使用的日期输入功能。这个插件不仅外观符合Bootstrap的设计...

    光年后台管理系统模板基于bootstrap 4.4.1版本

    - Bootstrap v4.4.1- JQuery- Chart.js- perfect-scrollbar- Bootstrap-Multitabs- bootstrap-clockpicker- bootstrap-colorpicker- bootstrap-datepicker- bootstrap-datetimepicker- bootstrap-table- jquery-...

    bootstrap-datetimepicker.js

    Bootstrap-Datetimepicker.js是一款基于Bootstrap框架的日期时间选择器插件,它为用户提供了便捷的方式来选取日期和时间,尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致,确保了与Bootstrap...

    bootstrap-datepicker默认中文最新版

    bootstrap-datepicker默认中文最新版,增加了中文选项,下载直接引入使用

Global site tag (gtag.js) - Google Analytics