Angular 添加bootstrap-datepicker 套件

1. install jquery及bootstrap-datepicker

首先是npm要新增 jquery及bootstrap-datepicker

npm install jquery

npm install bootstrap-datepicker

如果有安裝typescript也要裝types/jquery，不然會報錯

npm install @types/jquery

安裝完成後在package.json的dependencies可以查閱安裝好的套件

接著在angular.json 的

projects\architect\build\options\scripts及

projects\architect\test\options\scripts

加上套件路徑，安裝好的套件都會統一放在node_modules內

在src資料夾底下新增typings.d.ts

並在內容添加

interface JQuery {
  datepicker(options?: any):any;
}

如下圖

ngOnInit(): {
    $('#startDate').datepicker({
      autoclose: true,
      format: "yyyy/mm/dd",
      todayHighlight: true
    });

在angular.json的scripts中添加語系的json檔案

路徑為： (範例為繁體中文，該資料夾底下有其他語言把它換掉即可)

          "./node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-TW.min.js"

因jQuery在更改輸入的值時，沒有調用瀏覽器的change event。因此不會執行檢驗，修改的值也就不會更新到綁定的屬性上。

因為是修前人的issue，所以改成在最後submit 時取得該欄位的值再送出。

      this.Form.startDate = $("#startDate").val();

參考：