1. 程式人生 > >bootstrap3新增日期控制元件中碰到的問題

bootstrap3新增日期控制元件中碰到的問題

和bootstrap2相比,bootsrap3的改動還是很大的,很多原有的在bootstrap2上開發的js外掛,移植到bootsrap3上以後,出現了各種問題,而這些問題,在剛開始的時候很難找出錯誤出在哪兒。

最近在做國電南自的一個專案,需要用到日期控制元件,前臺介面用bootstrap3 + js,網上大多數給出的都是基於bootstrap2.2開發的js外掛,這裡先給出一個連結,不妨先看一下:http://www.open-open.com/lib/view/open1356568521682.html

但用了之後,點選文字框後面的日期按鈕,總是出不來,折騰了好久,最終還是放棄,若有哪位大蝦弄明白箇中緣由,望告知一下。拋棄了這種方法,又在網上找到了另外一種基於js的日期控制元件,

http://jqueryui.com/datepicker,用這個控制元件以後本以為會躲過bootstrap3版本相容的問題,但是又是折騰了好久,仍然出現了相同的問題,在chrome的“審查元素”中除錯,出現的錯誤如下:

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

這裡總是報錯: Uncaught TypeError: undefined is not a function
1、變數名和函式名相同;
2、js找不到當前呼叫的函式;
在否定了第一個原因後,查詢第二個原因可能出現的地方。經過多次對比,發現了問題所在,在bootstrap3寫的前臺頁面中,一般會有如下程式碼片段,對函式庫的引用:


這幾個庫函式的引用導致了兩個東西的不相容,還不能刪除第二個,於是嘗試把第一個刪除掉,不影響當前介面的正常執行,這才算是暫時解決了這個問題,但是在往下深究,卻超出了我的能力範圍,只能退而求其次,到此為止,在這裡記錄一下自己碰到的障礙,供日後查閱。

另:如果在js中出現$未定義的提示,原因在於沒有引用jquery.js或者路徑不對,這是唯一的解釋,也是出現這個提示錯誤唯一可能的原因。

附自己的前臺介面一張:


到此為止,已經晚上10:00了,該回去了,早睡早起,方能養生~