日期选择框
<!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是基于...
解决bootstrap时间控件显示中文问题~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Bootstrap Datepicker是一个流行的JavaScript插件，它为网页应用提供了优雅的日期选择器功能。这个压缩包"bootstrap-datepicker1.9.0.zip"包含了版本1.9.0的源代码和其他相关资源，使得开发者能够轻松地在Bootstrap...
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式、移动优先的网页项目。它包含了一系列组件和插件，帮助开发者快速创建美观且功能丰富的网页界面。在本篇中，我们将详细探讨如何利用Bootstrap的日期...
bootstrap-datetimepicker是一个简单好用的日历时间插件，在bootstrap首页上也有推荐。使用起来也很简单： 1，必须引入Jquery文件。 2，引入日历插件JS代码：bootstrap-datetimepicker.min.js 3，如果需要使用非英文...
在"bootstrap-datepicker-master.zip"压缩包中，包含了该插件的源码、示例、文档等资源。 1. **Bootstrap框架**：首先，我们需要了解Bootstrap是Twitter推出的一款开源的前端开发框架，提供了丰富的UI组件，如网格...
bootstrap-datepicker 日期插件
Bootstrap Datepicker是一个流行的JavaScript插件，它为网页应用提供了优雅的日期选择功能。这个插件是基于Bootstrap框架设计的，因此它可以无缝地融入Bootstrap样式化的网页中，提供一致且友好的用户体验。版本...
时间控件 中文 可以设置日历为中文 帮助开发 * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung <advanimal@gmail.com>
bootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepickerbootstrap-datepicker
Bootstrap-datepicker 是一个基于 Bootstrap 框架的日期选择器插件，它为 Web 应用提供了美观且功能丰富的日历组件。这个插件在设计时考虑了良好的浏览器兼容性，使得开发者可以方便地在多种设备和浏览器上实现一致...
bootstrap 时间控件
Bootstrap日期选择器插件`bootstrap-datepicker`是一款广泛应用于前端开发中的组件，它是基于流行的Bootstrap框架设计的，旨在为用户提供简洁、美观且易于使用的日期输入功能。这个插件不仅外观符合Bootstrap的设计...
- 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框架的日期时间选择器插件，它为用户提供了便捷的方式来选取日期和时间，尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致，确保了与Bootstrap...
bootstrap-datepicker默认中文最新版，增加了中文选项，下载直接引入使用
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件，它提供了美观、易用的用户界面，用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本，确保了与不同Bootstrap设计...