角度 8 中的 Jquery 日期選擇器

Question

我正在嘗試使用 jQuery 庫實現 datepicker，因為我對 datepicker 的要求與可用的 Internet 源不匹配。 所以我決定使用 jquery UI 創建我自己的日期選擇器

我在 index.html 中包含了 jQuery UI

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

並在組件中

  Start Date : <input type="text" #sd name="startDate" id="startDate"/>

在 ts 文件中

declare var $: any;

$( '#startDate' ).datepicker({
      dateFormat: 'dd/mm/yy',
      firstDay: 1
    });

但每次我收到錯誤

core.js:7187 錯誤錯誤：未捕獲（承諾）：TypeError：$(...).datepicker 不是函數 TypeError：$(...).datepicker 不是函數

我嘗試了 Stack Overflow 中所有可用的答案。

Answer 1

jQuery 沒有內置日期選擇器，您是否包含了日期選擇器插件？

但是我們不將 jQuery 與 Angular 一起使用，而是找到一個 Angular 日期選擇器。

Answer 2

在我看來，與其花時間創建您自己的日期選擇器，不如花費您所有的努力。 我建議您使用Angular Material 。 它與由 Google（以及 Angular）開發和維護的 Angular 完美配合。

他們已經實現了一個完美運行的 Datepicker： https : //material.angular.io/components/datepicker/overview

此外，它們具有許多可重用的組件和功能，這些組件和功能對於所有項目都是必需的。

Answer 3

在 index.html 文件中聲明后

您需要確保在 UI 上呈現視圖后調用 $( '#startDate' ).datepicker，為此，您可以在 ngAfterContentChecked 或 ngAfterViewChecked 方法中添加代碼，在這些方法中添加代碼后組件，您的日期選擇器將開始工作。

也不要像這樣直接將代碼放在組件中

$( '#startDate' ).datepicker({
      dateFormat: 'dd/mm/yy',
      firstDay: 1
});

在您的 Angular 應用程序中的 javascript 文件（example.js）中創建一個函數，如下所示

function loadDatePicker(){
  $( '#startDate' ).datepicker({
      dateFormat: 'dd/mm/yy',
      firstDay: 1
   });
}

在組件類的頂部聲明你的函數，你想像下面這樣使用它

聲明函數 loadDatePicker(): 任何

然后創建 ngAfterContentChecked 在你調用的地方，如下所示

ngAfterContentChecked (){
  loadDatePicker();
}

這對我來說就像一種魅力。

但不是這樣，我建議您構建一個 datepicker 指令（它可以操縱 DOM）並在您想要日期選擇器的輸入元素上指定該指令。