Bootstrap 时间控件datetimepicker与timepicker
作者：互联网
一、datetimepicker
首先，我们看看点击选择时间的时候的展示页面吧
年 月 日
时 分 上下午
小视图
我们将这款日期控件下载下来。百度bootstrap日期控件即可。
页面里需要的文件有：
bootstrap.min.css（含有bootstrap 所有css）
bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）
jquery-1.8.3.min.js（其他版本的jquery也可以）
bootstrap.min.js（含有bootstrap 所有js）
bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）
locales/bootstrap-datetimepicker.zh-CN.js（重要，这里是日期控件初始值）
html页面是这样滴~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
<meta name="description" content="" />
<meta name="author" content="" />
<link href="bootstrap.min.css" rel="stylesheet" />/*（含有bootstrap 所有css）*/
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />/*（重要，这就是日期控件所需的样式表）*/
</head>
<body>
<div>这里就写上自己需要的代码，比如你想要的是一个简单的输入框时间控件就写输入框的代码，具体如下几种样式介绍</div>
<script type="text/javascript" src="jquery.js"></script>/*（重要，依赖jquery）*/
<script type="text/javascript" src="bootstrap.min.js"></script>/*（含有bootstrap 所有js)*/
<script type="text/javascript" src="bootstrap-datetimepicker.js"></script>/*（重要，这就是日期控件所需的js）*/
<script type="text/javascript" src="locales/bootstrap-datetimepicker.zh-CN.js"></script>/*（重要，弹出日历里面 显示的文字
bootstrap里面显示的是英文 ，触发后显示的年月日等的显示文字，即为：Jan，feb等等）*/
<script type="text/javascript">这里写自己的js，调用时间选择器，也就是激活日期选择器，即为下文的js</script>
</body>
文件引用完了，咱们就开始设置日期控件了。
这里根据不同需求，也有不同的样式写法
第一种是最简单的输入框
代码：
<input type="text" value="2014-09-23 23:05" id="datetimepicker">
js：
$('#datetimepicker').datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd',//显示格式
minView: "month",//设置只显示到月份
initialDate: new Date(),
autoclose: true,//选中自动关闭
todayBtn: true,//显示今日按钮*/
locale: moment.locale('zh-cn')
});
也有这么写的
代码：
<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
js：
$('#datetimepicker').datetimepicker();
作为组件使用的时候
代码是这样的
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
js：
$('#datetimepicker').datetimepicker();
作为内联日期时间选择器：
代码是这样的：
<div id="datetimepicker"></div>
js：
| 1 |
$('#datetimepicker').datetimepicker();
|
以上的介绍中，js部分是一定要写在页面里的，注意要写在页面最后面。（js依赖于jquery和bootstrap等文件）
比如我想设置自己想要的时间控件。我希望点击选择的时候先显示月份而不是年份，我想要时间的顺序是dd-mm-yyyy，这个时候就需要参数来设置了。下面就来具体看看一些参数设置吧。
format
这个是必须要设置的。
String. 默认值: 'mm/dd/yyyy'
日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。
weekStart
Integer. 默认值：0
一周从哪一天开始。0（星期日）到6（星期六）
startDate
Date. 默认值：开始时间
可以选择的最早日期；所有较早的日期将被禁用。
endDate
Date. 默认值：结束时间
可以选择的最新日期；所有以后的日期将被禁用。
daysOfWeekDisabled 一周禁用的日期
String, Array. 默认值: '', []
一周中应该停用的几天。数值为0（星期日）至6（星期六）。多个值应该是逗号分隔的。示例：禁用周末：“0，6”或[0，6]。
autoclose
Boolean. 默认值：false
当选择一个日期之后是否立即关闭此日期时间选择器。
startView
Number, String. 默认值：2, 'month'
日期时间选择器打开之后首先显示的视图。 可接受的值：
- 0 or 'hour' for the hour view
- 1 or 'day' for the day view
- 2 or 'month' for month view (the default)
- 3 or 'year' for the 12-month overview
- 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
minView
Number, String. 默认值：0, 'hour'
日期时间选择器所能够提供的最精确的时间选择视图。
maxView
Number, String. 默认值：4, 'decade'
日期时间选择器最高能展示的选择范围视图。
todayBtn
Boolean, "linked". 默认值: false
如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
todayHighlight
Boolean. 默认值: false
如果为true, 高亮当前日期。
keyboardNavigation
Boolean. 默认值: true
是否允许通过方向键改变日期。
language
String. 默认值: 'en'
单的情况下发送到服务器）。目前船上有英语（“EN”）、德语（“DE”）、巴西（'BR'）和西班牙语（'ES’）翻译，但其他可以添加（见下面的I18N）。如果给出一个未知的语言代码，将使用英语。
forceParse
Boolean. 默认值: true
当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep
Number. 默认值: 5
此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。
pickerReferer : 不建议使用
String. 默认值: 'default' (other value available : 'input')
The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.
pickerPosition
String. 默认值: 'bottom-right' (还支持 : 'bottom-left')
此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。
viewSelect
Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')
使用此选项，您可以选择将从中选择日期的视图。默认情况下，它是最后一个，但是您可以选择第一个，所以在每次单击时，日期将被更新。
showMeridian
Boolean. 默认值: false
此选项将启用日间视图和日间视图的子午线视图。
initialDate
Date or String. 默认值: new Date()
您可以用日期初始化查看器。默认情况下是现在，所以你可以指定昨天或今天午夜…
二、timepicker
1 <div class="col-md-4" style="display: -webkit-inline-box;padding-left:0px"> 2 <div class="input-group"> 3 <input type="text" id="startTime" name="startTime" 4 readonly="readonly" class="form-control timepicker timepicker-default" placeholder="从"> 5 <span class="input-group-btn"> 6 <button class="btn default" type="button"> 7 <i class="fa fa-clock-o"></i> 8 </button> 9 </span> 10 </div> 11 12 </div> 13 <div class="col-md-4"> 14 <div class="input-group"> 15 <input type="text" id="endTime" name="endTime" 16 readonly="readonly" class="form-control timepicker timepicker-default" placeholder="到"> 17 <span class="input-group-btn"> 18 <button class="btn default" type="button"> 19 <i class="fa fa-clock-o"></i> 20 </button> 21 </span> 22 </div> 23 </div>
1 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" /> 2 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css" /> 3 <script type="text/javascript" src="/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script> 4 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> 5 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
var nowTime = '<%=DateTime.Now.ToString("HH:mm")%>';
$("#startTime").val(nowTime).timepicker('setTime', nowTime);
官方文档：DateTime Picker
前提，引用bootstrap哈哈
页面效果：
标签：控件,默认值,Bootstrap,js,日期,datetimepicker,bootstrap 来源： https://blog.51cto.com/u_14302606/2817959