使用bootstrap-datetimepicker遇到的問題

遇到的那些樣式的問題:  剛開始我明明用的是bootstrap3.X的,而且是按照官方demo寫的,但是還是出現一些奇葩的樣式問題,可能和我引入的其它文件產生了衝突,查看源碼後96行我找到bootcssVer這個屬性,所以如果在初始化時將bootcssVer:3傳入,就會按照bootstrap3.X. 傳入bootcssVer: 2就會按照bootstrap2.X的樣式處理.

pickerPosition可以指定四個方向,先上下後左右即(top,bottom和left,right)的組合,不支持默認判斷最適合的顯示位置

最麻煩的還是當datetimepicker遇到彈出框,比如layer之類的. 我發現網上的處理方法是調整z-index,雖然可以使用zIndex: 99999999設置優先級,但是這種方式不太好而且不能隨着頁面滾動而滾動.下面說說我的辦法:

html的格式大致如下所示

<div class="form-group">
    <div class="row">
        <div class="col-sm-4 control-label">成立日期</div>
	<div class="col-sm-8">
		<div id="instituteDate" class="date">
		    <input class="form-control" name="instituteDate" readonly placeholder="成立日期" />
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
		</div>
	</div>
  </div>
</div>

$("#instituteDate").datetimepicker({
    format: "yyyy-mm-dd",
    minView: 2,
    container: "#instituteDate",
    language: "zh-CN",
    autoclose: true,
    pickerPosition: "bottom-left",
    bootcssVer: 3
}).on("changeDate", function (e) {
    $("#organProfile").data("bootstrapValidator").revalidateField("instituteDate");
});

通過設置container,這樣日期就會隨着#instituteDate移動而移動了.

覺得有用就點個贊吧!