1、当时使用的资源地址：http://www.bootcss.com/p/bootstrap-datetimepicker/
2、如何让时间只显示到日期，不显示具体时刻
控制显示精度的是datetime.js的内容
$(function () {
$('.form_datetime').datetimepicker({ //日期选择框
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
minView: 2,
showMeridian: 1
});
})
可以在实际的js文件中重写这部分。
minView的值表示精度。此例中，minView=2，精度为“日”。
3、如何让显示的日期为汉字
bootstrap-datetimepicker.fr.js/bootstrap-datepicker.zh-CN.js文件中定义了显示的文字，
显示中文，需要在设置的时候，把language设为“zh-CN”（datetime.js）
然后引用bootstrap-datepicker.zh-CN.js文件
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今日",
suffix: [],
meridiem: ["am", "pm"],
weekStart: 1,
};
}(jQuery));
4、html文件中的部分
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label class="control-label">截止时间</label>
<div class="input-group date form_datetime" data-date-format="yyyy-mm-dd" data-link-field="postDeadline">
<input class="form-control" size="16" type="text" value="" readonly>
<!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>-->
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="postDeadline" name="deadLine" value="" /><br/>
</div>
</div>
</div>
5、对可选择的时间进行限制，并设置显示精度等（接2）
以下是有两个datetimepicker，时间限制互相影响的情况。（与4中的html不一致）
// 初始化 datetimePicker
// elements 是需要 datetimePicker化元素
function initDateTimePicker($elements) {
var today = formatDate(); $elements.datetimepicker({
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
// 默认都是从今天开始
$elements.datetimepicker("setStartDate", today) var $start = $elements.filter(".start");
var $deadline = $elements.filter(".deadline"); // 开始日期 默认为今天
$start
.find(".form-control")
.val(today); // 当日期变化时，修改另一个时间的限制值(没起作用)
$start
.on('changeDate', function(ev){
$deadline.datetimepicker("setStartDate", formatDate(ev.date))
}); $deadline
.on('changeDate', function(ev){
$start.datetimepicker("setEndDate", formatDate(ev.date))
});
} function formatDate(date) {
date = date || new Date(); return [
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join("-");
}
若不考虑两个datetimepicker的情况，只对其中一个设置，不能选择今天之前的日期
function initDateTimePicker($elements) {
var today = formatDate();
console.log(today);
$elements.datetimepicker({
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
// 默认都是从今天开始
$elements.datetimepicker("setStartDate", today)
//var $start = $elements.filter(".start");
//var $deadline = $elements.filter(".deadline");
// 开始日期 默认为今天
$(this)
.find(".form-control")
.val(today);
}
function formatDate(date) {
date = date || new Date();
return [
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join("-");
}
使用
initDateTimePicker($(".form_datetime"));
6、修改显示的样式（此例中，让日历界面横向占据整个界面）
/***********datetimepicker************/
.datetimepicker{
width:calc(100% - 30px);
left:15px!important;
}
.datetimepicker:before {
display: none;
}
.datetimepicker::after {
display: none;
}
.datetimepicker table{
width:100%;
}