角度 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({&nbsp; &nbsp; &nbsp; dateFormat: 'dd/mm/yy',&nbsp; &nbsp; &nbsp; firstDay: 1});在您的 Angular 应用程序中的 javascript 文件（example.js）中创建一个函数，如下所示function loadDatePicker(){&nbsp; $( '#startDate' ).datepicker({&nbsp; &nbsp; &nbsp; dateFormat: 'dd/mm/yy',&nbsp; &nbsp; &nbsp; firstDay: 1&nbsp; &nbsp;});}在您想要使用它的组件类的顶部声明您的函数，如下所示声明函数 loadDatePicker(): 任意然后在您调用的地方创建 ngAfterContentChecked，如下所示ngAfterContentChecked (){&nbsp; loadDatePicker();}这对我来说就像一个魅力。但我建议您构建一个 datepicker 指令（它可以操纵 DOM）并在您想要日期选择器的输入元素上指定该指令，而不是这个。

Answer 3

在我看来，与其花费时间来创建自己的日期选择器，不如花费你所有的努力。我建议您使用Angular Material。它与 Angular 完美配合，由 Google（以及 Angular）开发和维护。他们已经实现了一个完美运行的 Datepicker：&nbsp;https ://material.angular.io/components/datepicker/overview此外，它们有许多可重用的组件和功能，这些都是所有项目所必需的。