角度 8 中的 Jquery 日期选择器

Question

I'm trying to implement datepicker using jQuery library because my requirement of datepicker is not matching with available intenet source. so I decide create my own datepicker using jquery UI

I have included jQuery UI in index.html

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

and in the component

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

in th ts file

declare var $: any;

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

but every time I'm getting error

core.js:7187 ERROR Error: Uncaught (in promise): TypeError: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function

I tried all the available answers in the Stack Overflow.

Answer 1

jQuery doesn't have a built in datepicker, have you included the datepicker plugin?

But we don't use jQuery with Angular, find an Angular datepicker.

Answer 2

In my opinion, instead of invest time in creating your own date picker with all the efforts that it will take you. I recommend you to use Angular Material . It's done to work perfectly with Angular, developed and maintained by Google (as well as Angular).

They have already implemented a Datepicker that works perfectly: https://material.angular.io/components/datepicker/overview

Also, they have a lot of reusable components and features that are always necessary for all the projects.

Answer 3

After declaring in your index.html file

You need to make sure , that you call $( '#startDate' ).datepicker after your view is rendered on the UI, To do this you can add your code inside the method ngAfterContentChecked or ngAfterViewChecked, Once you add your code inside these methods of the Component, your date picker will start working.

Also instead of directly putting your code inside the component just like

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

Create a function inside a javascript file(example.js) in your angular application like below

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

Declare your function inside the top of your component class where you want to use it like below

declare function loadDatePicker(): any

and then create ngAfterContentChecked where you call like below

ngAfterContentChecked (){
  loadDatePicker();
}

This works like a charm for me.

But instead of this, I suggest you build a datepicker directive(which can manupulate the DOM) and specify the directive on your input element where you want date picker.