角度 8 中的 Jquery 日期选择器

Question

我正在尝试使用 jQuery 库实现 datepicker，因为我对 datepicker 的要求与可用的 intenet 源不匹配。所以我决定使用 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 没有内置的 datepicker，你是否包含了 datepicker 插件？

但是我们不使用 jQuery 和 Angular，找到一个 Angular 日期选择器。

Answer 2

在你的 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）并在您想要日期选择器的输入元素上指定该指令，而不是这个。

Answer 3

在我看来，与其花费时间来创建自己的日期选择器，不如花费你所有的努力。我建议您使用Angular Material。它与 Angular 完美配合，由 Google（以及 Angular）开发和维护。

他们已经实现了一个完美运行的 Datepicker： https ://material.angular.io/components/datepicker/overview

此外，它们有许多可重用的组件和功能，这些都是所有项目所必需的。