#日历插件(响应式版)
####官方地址:http://www.bootcss.com/p/bootstrap-datetimepicker/
##兼容性
- IE9+
##样例：
###1、使用步骤
- 引入样式文件
<link href="style/datepicker.less" rel="stylesheet" type="text/less" />- 引入js
<script src="javascript/jquery-2.1.3.js" type="text/javascript" charset="utf8"></script>
<script src="javascript/date-timepicker.js" type="text/javascript" charset="utf8"></script>- 在页面上配置使用参数：
//单个日历选择
$('.form_datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
pickerPosition:'bottom-left'
});
//起始时间与结束时间日历
var enddatetime;
var startdatetime;
$('.form_datetime_range1 input').hover(function(){
$('.form_datetime_range1').datetimepicker({
format:'yyyy-mm-dd hh:ii',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
// endDate: enddatetime,
pickerPosition:'bottom-left',
// linkField:'dtp_input5',
// linkFormat: "yyyy-mm-dd hh:ii",
endDate: enddatetime,
}).on('changeDate', function(ev){
$('.form_datetime_range2').datetimepicker('remove');
startdatetime=$('.form_datetime_range1 input').val();
});
});- 在页面上添加代码
<div class="input-group date form_datetime " data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" type="text" value="" placeholder="发布时间" />
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" />
###2、demo
##方法和API ###1、方法 datetimepicker(options)
###2、参数说明 format:日期格式 weekStart:一周从哪一天开始。0（星期日）到6（星期六） startDate：开始时间 endDate：结束时间 autoclose:当选择一个日期之后是否立即关闭此日期时间选择器 startView:日期时间选择器打开之后首先显示的视图。 可接受的值 minView:日期时间选择器所能够提供的最精确的时间选择视图 maxView:日期时间选择器最高能展示的选择范围视图 todayBtn:如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选。 todayHighlight:如果为true, 高亮当前日期 keyboardNavigation:是否允许通过方向键改变日期 language:当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中 minuteStep:此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择 pickerPosition:此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent